body{
font-family: helvetica, sans-serif;
letter-spacing: 0.025em;
/*background-color: rgb(245,250,252);*/
margin: 0px;
padding: 0px;
}

/* Top blue bar */
#topBar{
z-index: -10;   /* negative z index so that errors appear on top */

position:fixed;
top:0px;
left: 0px;
right: 0px;
height: 55px;

background-color: rgb(25,80,230);
}


#bannerLogo{

z-index: -7;      /* lower z index than menu so that on small sceen menu can go over the top of it*/
position:absolute;
top:7px;
left:10px;
}

.bannerText{

z-index: -7;      /* lower z index than menu so that on small sceen menu can go over the top of it*/
position:absolute;
left:300px;

line-height: 55px;
font-size: 20px;
font-weight: bold;

color: white;

}




#topMenu{

z-index: -4;

position:absolute;
top:0px;
right:0px;
margin:0px 20px;

line-height: 55px;
font-size: 20px;
font-weight: bold;

color: white;
background-color: rgb(25,80,230, 0.8);

list-style-type: none;


}




/* subtitle bar */
#pageTitleBar{
z-index: -3; 

position:fixed;
top:55px;
left: 0px;
right: 0px;
height:35px;

padding-left: 20px;
padding-right: 20px;

margin:0px;

line-height: 35px;

font-size: 20px;
font-weight: bold;

/*color:#102027; slight grey recommended by Nicky*/
/*background-color: rgb(170,200,255);*/
/*background-color: rgb(194,220,237);*/
background-color: rgb(196, 217, 252);


}

/* To creat top menu */
.menuHorizontalItem{
float: right;
}

.menuHorizontalItem:hover .dropDownList{
display: block;
}

.dropDownList{
display: none;
line-height: 26px;
background-color: rgb(51,137,205);
position: absolute;
}

.menuWord{
padding: 0px 10px;
font-size: 17px;
}

.menuWord:hover{
line-height: 51px;
padding: 0px 8px;
border: 2px solid black;
background-color: green;
}




/* to scroll the whole page */
#scrollingArea{
z-index: -15;
position: absolute;
top: 90px;
left: 0px;
right: 0px;

padding: 20px;

}

#scrollingArea, .td_clearCell, .td_textEntry{
/*background-color: rgb(245,250,252);*/
/*background-color: #eceff1;*/
background-color: white;
}


#leftColumn{
z-index: -4; 
position: absolute;
top: 90px;
left: 0px;
right: 330px;

padding-left:20px;
padding-right:10px;

background-color: rgb(245,250,252);
}

#rightColumn{
z-index: -4;
position: absolute;
top: 90px;
right: 0px;
width:300px;

padding-left:10px;
padding-right:20px;

background-color: rgb(245,250,252);
}



.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    /*padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
}

/* table of patients */
.patientList
{
width: 100%;

font-size:15px;
/*border: 2px solid black;*/
border: 2px solid black;
background-color: white;
border-collapse: collapse;
}



.clickableDispersedWords{
font-size:15px;
padding: 2px 5px;
font-weight: bold;
/*color: rgb(51,137,205);*/
color:blue;
}

.clickableDispersedWords:hover{
background-color: green;
color:white;
}



#title{
position:absolute;
top:25px;
left: 15px;
color: white;

font-size: 25px;

}




#userName{
position:absolute;
top:20px;
right: 30px;

text-align: right;

color: black;
font-size: 15px;



}

#resultsFor{
position:relative;
top:10px;
left: 10px;

width:100%;

text-align: left;

color: black;
font-size: 15px;
}




/* the PROM function buttons */
.scheduleSetUpDiv, .directDiv, .sendEmailDiv, .retroDiv, .emailCountDiv, .noEmailDiv, .smsDiv, .phoneDiv, .treatmentDiv, .treatmentButtonDiv, .assesmentNameDiv, .clinicQuestDiv
{

font-size:15px;

width:90%;

margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 5px;

border-radius: 12px;

padding: 3px 8px;
text-align: center;
}

