html, body {
  font-family: arial;
  font-size: 12px;
  height: 100%;
  margin: 0;
  padding: 0;
}

.wrapper {
  min-height: 100%;
  margin-bottom: -28px ;
  position: relative;
}

.wrapper:after {
  content: "";
  height: 28px;
  display: block;  
}

.loginPageHeader {
  position: fixed;
  font-size: 16px;
  width: 100%;
  padding: 0;
  background-color: transparent;
  color: #FFF;
  font-weight: bold;
  letter-spacing: 2px;
  z-index: 10;
}

.loginPageHeader .titleText {
  position: absolute;
  left: 40px;
  top: 20px;
}

.header {
  position: fixed;
  font-size: 16px;
  width: 98%;
  padding: 10px 1%;
  background-color: #476DD5;
  color: #FFF;
  font-weight: bold;
  letter-spacing: 2px;
  z-index: 100;
}

.header .stageInfo {
  position: absolute;
  top: 10px;
  right: 28%;
  border: 1px solid #FF0;
  padding: 1px 14px;
  color: #444;
  background-color: #FF0;
  border-radius: 12px;
  font-size: 12px;
}

.header .assistance {
  display: none;
  position: absolute;
  right: 190px;
  top:4px;
}

.header .assistance a, .header .assistance a:visited {
  display: block;
  width: 150px;
  padding: 4px;
  font-size: 16px;
  background-color: #389cff;;
  color: #FFF;
  text-align: center;
  border: 2px solid #FFF;
  border-radius: 8px;
  text-decoration: none;
}

.header .assistance a:hover {
  background-color: #389cff;
  color: #000;
}

.smallButton {
  padding: 4px 0 !important;
  margin-right: 20px;
  color: #AAA;
}

.header .addNew, .assistanceHeader .addNew {
  position: absolute;
  right: 10px;
  top:5px;
}

.header .selectNewDate {
  position: absolute;
  right: 190px;
  top:8px;
  font-weight: normal;
}

.header .selectNewDate select {
  font-size: 16px;
}

.header .addNew a, .header .addNew a:visited, .assistanceHeader .addNew a, .assistanceHeader .addNew a:visited {
  display: block;
  width: 150px;
  padding: 5px;
  font-size: 16px;
  background-color: #FF7800;
  color: #FFF;
  text-align: center;
  text-decoration: none;
  border-radius: 8px;
}

.header .addNew a:hover {
    background-color: #FF9a22;
    color: #000;
}

.assistanceHeader .addNew a, .assistanceHeader .addNew a:visited {
    width: 185px !important;
    background-color: #ffc522;
    color: #000;
}

.assistanceHeader .addNew a:hover {
    background-color: #ffee22;
    color: #000;
}
.main {
  padding: 72px 10px 10px 10px;
}

.mainTable {
  background-color: #BBB;
  width: 100%;
}


td, th {
  padding: 4px;
  background: #FFF;
  vertical-align: top;
}

td {
  padding: 0px;
  min: 22px;
}

tr:hover td {
  background-color: #D5DCFE;
}

.highlightedRow {
  background-color: #D5DCFE;
} 

td a {
  display: block;
  padding: 4px 0 4px 4px;
  width: 100%;
  text-decoration: none;
  color: #000;
}

#mainList tr td:nth-child(3) a,#mainList tr td:nth-child(5) a,#mainList tr td:nth-child(10) a,#mainList tr td:nth-child(11) a,#mainList tr td:nth-child(12) a, #mainList tr td:nth-child(13) a, #mainList tr td:nth-child(14) a {
  text-align: center;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#mainList tr td:nth-child(1), #mainList tr td:nth-child(10) {
  text-align: right;
  padding-right: 8px;
}

#mainList tr td:nth-child(1) {
  text-align: center;
  padding-left: 0;
  padding-right: 1px;
}

.logChanges {
  position: absolute;
  width: 100px;
  bottom: 10px;
  left: 10%;
  z-index: 200;
}

.exportLogPDF {
    position: absolute;
    width: 160px;
    bottom: 10px;
    left: 30%;
    z-index: 200;
}

.changesPopup {
  position: absolute;
  right: 8px;
  top: 26px;
  padding: 0px;
  box-shadow:  0px 0px 10px #888;
  border-radius: 0 0 10px 10px;
  width: 700px;
  background-color: #FFF;
  z-index: 10000;
  display: none;
  border: 1px solid #888;
  border-top: none;
}

.changesPopup .changesHeader {
    position: relative;
    margin: 0;
    background-color: #CCC;
    color: #000;
    padding: 4px 1%;
    width: 98%;
    /*font-weight: bold;*/
    font-size: 14px;
}

/*.changesPopup .changesHeader:hover {*/
  /*cursor: move;*/
/*}*/

.changesPopup .changesContent {
  width: 98%;
  padding: 1%;
  position: relative;
  height: 268px;
  overflow: auto;
}

.changesPopup .changesFooter {
  text-align: center;
  padding: 4px;
}

.changesPopup .changesFooter input {
  background-color: #CCC;
  border: 1px solid #999;
  padding: 2px 40px;
  border-radius: 5px;
  font-size: 14px;
  margin-top: 8px;
}

.changesPopup .changesFooter input:hover {
  background-color: #888;
  color: #FFF;
  cursor: pointer;
}

.changesPopup table {
  border-collapse: collapse;
  width: 100%;
}

.changesPopup td, .changesPopup th {
  padding: 2px 4px;
  font-size: 12px;
  border: 1px solid #AAA;
  text-align: left;
  vertical-align: top;
}

.changesPopup th:first-child {
  width: 112px;
}

.logChanges a, .logChanges a:visited, .exportLogPDF a, .exportLogPDF a:visited {
  text-decoration: none;
  color: #ff4500;
}

#accessLogTable tr td:nth-child(3), #accessLogTable tr td:nth-child(4), #accessLogTable tr td:nth-child(5), #accessLogTable tr td:nth-child(7), #accessLogTable tr td:nth-child(8) {
  text-align: center;
} 

#accessLogTable tr td:nth-child(6) {
  text-align: right;
}

#accessLogTable tr td {
  vertical-align: text-bottom;
}

th {
  background-color: #DDD;
}

.extraDestinationInfo {
  position: relative;
  color: blue;
  margin-top: 2px;
  max-width: 400px;
}

.locNumberRight {
  float: right;
  width: 20px;
  padding: 0;
  text-align: right;
  margin-right: 8px;
}

.footer, .loginFooter {
  width: 98%;
  font-size: 14px;
  padding: 8px 1%;
  background-color: #476DD5;
  font-size: 11px;
  text-align: center;
  color:#DDD;
  bottom: 0;
  left: 0;
  /*position: fixed;*/
}

.assistanceEdit .footer {
  position: relative;
}

.loginFooter {
  background-color: #0A608E;
}

.header .adminLink {
  position:absolute;
  right:245px;
  top:19px;
  width:100px;
  font-size: 12px;
  font-weight: normal;
  text-align: center;
}

.header .adminLink a, .header .adminLink a:visited {
  display: block;
  text-decoration: none;
  background-color: #CCC;
  padding: 2px;
  border-radius: 4px;
  margin: -4px 0 0 0;
}

.header .adminLink a:hover {
  background-color: #AAA;
  text-decoration: none;
  color: #FFF;
}

.footer .adminLink {
  float: left;
  margin: 2px 10px;
  width:100px;
}