.scheduleSetUpDiv:hover, .directDiv:hover, .sendEmailDiv:hover, .retroDiv:hover, .smsDiv:hover, .phoneDiv:hover, .treatmentDiv:hover, .treatmentButtonDiv:hover, .clinicQuestDiv:hover
{
background-color: green;
color:white;
}

.scheduleSetUpDiv{
border: 1px solid black;
background-color:  #f2ccc0;
}

.directDiv{
border: 1px solid black;
background-color:  #ffffb3;
}

.retroDiv{
border: 1px solid black;
background-color:  #ccccff;
}

.clinicQuestDiv{
border: 1px solid black;
background-color:  #ffb3da;
}

.emailCountDiv{
font-style: italic;
color:green;
}

.sendEmailDiv{
border: 1px solid black;
background-color: #ccffcc;
}

.noEmailDiv{
border: 1px dotted black;
font-style: italic;
}

.smsDiv{
border: 1px solid black;
background-color: #ffcc80;
}

.phoneDiv{
border: 1px solid black;
background-color: #ff8566;
}

.treatmentDiv{
border: 1px solid black;
background-color: rgb(196, 217, 252);
}


.treatmentButtonDiv{
border: 1px solid black;
background-color: rgb(196, 217, 252);
}






.tdContainingDiv{
text-align: center;
border: 1px solid black;
  padding: 5px 5px;
      font-size:15px;
}


.menuButton{
height: 22px;
width: 85px;

border: 1px solid black;

text-align: center;

margin-bottom: 5px;



}

.deleteTreatmentButton{
height: 22px;
width: 85px;

border: 1px solid black;

text-align: center;
margin: 3px 0px 3px 3px;

background-color: rgb(196, 217, 252);


}



.mainButton{  

float:right;

height: 28px;
width: 100px;

margin-right: 10px;
border: 1px solid black;
background-color: rgb(43, 128, 197);
font-size: 18px;

color: black;

}
.mainButton:disabled { color:gray; }



.mainButtonWide{  

float:right;

height: 28px;
width: 300px;

margin-right: 10px;
border: 1px solid black;
background-color: rgb(43, 128, 197);
font-size: 18px;

color: black;

}





.emailButtons{
height: 20px;
width: 100px;

border: 1px solid black;
  background-color: rgb(196, 217, 252);

}

.opDateSelector{
background-color: rgb(196, 217, 252);
width: 100px;
}



#tableOfPROM{
width: 100%;
background-color: rgb(237,245,250);
border-collapse: collapse;
}


.resultsTable{
border-collapse: collapse;

    width: 100%;
}


.tableForLayout{
box-sizing: border-box;
width:100%;
font-size:15px;
margin-bottom: 20px;
}

.tdCreate{
vertical-align:bottom;
padding-left:10px;
padding-right:10px;
}

.thPROM{
border: 1px solid black;
text-align: left;
font-size:15px;
padding: 5px 5px;
background-color: rgb(196, 217, 252);
}

.thPROMalternative{
border: 1px solid black;
text-align: left;
font-size:15px;
padding: 5px 5px;
background-color: rgb(224, 252, 197);
}


.trPROMtable:hover { 
  background-color: rgb(196, 217, 252);
}


.tdPROMtable{
border: 1px solid black;
text-align: left;
vertical-align:top;
padding: 5px 5px;
font-size:15px;
}

.resultTd{
border: 1px solid black;
padding: 5px 5px;
text-align: center;
}

.TDquest{
      border: 1px solid black;
        padding: 5px 5px;
      font-size:15px;
}

.TDscale{
      border: 1px solid black;
        padding: 5px 5px 5px 20px;
      font-size:15px;
      vertical-align: top;

}


h1{

    margin: 0px 0px 0px 0px;
}