.footer .adminLink a, .footer .adminLink a:visited {
  display: block;
  text-decoration: none;
  background-color: #CCC;
  padding: 2px;
  border-radius: 4px;
  margin: -4px 0 0 0;
  color: #000;
}

.footer .adminLink a:hover {
  background-color: #AAA;
  text-decoration: none;
  color: #FFF;
}

.footer .dateTimeBottom {
  float: right;
  text-align: right;
  margin-right: 20px;
  color: #FFF;
}

.editLog a, .editLog a:visited {
  display: block;
  width: 80%;
  padding: 2px 0px;
  text-align: center;
  background-color: #476DD5;
  color: #FFF;
  border-radius: 4px;  
  text-decoration: none;
  margin: 2px auto 0 auto;
} 

.editLog a:hover {
  background-color: #2B4281;
}

.cellCentered {
  text-align: center;
}
 
#toolTipBox {
  position:absolute;
  min-width:100px;
  padding: 8px;
  border-radius: 4px;
  background-color: #FFF;
  color: #000;
  border: 1px solid #888;
  z-index: 100;
  box-shadow: 2px 2px 5px #444;
  font-size: 16px;
  display:none;
}

#sysHeader:hover {
  cursor: move;
}
/*
#toolTipBox:after {
  content: "";
  width: 0px;
  height: 0px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 14px solid #444;  
  position:absolute;
  top:36%;
  right:-15px;
  z-index:100;
}

*/
/***************************** popup *****************************/
.editPopup {
  position: fixed;
  top: 100px;
  left: 10%;
  width: 80%;
  min-height: 380px;
  padding: 0;
  border: 1px solid #AAA;
  background-color: #FFF;
  border-radius: 10px;
  box-shadow: 4px 4px 10px #888;
  display: none;
} 

.editPopup .header {
  position: relative;
  margin:0;
  background-color: #476DD5;
  color: #FFF;
  padding: 4px 1%;
  border-radius: 9px 9px 0 0;
  width: 98%;
  font-weight: normal;
  text-align: center;
}

.editPopup .content {
  float: left;
  padding: 1%;
  width: 80%;
}

.editPopup .buttons {
  float: left;
  width: 18%;
  margin: 0;
  padding: 0;
  text-align: center;
  min-height: 300px;
}

.editPopup .buttons .save a, 
.editPopup .buttons .save a:visited, 
.editPopup .buttons .logOff a, 
.editPopup .buttons .logOff a:visited, 
.editPopup .buttons .cancel a,
.editPopup .buttons .cancel a:visited,
.assistancePopup .footer .save a,
.assistancePopup .footer .save a:visited,
.assistancePopup .footer .cancel a,
.assistancePopup .footer .cancel a:visited,
.contentAssistance .footer .save a,
.contentAssistance .footer .save a:visited,
.contentAssistance .footer .cancel a,
.contentAssistance .footer .cancel a:visited
{
  display: block;
  width: 80%;
  padding: 10px 0;
  text-align: center;
  background-color: #259433;
  margin: 20px 0 0 0;
  border-radius: 8px;
  text-decoration: none;
  font-size: 18px;
  color: #FFF;
}

.contentAssistance .footer .save a,
.contentAssistance .footer .save a:visited,
.contentAssistance .footer .cancel a,
.contentAssistance .footer .cancel a:visited {
  margin-top: 0;
}


.assistancePopup .footer .left {
  width: 20%;
  float: left;
}

.assistancePopup .footer .right {
  width: 70%;
  float: right;
  text-align: center;
  margin: 0 0 20px 0;
}

.assistancePopup .footer .save, .assistancePopup .footer .cancel, .contentAssistance .footer .save, .contentAssistance .footer .cancel {
  display: inline-block;
  width: 40%;
  margin: 0 2%;
}

.assistancePopup .footer .right.save a,
.assistancePopup .footer .right .save a:visited,
.assistancePopup .footer .right .cancel a,
.assistancePopup .footer .right .cancel a:visited {
  display: inline-block;
  width: 90%;
}

.assistancePopup .footer .cancel a,
.assistancePopup .footer .cancel a:visited,
.contentAssistance .footer .cancel a,
.contentAssistance .footer .cancel a:visited {
  background-color: #FF9A40;
}

.editPopup .buttons .logOff a, 
.editPopup .buttons .logOff a:visited {
  background-color: #6D89D5;  
}

.editPopup .buttons .cancel a,
.editPopup .buttons .cancel a:visited {
  background-color: #FF9A40;  
}

.editPopup .buttons .save a:hover, .editPopup .buttons .logOff a:hover, .editPopup .buttons .cancel a:hover,
.assistancePopup .footer .save a:hover, .assistancePopup .footer .cancel a:hover{
  color: #000;
}

.editPopup .footer {
  background-color: #FFF; /* #476DD5; */
  color: #FFF;
  padding: 4px 2%;
  border-radius: 0 0 10px 10px;
  width:96%;  
  margin: 0;
  position:absolute;
  bottom:0;
}

.pLeft, .pMiddle, .pRight, .pLeftComments, .pPOBRight, .pPOBLeft, .pLeftRadio, .pMiddleEtrNew {
  display: inline-block;
  width: 10%;
  font-size: 16px;
  padding: 2px 1% 2px 0;
  text-align: right;
} 

.pLeftRadio {
  width: 30%;  
}

.pMiddleEtrNew  {
  margin-left: -4px;  
}

.sLeft, .sMiddle, .sRight, .sLeftComments, .sMiddleLeft, .sMiddleRight  {
  display: inline-block;
  width: 15%;
  font-size: 16px;
  padding: 2px 1% 2px 0;
  text-align: right;
} 

.sMiddleLeft {
  width: 6%
}

.sMiddleRight {
  width: 7%;
}

.pPOBLeft {
  width: 20%;
}

.pPOBRight {
  width: 8%;
}

.pLeftComments, .sLeftComments {
  height: 76px;
  float: left;
}

.pLeftInput, .pMiddleInput, .pRightInput, .pobInput, .pMiddleInputFreq, .pLeftCheckbox, .pLeftCheckboxInfo, .sMiddleRadioInput, .sRightRadioInput,
.pLeftInputEtr, .pMiddleInputEtr, .pRightInputEtr {
  display: inline-block;
  width: 20%;
  padding: 2px 0;
  font-size: 16px;
}

.sMiddleRadioInput {
  width: 35%;
}

.sMiddlelRight input[type='text'] {
  width: 30%;
  font-size: 16px;
  padding-left : 1%;
}

.sLeftInput, .sMiddleInput {
  display: inline-block;
  width: 27%;
  padding: 2px 0;
  font-size: 16px;
}

.sMiddleInput.info {
  color: #476DD5;
  font-size: 12px;
}

.pobInput {
  width: 6%;
}

.pMiddleInputFreq {
  width: 10%;
}

.sMiddleInputLong, .sLeftInputLong {
  display: inline-block;
  padding: 2px 0;
  font-size: 16px;
  width:27%;
}

#accessInfo {
  color: #476DD5;
  font-size: 12px;
}


.sLeftInputLong {
  width: 51.3%;
}

.sLeftInputLong  input[type='text'] {
  width: 97% !important;
}

.pLeftInput  input[type='text'], .pMiddleInput  input[type='text'], .pMiddleInput select, .sMiddleInputLong select, .pRightInput  input[type='text'],
.pRightInput select, .pMiddleInputFreq select, .sLeftInputLong  input[type='text']{
  width: 95%;
  padding : 2px 1%;
  font-size: 16px;
  border: 1px solid #AAA;
}