h2{
  font-weight: normal;
  font-size:30px;
  margin: 5px 0px 5px 0px;

}

#patient{
  text-align: left;
    font-weight: bold;
  font-size:25px;

}

#problem{
  text-align: left;
    font-weight: bold;
  font-size:20px;
}

#problemNotes{
  text-align: left;
    font-weight: normal;
  font-size:20px;
}



.processButtons{
width:100%;
height:38px;
font-size: 20px;
border: 1px solid black;
background-color: rgb(43, 128, 197);

}




td{

      font-size:15px;
  padding: 0px 10px 0px 10px;
  }


.simpleBox{
  width:100%;
}

#askWhoBox{

    position: fixed;
    top: 100px;
    left: 400px;

width:400px;
height:140px;

font-size: 20px;
border: 3px solid black;
padding: 30px 30px 30px 30px;

background-color: #ffffb3;


}

.table_Questions{
    background-color: rgb(210, 227, 252);
    border: 1px solid black;
    border-collapse: collapse;
    width:100%;
}

.td_Questions, .td_BasicLeft, .td_BasicCenter, .td_textEntry, .tableTextbox{
    background-color: rgb(210, 227, 252);
}

.td_Questions{
    border: 1px solid black;
    border-collapse: collapse;
    padding:5px 5px;
    font-size:15px;
    text-align: center;
    width: 20%;
}

.td_BasicLeft{
    border: 1px solid black;
    border-collapse: collapse;
    padding:5px 5px;
    text-align: left;
    font-size: 20px;
}

.td_BasicCenter{
    border: 1px solid black;
    border-collapse: collapse;
    padding:5px 5px;
    text-align: center;
    font-size: 20px;
}

.td_clearCell{
    border: 0px;
}

.td_textEntry{
padding:0px;
border: 1px solid black;
}

.tableTextbox{
margin:0px;
border: 0px;
padding:0px 0px 0px 6px;
width:90%;
font-size:30px;

}


.asterisk_blue{
color: rgb(51,137,205);
font-size: 15px;
vertical-align: super;
}

.asterisk{
color: red;
visibility: hidden;
}

.star{
color: red;
visibility: hidden;
}

h3{
  color: rgb(0, 51, 204);
  font-weight: normal;
  font-size:20px;
  margin: 5px 0px 5px 0px;

}

.TDscoreName{
  color: rgb(0, 51, 204);
      border: 1px solid black;
        padding: 5px 5px;
      font-size:20px;
    font-weight: bold;
}

.TDdate{
  color: rgb(0, 51, 204);
      border: 1px solid black;
        padding: 5px 5px;
      font-size:15px;
    font-weight: bold;
          text-align: center;

}

.TDtotal{
  color: rgb(0, 51, 204);
      border: 1px solid black;
        padding: 5px 5px;
      font-size:15px;
    font-weight: bold;
}


.scaleTitle{
    color: rgb(0, 51, 204);
    font-weight: bold;
}


iframe{

border:0px;

width:100%;
height:1000px;


}

.scoreStars{
  color: #ff9900;
  font-size: 25px;

}

#yesNoBar{
    margin-left: auto;
    margin-right: auto;
    width: 70%;
    height:100px;
      font-size:20px;


}

.greenRect{

    border-radius: 0px 5px 5px 0px;
  background-color:green;
  height:30px;
  float:left;
}

.orangeRect{

  background-color:orange;
  height:30px;
  float:left;
}
.redRect{

    border-radius: 5px 0px 0px 5px;

  background-color:red;
  height:30px;
  float:left;
}
.yesText{
 color: green;
  font-size: 20px;
  float:right;
}
.unsureText{
 color: orange;
  font-size: 20px;
  float:left;
}
.noText{
 color: red;
  font-size: 20px;
  float:left;
}





.graphBar2{
  border: 1px solid black;
    margin-left: auto;
    margin-right: auto;
  width:90%;

}