.pLeftInputEtr input[type='text'], .pMiddleInputEtr input[type='text'], .pRightInputEtr input[type='text'] {
  width: 30%;
  font-size: 16px;
  padding: 3px 1% 2px 1%;
  border: 1px solid #AAA;
}

.pLeftInputEtr select, .pMiddleInputEtr select, .pRightInputEtr select {
  width: 61%;
  font-size: 16px;
  padding: 2px 1%;
  border: 1px solid #AAA;
}

.manualDates {
  margin-left: 4%;
  padding: 3px 1% 2px 1% !important;
  width: 58% !important;
}

.pLeftCheckbox {
  width: 40px;
  position: relative;
}

.pLeftCheckbox input {
  width: 18px;
  height: 20px;
  bottom: -8px;
  position: absolute;
  left: -3px;
}

.pLeftCheckboxInfo {
  width: 75%;
  text-align: left;
  font-size: 12px;
}

.pLeftCheckboxInfo .launchedOptionAdded {
  color:green;
}

.pLeftCheckboxInfo .launchedOptionRemoved {
  color:red;
}

.pobInput input {
  width: 58%;
  padding: 2px 1%;
  font-size: 16px;
  text-align: center;
}

.sLeftInput input, .sMiddleInput input {
  width: 93%;
  font-size: 16px;
}

.pLeftInput select, .pMiddleInput select, .pRightInput select {
  width: 98%;
  font-size: 16px;
  padding: 2px 1%;
  border: 1px solid #AAA;
}

.sLeftInput select, .sMiddleInputLong select {
  width: 94%;
  font-size: 16px;
  padding: 2px 0;
  border: 1px solid #AAA;
}

.pLeftInputWide {
  display: inline-block;
  width: 40%;
  padding: 2px 0;
  font-size: 16px;
}

#locationErrorInfo {
  text-align: center;
  font-size: 12px !important;
}

.pMiddleInputWide {
  display: inline-block;
  width: 56%;
  padding: 2px 0;
  font-size: 16px !important;
}

.pMiddleInputWide input {
  width: 89%;
  font-size: 16px;
  border: 1px solid #AAA;
  padding: 2px 1%;
}

#time_Now {
  width: 45%;
}

#group {
  width: 47%;
}

.pRightComments, .sRightComments {
  display: inline-block;
  width: 81.1%;
  margin-top: 4px;
}

#commentsTd {
  width: 20% !important;
}

.pRightComments textarea {
  width: 99%;
  height: 80px;
  padding: 2px 1%;
  font-size: 14px;
  font-family: arial;
}

.sRightComments textarea {
  width: 99%;
  height: 80px;
  font-size: 14px;
  font-family: arial;
}

.highlight {
  background-color: #C0FFC0;
}

.futureDay {
  background-color: #FFFFC0;
}

.searchHighlight {
  background-color: #ffead7;
}

.searchResultStart {
  background-color: #ff7800;
  font-weight: bold;
  padding: 2px 0;
}


.noAccessHighlight {
  color: #F00;
  font-weight: bold;
}

.emptyLine, .bottomLine {
  width: 100%;
  margin: 0;
  height: 4px;
  padding: 0;
}

.bottomLine {
  height: 8px;
}

#userErrorInfo {
  display: none;
  width: 100%;
  text-align: center;
  padding-bottom: 10px;
}

.userFeedback {
  display: none;
  width: 80%;
  margin: 20px 0;
}

input[type='date'] {
  font-family: arial;
  width: 95%;
  font-size: 16px;
  padding: 0px 1%;
  border: 1px solid #AAA;  
}

.deleteRecord {
  position: absolute;
  bottom: 10px;
  right: 20px;
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: right;
  display: none;
}

.deleteButton {
  display: none;
}

.deleteButton a, .deleteButton a:visited {
  display: inline-block;
  width: 100px;
  padding: 2px 0;
  text-align: center;
  background-color: #F00;
  color: #FFF;
  text-decoration: none;
  margin-left: 10px;
  border-radius: 6px;
}

.deleteButton a:hover {
   background-color: #A00;
}

.dateDropdown {
  margin-left: 4%;
}

#log_off_date {
  margin-left: 3%;
  width: 56%;
}

/************************************************* TOP MENU ***********************************/
.topMenu {
  position: fixed;
  background-color: #97CBFF;
  padding-left: 0.5%;
  margin: 38px 0 0 0;
  width: 100%;
  border-top: 1px solid #FFF;
  z-index: 100;
}

.topMenu a, .topMenu a:visited {
  display: inline-block;
  padding: 4px 20px;
  margin: 0 -1px 0 0;
  text-decoration: none;
  text-align: center;
  color: #000;
  font-size: 14px;
  border-left: 1px solid #FFF;
  border-right: 1px solid #FFF;
  /* transition: 0.5s; */
}

.topMenu a:hover {
  background-color: #476DD5;
  color: #FFF;
  /* transition: 0.5s; */
}

.mSelect {
  background-color: #FFF;
}

.mSelect:hover {
  background-color: #EEE !important;
  color: #000 !important;  
}

.mEmergency {
  background-color: #F00;
  color: #FFF !important;
  padding: 4px 40px !important;
}

.demoUser {
  background-color: #FFA;
}
/*
.mEmergency:hover {
  background-color: #F55 !important;
  color: #FFF !important;
}
*/
.logOut, .crossLink, .helpLink {
  float: right;
  width: 80px;
  margin: 2px 15px 0 0;
}


.logOut a, .logOut a:visited, .crossLink a, .crossLink a:visited, .helpLink a, .helpLink a:visited {
  display: block;
  width: 70px;
  padding: 2px 2px;
  background-color: transparent;
  border: 1px solid #FFF !important;
  color: #FFF;
  text-decoration: none;  
  border: none;
  text-align: center;
  background-color: #AAA;
  border-radius: 10px;
  font-size: 12px;
}

.helpLink a, .helpLink a:visited {
    background-color: #30BD5D;
    background-color: #30BD5D;
    padding: 2px;
    margin-top: 0px;
}

.logOut a:hover, .crossLink a:hover, .helpLink a:hover {
  text-decoration: none;
  background-color: #888;
}

.helpLink a:hover {
  background-color: green;
}

.chPass {
  display: inline-block;
  width: 100px;
  font-size: 14px;  
}

#sysUserTable tr td:nth-child(6),#sysUserTable tr td:nth-child(3),#sysUserTable tr td:nth-child(4),#sysUserTable tr td:nth-child(5) {
  text-align: center;
  padding-left: 2px !important;
  padding-right: 2px !important;
}

#sysUserTable tr td:nth-child(6) a,#sysUserTable tr td:nth-child(3) a,#sysUserTable tr td:nth-child(4) a,#sysUserTable tr td:nth-child(5) a {
  text-align: center;
  padding-left: 0px !important;
  padding-right: 0px !important;
}

#sysUserTable tr td:nth-child(6) a, #sysUserTable tr td:nth-child(3) a {
  font-weight: bold;
}

#sysUserTable tr td:nth-child(8) {
  text-align: center;
  font-weight: bold;
}

#sysUserTable tr td:nth-child(11) {
  width: 10%;
  padding: 2px;
}

#adminUserTable tr td:nth-child(6),#adminUserTable tr td:nth-child(2),#adminUserTable tr td:nth-child(4),#adminUserTable tr td:nth-child(5) {
  text-align: center;
  padding-left: 2px !important;
  padding-right: 2px !important;
}