.graphTable{
 border-collapse: collapse;
 width:100%;
}

.graphTitle{
      font-weight: bold;
  font-size: 25px;
  text-align: center;

}

.graphSubtitle{
  font-size: 18px;
  text-align: center;

}

.graphHighLable{
  font-size: 15px;
padding: 0;
}



.graphXaxisLableRed{
  font-size: 20px;
    text-align: left;
      padding: 1px;
}

.graphXaxisLableGreen{
  font-size: 20px;
    text-align: right;
      padding: 1px;
}

.graphXaxisLableCenter{
    font-size: 20px;
    text-align: center;
      padding: 1px;
}


.graphSummary{
  font-size: 30px;
    text-align: center;
      padding: 1px;
}

    {text-align: center;}

.graphSummarySubtitle{
  font-size: 15px;
      padding: 1px;
}


.graphTd{
  height:120px;
  vertical-align: bottom;
  text-align: center;
  width: 16%;
  border: 0px solid black;
  padding: 1px;
  font-size:15px;
}

#resultsOwner{
}

.resultsOwnerTd{
    font-size:25px;
}


#controlBox{
margin: 0px;
border: 1px solid black;
padding: 10px;

background-color: white;
}

#graphDiv{
margin: 0px;
border: 1px solid black;
padding: 0px;

background-color: rgb(196, 217, 252);
/*background-color: rgb(194,220,237);*/

}

.boxItem{
margin:20px 0px 0px 0px;
border: 1px solid black;
padding: 10px;

background-color: white;
}


.tableTitle{
 color: rgb(0, 51, 204);

      font-size:25px;
    font-weight: bold;
    text-align:center;


}

.filterBox{
font-weight: bold;
font-size:10px;
color:blue;
border: 0px solid black;
width:90%;
/*background-color: rgb(196, 217, 252);*/
}

.tdFilter{
border: solid black;
border-width: 1px 1px 2px 1px;
padding: 0px;
text-align: center;
/*background-color: rgb(196, 217, 252);*/
}

.tdNoFilter{
border: solid black;
border-width: 1px 1px 2px 1px;
background-color: rgb(196, 217, 252);
}

/* To display large ticks */

.myRadioLabel{
display: inline-block;
padding: 2px 0px;
text-align: center;
width:100%;
height: 50px;
}
.myRadioLabel:hover{
color: white;
background-color: blue  !important;
}
.myRadioClass{
display: none;
}

.myRadioClass:checked + .myRadioLabel > .theTick{
visibility: visible;
}

.myCheckboxLabel{
display: inline-block;
padding: 2px 0px;
text-align: center;
width:100%;
height: 50px;
}

.myCheckboxLabel:hover{
color: white;
background-color: blue  !important;
}


.myCheckboxClass{
display: none;
}

.myCheckboxClass:checked + .myCheckboxLabel > .theTick{
visibility: visible;
}


.theTick{
font-size:40px;
visibility: hidden;
}

.td_forTick{
    border: 1px solid black;
    padding:0px;
    text-align: center;
}


#closeXbutton{


margin: 5px;
padding: 5px;
font-size: 25px;
}

#closeXbutton:hover{
background-color: green;
color:white;
}

.numberWithEnum {
position: relative;
}

.numberWithEnum .appearingText {
visibility: hidden;
background-color: grey;
color: #fff;
text-align: left;
border-radius: 6px;
position: absolute;
z-index: 1;
right: 80%;  /* it needs to appear on the left otherwise the whole document will be extra wide and have horizontal scroll bar */
top: 50%; /* gets the top of appearingText to center of numberWithEnum */
margin-top: -36px; /*   half total height (ie td heights and paddings)  NB not percentage as this refers to the parent    */
white-space:nowrap;
}

.numberWithEnum .appearingText::after {
content: "";
position: absolute;
top: 50%;
left: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent grey;
}