#adminUserTable tr td:nth-child(3) a,#adminUserTable tr td:nth-child(2) a,#adminUserTable tr td:nth-child(4) a,#adminUserTable tr td:nth-child(5) a {
  text-align: center;
  padding-left: 0px !important;
  padding-right: 0px !important;
}

#adminUserTable tr td:nth-child(3) a, #adminUserTable tr td:nth-child(2) a {
  font-weight: bold;
}

#adminUserTable tr td:nth-child(8) {
  text-align: center;
  font-weight: bold;
}

#adminUserTable tr td:nth-child(11) {
  width: 10%;
  padding: 2px;
}

#assistanceCallTable tr td:nth-child(10) {
  width: 20%;
}

#assistanceCallTable tr td:nth-child(12), #assistanceCallTable tr td:nth-child(13), #assistanceCallTable tr th:nth-child(13) {
  padding-left: 2px;
  padding-right: 2px;
  text-align: center;
}

#assistanceCallTable tr td:nth-child(12) a, #assistanceCallTable tr td:nth-child(13) a {
  width: 90%;
}

#assistanceCallTable tr td:nth-child(13) a {
  padding: 3px 0 0 0;
}

.titleSelected {
  display: block;
  background-color: #BBB;
  color: #000;
  text-decoration: none;
  margin: -3px;
  padding: 3px;
}

.titleNotSelected {
  display: block;
  background-color: transparent;
  color: #000;
  text-decoration: none;
  margin: -3px;
  padding: 3px;
}

.titleNotSelected:hover {
  background-color: #CCC;
}

#mainBase, #subBase {
  width: 40px;
  text-align: center;
}

.subBaseNo, .baseDays {
  display: inline-block;
  margin-left: 30px;
}

.baseDays input {
  width: 150px;
  font-size: 16px;
}

#baseTime {
  width: 80px;
}

.xIcon {
  color: #F00;
}

.tickIcon {
  color: #009000
}

.xIconBold {
  color: #F00;
  font-weight: bold;
}

.tickIconBold {
  color: #009000;
  font-weight: bold;
}

#searchForm {
  display: inline;
}

#searchInput {
  width: 200px;
  margin-right: 1px;
}

#clearButton {
    display: none;
    margin-left: -2px;
}
/******************************************* Login Section *************************************/
.loginBox {
  position:relative;
  width: 500px;
  border: 1px solid #888;
  border-radius: 10px;
  margin: 10% auto 3% auto;
  overflow: hidden;
  box-shadow: 5px 5px 15px #AAA;
}

.loginBox .loginHeader {
  background-color: #0A608E;
  padding: 4px;
  text-align: center;
  font-size: 18px;
  color: #FFF;
}

.loginBox .loginContent {
  min-height: 80px;
  padding: 20px 20px 4px 20px;
}

.loginBox .loginContent .left, .loginBox .loginContent .right {
  display: inline-block;
  padding: 2px;
  width: 20%;
  font-size: 16px;
}

.loginBox .loginContent .right {
  width: 70%;
}

.loginBox .loginContent .right input {
  width: 90%;
  font-size: 16px;
  padding: 2px 4px;
}

.loginBox .loginContent .login {
  text-align: center;
  margin: 20px 0;
}

.loginBox .loginContent .login input {
  font-size: 16px;
  width: 30%;
  padding: 4px;
  border-radius: 5px;
  border: 1px solid #888;
}

.loginBox .loginContent .login input:hover {
  background-color: #0A608E;
  color: #FFF;
  cursor: pointer;
}

.errorLogin {
  width: 100%;
  text-align: center;
  margin-bottom: 15px;
  color: #F00;
  font-size: 16px;
  font-weight: normal;  
}

.userNameDisplay {
  font-weight: normal;
  font-size: 12px;
  display: inline-block;
  margin-left: 40px;
}

/**************************** emergency block *******************************/
.emergencyPopup, .assistancePopup {
  position: fixed;
  top: 68px;
  left: 4%;
  width: 40%;
  min-height: 200px;
  padding: 0;
  border: 1px solid #F00;
  background-color: #FFF;
  border-radius: 10px;
  box-shadow: 4px 4px 10px #888;
  overflow: hidden;
  display: none;
}

.assistancePopup {
  left: unset;
  width: 50%;
  right: 4%;
}

.emergencyPopup .headerEmergency, .assistancePopup .headerEmergency {
  background-color: #F00;
  color: #FFF;
  padding: 4px 1%;
  width: 98%;
  font-weight: normal;
  text-align: center;
  font-size: 16px;
  letter-spacing: 1px;
  font-weight: bold;
}

.emergencyPopup .headerEmergency:hover, .assistancePopup .headerEmergency:hover {
  cursor: move;
}

.emergencyPopup .contentEmergency, .assistancePopup .contentAssistance {
  float: left;
  padding: 1%;
  width: 98%;
  max-height: 500px;
  overflow: auto;
}

.assistancePopup .contentAssistance .left, .assistancePopup .contentAssistance .right,
.assistanceContent .contentAssistance .left, .assistanceContent .contentAssistance .right{
  width: 20%;
  float: left;
  padding: 2px 0 2px 2%;
}

.assistancePopup .contentAssistance .right, .assistanceContent .contentAssistance .right {
  width: 70%;
}

.assistancePopup .contentAssistance .left, .assistanceContent .contentAssistance .left {
  font-weight: bold;
}

.assistancePopup .contentAssistance .left.assistanceLevel, .assistanceContent .contentAssistance .left.assistanceLevel {
  color: #000;
}

.assistancePopup .contentAssistance input[type='text'], .assistanceContent .contentAssistance input[type='text'] {
  width: 99%;
  padding: 1px 0 1px 1%;
}

.assistancePopup .contentAssistance input[type='number'], .assistanceContent .contentAssistance input[type='number'] {
  width: 30%;
  padding: 1px 0 1px 1%;
}

.assistancePopup .contentAssistance .clear, .assistanceContent .contentAssistance .clear {
  clear: both;
  border-bottom: 1px solid #AAA;
  margin-top: 0px;
  padding: 5px 0 0px 0;
  margin-bottom: 5px;
}

.assistancePopup .contentAssistance textarea, .assistanceContent .contentAssistance textarea {
  width: 98%;
  height: 60px;
  padding: 1%;
  font-family: arial, Helvetica;
}

#assistanceVesselDescription, #assistanceReturnDestination {
  height: 30px !important;
}

.assistancePopup .contentAssistance input[type='radio'], .assistanceContent .contentAssistance input[type='radio'] {
  display: none;
}

.assistancePopup .contentAssistance input[type="radio"]:checked+label, .assistanceContent .contentAssistance input[type="radio"]:checked+label {
  background-color: #476dd5;
  color: #FFF !important;
  transition-duration: 0.4s;

}

.assistanceOptionalInfo {
  text-align: center;
  font-weight: bold;
  color: #000;
}

.assistanceOptionalInfo.assistanceCall {
  color: #F00;
}

.assistancePopup .contentAssistance label, .assistanceContent .contentAssistance label {
  font-weight: bold;
  border: 1px solid #A0A0A0;
  padding: 8px 0;
  width: 43%;
  text-align: center;
  display: inline-block;
}

.assistancePopup .contentAssistance label:hover, .assistanceContent .contentAssistance label:hover {
  background-color: #EEE;
  cursor: pointer;
}

.emergencyPopup .footer, .assistancePopup .footer, .assistanceContent .footer, .assistancePopup .footer {
  margin: 0 0 10px 0;
  width: 100%;
  text-align: center;
  padding: 2px 0;
  border-radius: 0 0 9px 9px;
  background-color: transparent;
}

.emergencyPopup .footer input, .assistancePopup .footer input, .assistanceContent .footer input {
  background-color: #CCC;
  border: 1px solid #999;
  padding: 2px 40px;
  border-radius: 5px;
  font-size: 14px;
  margin-top: 8px;
}

.emergencyPopup .footer input:hover, .assistancePopup .footer input:hover, .assistanceContent .footer input:hover {
  background-color: #888;
  color: #FFF;
}

#contentAssistanceEdit {
    display: none;
}

.mobileAccessInfo tr td {
  background-color: transparent;
  padding: 2px 0;
}

.mobileAccessInfo tr:hover td {
  background-color: transparent;
}

.mobileAccessInfo tr td:first-child {
  padding-top: 5px;
}

.testMobileLink a, .testMobileLink a:visited {
  background-color: #BBB;
  display: inline-block;
  width: 160px;
  text-align: center;
}

.testMobileLink a:hover {
  background-color: #AAA;
  color: #FFF;
}

.emergencyBlockRight {
  float: left;
  width: 90%;
  padding: 4px 2% 8px 2%;
}

.emergencyBlockLeft {
  float: left;
  width: 90%;
  padding: 4px 2% 8px 2%;
  /* border-right: 1px solid #BBB;  */
}

.emergencyBlockRight.wide, .emergencyBlockLeft.wide {
  width: 95%;
}

.ro_subbase {
  float: right;
  text-align: right;
  font-weight: normal;  
}

.localTimeDisplay {
  margin-top: 14px;
  text-align: center;
  width: 80%;
}

.assistanceAccessLeft, .assistanceAccessRight {
  float: left;
  width: 48%;
  padding: 10px 1%;
}

.mobileUserList {
  height: 496px;
  overflow: auto;
}

.assistanceAccessRight table {
  width: 100%;
  background-color: #AAA;
}

.assistanceAccessRight table th {
  text-align: left;
}

.assistanceAccessRight table td {
  padding: 4px 4px;
  background-color: #FFF;
}

/*********************************************** GENERAL INFORMATION BLOCK ************************************/
.informationPopup, .marinerPopup, .informationPopupRadio, .dataImportPopup {
  position: fixed;
  top: 68px;
  left: 55%;
  width: 40%;
  min-height: 200px;
  padding: 0;
  border: 1px solid #476DD5;
  background-color: #FFF;
  border-radius: 10px;
  box-shadow: 4px 4px 10px #888;
  overflow: hidden;
  display: none;
}

.dataImportPopup {
  top: 80px;
  left: 10%;
}

#dataImportPopup th {
  text-align: left;
}

.marinerPopup {
  left: 30%;
}

.informationPopup .headerInformation, .informationPopupRadio .headerInformationRadio, .marinerPopup .marinerHeaderInformation, .dataImportPopup .dataImportHeader {
  background-color: #476DD5;
  color: #FFF;
  padding: 4px 1%;
  width: 98%;
  font-weight: normal;
  text-align: center;
  font-size: 16px;
  letter-spacing: 1px;
  font-weight: bold;
}

.dataImportPopup .dataImportHeader:hover {
  cursor: move;
}

.informationPopup .headerInformation:hover, .marinerPopup .marinerHeaderInformation:hover {
  cursor: move;
}

.informationPopup .contentInformation, .informationPopupRadio .contentInformationRadio, .marinerPopup .marinerInformation, .dataImportPopup .dataImportContent  {
  float: left;
  padding: 1%;
  width: 98%;
  height: 450px;
  overflow: auto;
}

.accessLevelInfo, .fileContentError {
  font-weight: bold;
  background-color: #DDD;
  padding: 4px;
  text-align: center;
  margin-bottom: 4px;
}

.fileContentError {
  color: #F00;
}

.dataImportPopup .dataImportContent {
  border-bottom: 1px solid #CCC;
}

.dataImportPopup .dataImportContent table {
  width: 100%;
}

.dataImportPopup .dataImportContent table td {
  padding: 2px 4px;
  background-color: #EEE;
}

.dataImportPopup .dataImportContent table td .tickIcon, .dataImportPopup .dataImportContent table td .xIcon {
  font-weight: bold;
  margin: auto;
}

.alignCentre {
  text-align: center;
}

.informationPopup .contentInformation, .informationPopupRadio .contentInformationRadio {
  margin-bottom: 10px;
  border-bottom: 1px solid #888;
  padding: 0%;
  width: 100%;
}  

.informationPopup .footer, .informationPopupRadio .footer, .marinerPopup .footer, .dataImportPopup .footer {
  margin: 0 0 10px 0;
  width: 100%;
  text-align: center;
  padding: 2px 0;
  border-radius: 0 0 9px 9px;
  background-color: transparent;
}

.informationPopup .footer input, .informationPopupRadio .footer input, .marinerPopup .footer input, .dataImportPopup .footer input {
  background-color: #CCC;
  border: 1px solid #999;
  padding: 2px 40px;
  border-radius: 5px;
  font-size: 14px;
  margin-top: 8px;
}

.footer input:hover, .marinerPopup .footer input:hover {
  background-color: #888;
  color: #FFF;
}

.marinerPopup .marinerFindTable {
  background-color: #AAA;
  width:100%;
}

.marinerFindTable tr td:first-child {
  font-weight: bold !important;
  width:35%;
  vertical-align: top;
}

.marinerFindTable tr td {
  padding: 4px !important;
  font-size: 14px !important;  
  background-color: #FFF;
}

.noMarinerFound {
  font-size: 16px;
  width:100%;
  padding: 40px 0;
  text-align: center;
}

#textRed {
  color: #F00;
  font-size: 16px;
  position: absolute;
  right: 5px;
  bottom: 2px;
}

#textRed:hover {
  cursor: pointer;
}

.callSignTop {
  position: relative;
  text-align: left !important;
  z-index: 1;
}


.eLeft{
  float: left;
  width: 30%;
  font-size: 16px;
  font-weight: normal;
}

.eLeftInfo, .eLeftInfoTitle {
  float: left;
  width: 100%;
  font-size: 16px;
  margin-bottom: 4px;
}

.eLeftInfoTitle {
  font-weight: bold;
}

.eLeftComments {
  float: left;
  width: 30%;
  font-size: 16px;
  font-weight: normal;
} 

.eRightComments {
  float: left;
  width: 100%;
  font-size: 16px;
}

.emailSelect {
  float:right;
  width: 30px;
}

.emailSelect input {
  height: 18px;
  width: 18px;
}

.emailSelectTop {
  padding: 3px 7% 0px 2.2%;
  text-align: right;
  font-size: 14px;
  background-color: #97CBFF;
}

.emailSelectTop table {
  width: 100%;
}

.emailSelectTop table td {
  width: 50%;
  font-size: 16px;
  background-color: transparent;
}

.emailSelectTop table td:first-child {
  text-align: left;
}

.emailSelectDiv {
  display: none;
  text-align: center;  
}

.selectDivInfo {
  padding: 10px;
  font-weight: bold;
  color: blue;
  
}

.emailSelectDiv input {
  width: 96%;
  margin-top: 0px;
  border: 1px solid blue;
  padding: 2px;
}

.clearAll {
  clear: both;
  border-top: 1px solid #BBB;
  padding: 0;
  margin: 0;
}