.numberWithEnum:hover .appearingText {
visibility: visible;
}

.appearingText{
border-collapse: collapse;
}

.tdAppearingText{
height: 20px;
padding: 3px 10px;
margin: 0px;
border: 0px;
border-radius: 6px;
}

/* For showing who did upload */

.uploadedByIndicator{
position: relative;
font-weight: bold;
color:blue;
}

.uploadedByMessage{
visibility: hidden;
background-color: rgb(10,40,200);
color: #fff;
text-align: left;
border-radius: 6px;
position: absolute;
z-index: 1;
right: 100%;
top:50%;
margin-top: -35px; /*   half total height   NB not percentage as this refers to the parent    */
padding: 10px; 

white-space:nowrap;
}


.forShowingWhoUploaded .uploadedByMessage::after {
content: "";
position: absolute;
top: 50%;
left: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent rgb(10,40,200);
}

.forShowingWhoUploaded{
position:relative;
}

.forShowingWhoUploaded:hover .uploadedByMessage{
visibility: visible;
}

.deleteUploadButton{
text-decoration: underline;
font-size:12px;
}

.deleteUploadButton:hover{
color:green;
}



.questionnaireTitle{
font-size:20px;
font-weight:bold;
color:blue;
}

.copyrightText{
font-style: italic;
font-size: 15px;
}

.myPopUpBox{
border: 4px solid black;
position:fixed;
width:500px;
top:30%;
left:50%;
margin-left:-250px;
//background-color: rgb(196, 217, 252);
background-color: rgb(25,80,230);
padding:20px;
text-align:center;
border-radius: 15px;
box-shadow:20px 20px 10px grey;
}

.closeX{
position:absolute;
top: 3px;
right: 3px;
font-size: 20px;
line-height: 18px;
color:lightgrey;
}

.bodyClassForTesting{
padding: 20px;
}


/* Buttons for save etc */

.smallButton, .mediumButton{
height: 28px;

border: 2px solid black;
border-radius: 8px;

font-size: 18px;
color: black;
background-color: rgb(43, 128, 197);
}

.smallButton{min-width: 100px;}
.mediumButton{min-width: 150px;}

.smallButton:hover, .mediumButton:hover{
background-color: green;
color:white;
}

.smallButton:disabled, .mediumButton:disabled { color:#595959; }


/* table cells as buttons */

.tdAptClickableBlue{
border: 1px solid black;
padding: 5px 5px;
font-size:15px;
font-weight: bold;
color: blue;
text-align: center;
}

.tdAptClickableBlue:hover{
background-color: green !important;;
color:white;
}

/* words as buttons */

.wordsAsButtons{
font-size:15px;
font-weight: bold;
padding: 2px 5px;
color:blue;
text-decoration: none;
}

.wordsAsButtons:hover
{
background-color: green !important;
color:white;
}


/* input text boxes */
.w-30
{
width:30%;
}


/* subtitle bar contd */
.subtitleMenuItem{
float:right;
padding: 0px 12px;

font-size:20px;
font-weight: bold;
color: rgb(51,137,205);
}

.subtitleMenuItem:hover{
background-color: green;
color:white;
}

/* sortable columns */
.needForIE{
position:relative;
width:100%;
height:100%;
}

.thAptSortable{
border: 1px solid black;
text-align: left;
font-size:15px;
padding: 5px 5px;
background-color: rgb(196, 217, 252);
}

.thAptSortable:hover{
background-color: green !important;
color:white;
}

.sortDir{
display: none;
float:right;
}

/* checkbox with yes and no labels */
.showOnNotChecked{ display: inline-block;}
.showOnChecked{ display: none;}
.yesNoCheckbox:checked + .yesNoCheckboxLabel > .showOnChecked{ display: inline-block;}
.yesNoCheckbox:checked + .yesNoCheckboxLabel > .showOnNotChecked{ display: none;}