.commentWidth {
  width: 50%;
}

.loader {
  width: 100%;
  padding: 50px 0;
  margin: 0;
  text-align: center;
}

.loaderMariner {
  width: 100%;
  padding: 30px 0;
  margin: 0;
  text-align: center;
}

#popupLogHeader:hover, #locationHeader:hover, #radioChannelHeader:hover, #sysUserHeader:hover, #emergencyAdminHeader:hover, #adminUserHeader:hover {
  cursor: move;
}

.logRow td {
  padding: 2px 4px;
  font-size: 12px;
}

.missingInputAlert {
  width: 24%;
  position: absolute;
  right: 0px;
  bottom: 58px;
  color: #F00;
  font-size: 16px;
  display: none;
}

.aLevel {
  position: relative;
}

.aLevelIcon {
  position: absolute;
  right: 10px;
  margin-left: 10px;
  top: 4px;
}

.demoInfo {
  position: relative;
  text-align: center;
  font-size: 35px;
  width: 320px;
  margin: 0 auto;
  background-color: yellow;
  padding: 7px 0;
  border-radius: 19px;
  border: 1px solid #000;  
}

.delLog {text-align: center;}

.delLog a, .delLog a:visited {
  padding: 0;
  color: black;
  font-weight: bold;
}

.delLog a:hover {
  color: red;
}

.main .chartDate {
  font-size: 14px;
  padding: 4px 10px;
  width: 817px;
  background-color: #476dd5;
  margin: 10px auto 0 auto;
  color: white;
}

.main .countStats {
  width: 730px;
  height: 400px;
  position: relative;
  border: 1px solid #476dd5;
  background-color: #FBFBFB;
  /* overflow: hidden; */
  position: relative;
  margin: 0 auto;
  background: linear-gradient(to bottom, #97cbff , #ffffff);
}

.main .countStats .graphLine {
  border-bottom: 1px solid #CCC; 
  /* position: absolute; */
  top: 0;
  left: 0;
  background-color: transparent;
}

.main .countStats .verticalLine, .main .countStats .verticalLineWE {
  position: absolute;
  height: 0%;
  border-right: 1px solid #CCC;
  background-color: transparent;
  bottom: 6px;
  text-align: center;
}

.main .countStats .verticalLine p, .main .countStats .verticalLineWE p {
  background-color: #476dd5;
  padding: 3px 0px;
  margin-top: 7px;
  margin-left: -2px;
  margin-right: 0px;
  color: white;
}

.main .countStats .verticalLineWE p {
  background-color: #F9C814;
  color: #000;
}

.main .countStats .verticalLine .topText {
  font-size: 10px;
  position: relative;
}

.main .countStats .statsGraph {
  position: absolute;
  bottom: 0px;
  width: 8px;
  border: 1px solid #476dd5;
  border-bottom-width: 0;
  border-radius: 10px 10px 0 0;
  padding-top: 4px;
  padding-bottom: 6px;
  text-align: center;
  margin-bottom: 0px;
  color: #fff;
  background: linear-gradient(to left, #476dd5 , #97cbff);    
}

.main .countStats .statsGraphEmpty {
  position: absolute;
  bottom: 0px;
  background-color: #AAA;
}

.main .graphBottom {
  margin: 0 auto;
  padding: 0 9px;
  height: 20px;
  background-color: #FFF;
  border-left: 1px solid #476dd5;
}

.timeOutAlert, .trialAlert {
  position: fixed;
  width: 340px;
  padding: 20px;
  background-color: #FFF;
  border: 3px solid #f00;
  top: 120px;
  left: 40%;
  border-radius: 10px;
  box-shadow: 4px 4px 10px #888;
  font-size: 16px;
  text-align: center;
  z-index: 2000;
  display: none;
}

.trialAlert p {
  margin: 0 0 8px;
}

.timeOutAlert:hover {
  cursor: move;
}

.timeOutAlert a, .timeOutAlert a:visited , .trialAlert a, .trialAlert a:visited{
  display: inline-block;
  width: 50%;
  padding: 3px 10px;
  text-decoration: none;
  color: white;
  border: 2px solid #f00;
  margin: 20px;
  border-radius: 8px;
  background-color: #f00;
  letter-spacing: 2px;
  /* transition: 0.5s; */
}

.timeOutAlert a:hover, .trialAlert a:hover {
  background-color: #FFF;
  color: black;
  /* transition: 0.5s; */
}

.timeOutAlert .inactivityInfo {
  font-size: 12px;
}

.settingsTitle {
  width: 100%;
  background-color: #97cbff;
  padding: 4px;
  color: #000;
  text-align: center;
  margin: 20px 0 10px 6%;
  border-radius: 5px;
}


.settingsContent {
  width: 100%;
  margin: 20px 0 10px 0;
  font-size: 12px;
}

.settingsContentLeft {
  float: left;
  width: 49.9%;
  border-right: 1px solid #AAA;
}

.settingsContentRight {
  float: right;
  width: 49.5%;
}

.settingsContentLeft.assistance {
  width: 48%;
  border: none;
  margin-left: 10%;}

.settingsContentRight.assistance {
  width: 36%;
  padding-left: 3%;
  border-left: 1px solid #AAA;
}

.assistanceSettings {
  width: 80%;
}

.assistanceSettings tr:hover td {
  background-color: #FFF;
}

.assistanceSettings th {
  padding-top: 4px;
  padding-bottom: 4px !important;
}

.assistanceSettings th:nth-child(1), .assistanceSettings td:nth-child(1) {
  text-align: left;
  padding: 4px 4px 0px 4px;
}

.assistanceSettings th:nth-child(2), .assistanceSettings th:nth-child(3) {
  text-align: center;
  padding: 4px;
}

.assistanceSettings td:nth-child(2), .assistanceSettings td:nth-child(3) {
  text-align: center;
  padding: 2px 4px;
}

.assistanceStatus {
    margin: 20px 0 10px 7%;
    width: 98.6%;
    background-color: #BBB;
}

.assistanceStatus tr th, .assistanceStatus tr td {
    text-align: left;
    padding: 3px 4px 2px 4px;
    text-align: center;
    width: 23%;
}

.assistanceStatus tr:hover td {
    background-color: #FFF !important;
}

.assistanceStatus tr td:first-child input {
    width: 98%;
}

.assistanceStatus tr th:nth-child(5), .assistanceStatus tr td:nth-child(5) {
    width: 8%;
}

.assistanceStatus tr td:nth-child(5) input {
    width: 80%;
    text-align: center;
}

.assistanceStatus input[type='radio'], .details input[type='radio'] {
    display: none;
}

.assistanceStatus input[type="radio"]:checked+label {
    background-color: #476dd5;
    display: inline-block;
    color: #FFF !important;
    transition-duration: 0.4s;
}

.assistanceStatus  input[type="radio"]:checked+label.inactiveStatus {
  background-color: #CCC;
}

.assistanceStatus label {
    font-weight: normal;
    border: 1px solid #A0A0A0;
    padding: 2px 0;
    width: 100%;
    text-align: center;
    display: inline-block;
    border-radius: 5px;
}

.assistanceStatus label.inactiveStatus {
  color: #AAA;
}

.assistanceStatus .inactiveStatus {
  color: #AAA;
}

.assistanceStatus label {
    width: 20%;
    margin: 0 5%;
}

.assistance label:hover, .details label:hover {
    background-color: #EEE;
    cursor: pointer;
}

.logIcon {
  position: absolute;
  margin: 0 0 0 20px;
}

.settingsContentRight .info {
  font-weight: bold;
  margin-bottom: 10px;
}

.clearWithSpace {
  clear: both;
  height: 10px;
}

.settingsContent .settingsContentLeft .pLeft, .settingsContent .settingsContentRight .pLeft {
  width: 30%;
  font-size: 12px;
}

.settingsContent .settingsContentLeft .sLeftInputLong, .settingsContent .settingsContentRight .sLeftInputLong {
  width: 65%;
  font-size: 12px;
  margin-left: 2%
}

.settingsContent .settingsContentRight .sLeftInputLong.numberInput {
  width: 10% !important;
  display: inline-block;
}
.settingsContent .settingsContentRight .sLeftInputLong.numberInput input {
  font-size: 12px;
  padding-left: 10%;
  width: 90%;
}

.settingsContent .settingsContentRight .sLeftInputLong.Info {
  width: 50% !important;
  font-size: 11px;
  display: inline-block;
}

.settingsContent .sLeftInputLong .etaInputs {
  width: 125px !important;
  font-size: 12px;
}

.settingsContent .sLeftInputLong .destinationInputs {
  width: 220px !important;
  font-size: 12px;
}

/****************************************** Settings Menu **************************************/

.settingsTabs {
  width: 100%;
  width: 99%;
  border-bottom: 1px solid #AAA;
  padding-left: 2px;
}

.settingsTabs div {
  display: inline-block;
  width: 18%;
  border: 1px solid #AAA;
  border-bottom-width: 0;
  padding: 4px;
  margin-right: 1px;
  border-radius: 5px 5px 0 0 ;
}

.settingsTabs .baseSettings {
  background-color: #EEE;
}


.settingsTabs .baseSettings:hover {
  background-color: #DFDFDF;
  cursor: pointer;
}

.settingsTabs .baseSettings.selected, .settingsTabs .baseSettings.selected:visited {
  background-color: #CCC !important;
  font-weight: bold;
}

.baseSettings.selected:hover,.tabSettings.selected:hover,.labelSettings.selected:hover {
  background-color: #DFDFDF;
}

.settingsContent #baseGeneral {
  width: 100%;
}

.settingsContent #baseTabs {
  width: 100%;
  display: none;
}

.settingsContent #baseLabels {
  width: 90%;
  display: none;
}

.settingsContent #baseAssistance {
    width: 90%;
    display: none;
}

.settingsContent #assistanceStatus {
    width: 90%;
    display: none;
}

.settingsLabel {
  display: inline-block;
  width: 30%;
  margin-left: 5px;
}

.assistance input[type='radio'], .details input[type='radio'] {
  display: none;
}

.assistance input[type="radio"]:checked+label, .details input[type="radio"]:checked+label {
  background-color: #476dd5;
  display: inline-block;
  color: #FFF !important;
  transition-duration: 0.4s;
}

.assistance label, .details label {
  font-weight: normal;
  border: 1px solid #A0A0A0;
  padding: 2px 0;
  width: 60%;
  text-align: center;
  display: inline-block;
  border-radius: 5px;
}

.details label {
  width: 45%;
}

.assistance label:hover, .details label:hover {
  background-color: #EEE;
  cursor: pointer;
}

.settingsLeft {
  width: 40% !important;
  display: inline-block;
}

.tabOrderTable {
  width: 100%;
}

.tabOrderTable .tabOrderInfo {
  padding: 5px 0 5px 0;
  text-align: center;
  width: 90%;
  margin: 0 auto 20px auto;
  background-color: #97cbff;
  border-radius: 5px;
}

.tabOrderTable .label, .tabOrderTable .order {
  width: 15%;
  float: left;
}

.tabOrderTable .label {
  text-align: right;
  padding-right: 1%;
  padding-top: 3px
}

.tabOrderTable .emptyLine {
  clear: both;
  height: 5px;
  margin: 0;
  padding: 0;
}

.tabOrderTable .order input {
  width: 45px;
  text-align: right;
  padding-right: 0px;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    font-size: 12px;
    color: #AAA;
    opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    font-size: 12px;
    color: #AAA;
}

::-ms-input-placeholder { /* Microsoft Edge */
    font-size: 12px;
    color: #AAA;
}

.select2 {
  width: 98% !important;
  border-radius: 0 !important;
  color: #000 !important;
}

.select2-results {
  font-size: 16px;
}

.select2-search--dropdown {
  display: block;
  padding: 4px;
  margin-top: -31px;
  border: none;
}
/*********************************** Assistance Section ***************************/

.assistanceSection {
  display: none;
  padding: 10px;
  margin: 0;
}

#assistanceEdit {
  display: block;
}

.assistanceCallEdit {
  position: fixed;
  top: 0px;
  left: 10%;
  width: 80%;
  margin: 0;
  padding: 0;
  z-index: 1000;
  background-color: #FFF;
  box-shadow: 0px 2px 9px #444;
  height: auto;
  border-radius: 0 0 10px 10px;
  border: 2px solid #F00;
  border-top: none;
}

.assistanceCallEdit .assistanceContent {
  height: 600px;
  display: none;
}

.assistanceCallEdit .assistanceContent .assistanceHeader {
  text-align: left;
  background-color: #F00;
  padding: 0;
  color: #FFF;
  font-size: 16px;
  font-weight: bold;
  width: 100%;
  position: relative;
    height: 38px;
}

.assistanceMenu {
    position: absolute;
    width: 100%;
    bottom: 0;
    padding-left: 4px;
}

.assistanceMenu .assistanceMenuItem {
    display: inline-block;
    width: 20%;
    font-weight: normal;
    text-align: center;
    margin: 0 0 0 2px;
    background-color: #DDD;
    color: #888;
    padding: 6px 0 4px 0;
    border-radius: 5px 5px 0 0;
    border-bottom: 1px solid #F00;
}

.assistanceMenu .assistanceMenuItem:hover {
    cursor: pointer;
    background-color: #DDD;
    color: #000;
    font-weight: normal;
    margin-top: 0px;
    margin-bottom: 0px;
}

.assistanceMenu .assistanceMenuItem.selected {
    background-color: #FFF;
    color: #000;
    font-weight: bold;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 6px 0 4px 0;
    border-radius: 5px 5px 0 0;
    border-bottom: 1px solid #FFF;
}

.assistanceCallEdit .assistanceContent .assistanceList, .assistanceCallEdit .assistanceContent .assistanceHistory {
  float: left;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  height: 540px;
  overflow: auto;
}

.statusLogPopup {
  position: absolute;
  left: 70px;
  top: 110px;
  width: 500px;
  background: #FFF;
  border: 1px solid #888;
  z-index: 1000000;
  box-shadow:  4px 4px 10px #888;
  display: none;
}

.statusLogPopup .statusLogHeader {
  padding: 6px;
  background-color: #476DD5;
  color: #FFF;
  font-weight: bold;
}

.statusLogPopup .statusLogHeader:hover {
  cursor: move;
}

.statusLogPopup .statusLogContent {
  max-height: 500px;
  overflow: auto;
}

.statusLogPopup .statusLogFooter {
  padding: 5px;
  text-align: center;
  border: 1px solid #AAA;
  border-top: none;}

.statusLogPopup table {
  width: 100%;
  background-color: #AAA;
}

.statusLogPopup table td, .statusLogPopup table th {
  padding: 4px;
  text-align: left;
}

#colourIndicator {
  height: 2px;
  margin-top: 3px;
}

.assistanceListFull {

}

#assistanceCallTable td, #assistanceCallTable th {
  padding: 2px 4px;
  text-align: left;
}

#assistanceCallTable td:nth-child(3), #assistanceCallTable th:nth-child(3) {
  text-align: center;
}

.assistanceCallEdit .assistanceContent .assistanceEdit {
  float: right;
  width: 55%;
  margin: 0 auto;
  padding: 10px 2%;
  /*border-left: 2px solid #F00;*/
}

.assistanceCallEdit .tab {
  width: 20%;
  margin: 0 40%;
  height: 18px;
  background-color: #F00;
  border-radius: 0 0 10px 10px;
  text-align: center;
  padding: 5px 0;
  box-shadow: 2px 2px 5px #444;
  position: absolute;
  bottom: -28px;
  font-weight: bold;
  color: #FFF;
  font-size: 16px;
}

.assistanceCallEdit .tab .tabArrow {
  position: absolute;
  right: 10px;
  bottom: 2px;
}

.assistanceCallEdit .tab:hover {
  color: #000;
  cursor: pointer;
}

.assistanceStatusDropdown {
  padding: 2px;
}

.arrowLeft {
    position: absolute;
    left: 10px;
    bottom: 4px;
    transform: rotate(90deg);
    transition: 0.5s;
}

.arrowLeft.up {
    transform: rotate(270deg) !important;
}

.arrowRight {
    position: absolute;
    right: 10px;
    bottom: 4px;
    transform: rotate(90deg);
    transition: 0.5s;
}

.arrowRight.up {
    transform: rotate(270deg) !important;
}

#emergencyTab .arrowLeft:hover, #emergencyTab .arrowRight:hover {
    color: #FFF;
}

.copyAlertLogin {
    width: 320px;
}
/************************************ Import Section *******************************/

.infoBlock {
  width: 90%;
  margin: auto;
  border: 1px solid #AAA;
  padding: 0px;
  position: relative;
}

.infoBlockAlert {
  position: absolute;
  top: -6px;
  right: 26%;
  padding: 8px;
  border: 2px solid #F00;
  background-color: #FFF;
  display: none;
}

.infoBlock .infoBlockHeader {
  padding: 5px 10px;
  background-color: #DDD;
  text-align: center;
  font-weight: bold;
}

.infoBlock .infoBlockInfo {
  padding: 10px 10px;
  margin-bottom: 10px;
  text-align: center;
  border-bottom: 1px solid #AAA;
  color: #000;
}

.infoBlock .infoBlockInstructions {
  padding: 0px 0 10px 10px;
  border-bottom: 1px solid #AAA;
  margin-bottom: 10px;
}

.infoBlock .infoBlockInstructions h2 {
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 0;
}

.infoBlock .infoBlockInstructions ol {
  margin-top: 0;
}

.infoBlock .infoBlockInstructions li p {
  display: inline-flex;
  margin-bottom: -5px;
}

.infoBlock .infoBlockContent {
  padding: 5px 0px;
}

.infoBlock .infoBlockContent .fileOperators_Access {
position: absolute;
right: 14%;
padding: 1px;
}

.infoBlock .infoBlockContent .left {
  float: left;
  width: 16%;
  padding: 0 0 0 10px;
  margin-right: -10px;
  font-weight: bold;
}

.infoBlock .infoBlockContent .centre {
  float: left;
  width: 83%;
  padding: 0;
  position: relative;
}

.infoBlock .infoBlockContent .centre .importSubmit {
  float: right;
  margin-right: 30%;
  width: 140px;
}

.infoBlock .infoBlockContent .centre .importTest {
  float: right;
  margin-right: 1%;
  width: auto;
}

.infoBlock .infoBlockContent .right {
  float: right;
  width: 80%;
  padding: 10px 0 0 0;
}

.infoBlock .infoBlockContent .right .title {
  font-weight: bold;
}

.infoBlock .infoBlockContent .clear, .infoBlock .infoBlockContent .clearPlain  {
  clear: both;
  height: 10px;
  margin-bottom: 10px;
  margin-top: 0px;
  border-bottom: 1px solid #AAA;
}

.infoBlock .infoBlockContent .clearPlain {
  border: none;
  margin: 0;
}

.select2-container--default .select2-results>.select2-results__options {
  max-height: 370px !important;
}

.select2-results__option {
  padding: 2px 6px !important;
}

/************************************ Media Section *********************************/
@media (max-width: 1640px){
    .pLeft, .pRight, .pLeftComments, .pMiddle, .pMiddleEtrNew, .pPOBLeft, .pPOBRight, .pLeftInput input, .pLeftInput select, .pLeftInputEtr input, .pMiddleInputEtr input, .pRightInputEtr input,
    .pMiddleInputWide input, .pLeftInputEtr select, .pLeftInputEtr input, .pMiddleInput input, .pRightInput input, .pobInput input, .pMiddleInputFreq select,
    .pLeftInputEtr input[type='text'], .pMiddleInputEtr input[type='text'], .pRightInputEtr input[type='text'], .baseDays input {
        font-size: 14px;
    }

    .baseDays input {
      width: 110px;
    }

    .editPopup {
        width: 90%;
        left:5%
    }

    .topMenu a {
        font-size: 14px;
        padding: 4px 10px;
    }
    .logOut {
        margin-top:1px;
    }
    .crossLink {
        margin-top:1px;
    }
    .logOut a {
        font-size: 14px;
        padding: 2px 4px;
    }

    .crossLink, .helpLink {
        width: 70px;
    }
    .crossLink a {
        font-size: 14px;
        padding: 2px 2px;
    }
    .helpLink a, .helpLink a:visited {
        background-color: #30BD5D;
        padding: 2px !important;
        margin-top: -1px;
    }
    .missingInputAlert {
        font-size: 14px;
    }

    .select2, .select2-results  {
      font-size: 14px;
    }

  .assistancePopup {
    width: 60%;
  }
}

@media (max-width: 1440px){
    .pLeft, .pRight, .pLeftComments, .pMiddle, .pMiddleEtrNew, .pPOBLeft, .pPOBRight, .pLeftInput input, .pLeftInput select, .pLeftInputEtr input, .pMiddleInputEtr input, .pRightInputEtr input,
    .pMiddleInputWide input, .pLeftInputEtr select, .pLeftInputEtr input, .pMiddleInput input, .pRightInput input, .pobInput input, .pMiddleInputFreq select,
    .pLeftInputEtr input[type='text'], .pMiddleInputEtr input[type='text'], .pRightInputEtr input[type='text'], .baseDays input {
        font-size: 12px;
    }

    .baseDays input {
      width: 70px;
    }

  .editPopup {
        width: 90%;
        left:5%
    }

    .topMenu a {
        font-size: 12px;
        padding: 4px 10px;
    }
    .logOut {
        margin-top:1px;
    }
    .crossLink {
        margin-top:1px;
    }
    .logOut a {
        font-size: 12px;
        padding: 2px 4px;
    }
    .crossLink, .helpLink {
        width: 70px;
    }
    .crossLink a {
        font-size:12px;
        padding:2px 4px;
    }
    .helpLink a, .helpLink a:visited {
        background-color: #30BD5D;
        padding: 2px !important;
        margin-top: -1px;
    }

    .missingInputAlert {
        font-size: 12px;
    }

  .select2, .select2-results {
    font-size: 12px;
  }

  .assistancePopup {
    width: 80%;
  }
}