body {
  padding-top: 50px;
  background:#f1f2f4;
  font-family: 'Open Sans', sans-serif; 
}

/* Sticky footer styles
-------------------------------------------------- */

html,
body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: auto;
  /* Negative indent footer by its height */
  margin: 0 auto -60px;
  /* Pad bottom by footer height */
  padding: 0 0 60px;
}

/* Set the fixed height of the footer here */
#footer {
  height: 60px;
  background-color: #f5f5f5;
}


/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

#wrap > .container {
  padding:0;
}
.container .text-muted {
  margin: 20px 0;
}

#footer{
  background:#e8e9eb;
  border-top:1px solid #babbbc;
  text-align:center;
  padding:15px 0 0 0;
  font-size:12px;
  font-weight:600;
  color:#3b3b3b;
  margin:20px 0 0 0
}

/*###################*/
.pageTitle{ background:#fff; color:#232323; padding:15px 10px;}
.pageTitle span{ width:150px;display:inline-block; font-size:18px;color:#232323; font-weight:700; text-align:center;}
.pageTitle p{ font-size:13px;color:#232323; font-weight:600;display:inline-block; padding:0 0 0 13px; margin:0;}
.orngTxt{ font-size:12px; color:#f4d78a; font-weight:600; line-height:52px; padding:0 0 0 10px}

.db{ border-left:none!important}
.lo{border-right:none!important}
.db a{ background:url(../images/ico-db.png) no-repeat 0 22px; padding:0 0 0 10px}
.ep a{ background:url(../images/ico-ep.png) no-repeat 0 22px; padding:0 0 0 10px}
.lo a{ background:url(../images/ico-lo.png) no-repeat 0 22px; padding:0 0 0 10px}

ul.nav li.active a{ background-position:0 -68px!important}
ul.nav li{ padding-left:15px!important}

.tagCoach{ background:url(../images/tag-coach.png) no-repeat 0 0; width:85px; height:56px; display:block; position:absolute; top:0; left:48%}

.tblDisplay{ border:1px solid #dcdddf; border-collapse:collapse; width:100%; color:#000; font-weight:600}
.tblDisplay td{ text-align:center;font-size:12px; padding:5px; border-bottom:1px solid #d9d9d9}
.tblDisplay th{ text-align:center; text-transform:uppercase; font-weight:600; font-size:12px; padding:10px 5px; color:#232323; 
background:#f7f7f7; border-bottom:1px solid #e0e0e0}

.tblDisplay tr:nth-child(even) {background: #ffffff}
.tblDisplay tr:nth-child(odd) {background: #f5f5f5}

.tblDisplay-no-borders{ border:px solid #dcdddf; border-collapse:collapse; width:100%; color:#000; font-weight:400}
.tblDisplay-no-borders td{ text-align:center;font-size:14px; padding:20px 0px 0px 0px!important; border-bottom:0px solid #d9d9d9}
.tblDisplay-no-borders th{ text-align:center; text-transform:uppercase; font-weight:600; font-size:12px; padding:10px 5px; color:#232323; 
background:#f7f7f7; border-bottom:0px solid #e0e0e0}
.tblDisplay-no-borders label{margin-left: 0px !important}

.tblDisplay-no-borders tr:nth-child(even) {background: #ffffff}
.tblDisplay-no-borders tr:nth-child(odd) {background: #f5f5f5}

.btnArea{
background: rgb(253,253,253); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(253,253,253,1) 0%, rgba(230,230,230,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(253,253,253,1)), color-stop(100%,rgba(230,230,230,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(253,253,253,1) 0%,rgba(230,230,230,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(253,253,253,1) 0%,rgba(230,230,230,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(253,253,253,1) 0%,rgba(230,230,230,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(253,253,253,1) 0%,rgba(230,230,230,1) 100%); /* W3C */
padding:5px 10px;
border:1px solid #d9d9d9;
border-top:none;
}

.baTop{
border:1px solid #d9d9d9;
border-bottom:none;
margin:0;
font-size:18px; font-weight:700
}
input.btnSave{ background:#3b3b3b; color:#FFFFFF; border-radius:5px; border:none; padding:3px 15px; cursor:pointer; font-size:12px; margin:0 5px}
input.btnCancel{ background:#828282; color:#FFFFFF; border-radius:5px; border:none; padding:3px 15px; cursor:pointer; font-size:12px;}
input.btnSave:hover, input.btnCancel:hover{ background:#000}

input.submit4{ background:#f0b209; color:#FFFFFF; border-radius:5px; border:none; padding:3px 15px; cursor:pointer; font-size:12px;}
input.submit4:hover{ background:#000}

input.input1{ border:1px solid #c8c8c8; width:40px; background:#ebeaea; padding:2px 5px; font-size:13px}
input.input2{ border:1px solid #c8c8c8; width:120px; background:#ebeaea; padding:2px 5px; font-size:13px}
input.input3{ border:1px solid #c8c8c8; width:70px; background:#ebeaea; padding:2px 5px; font-size:13px; margin:0 5px}

textarea.tarea1{ border:1px solid #c8c8c8; width:150px; background:#ebeaea; padding:2px 5px; font-size:13px; height:50px}

.infoArea{ background:#fff; padding:20px; border-top:1px solid #e1e2e4}
.infoArea li{ list-style-type:none; background:url(../images/ico1.png) no-repeat; padding:0px 0 7px 20px; line-height:12px; font-size:12px; font-weight:600; color:#232323;margin-bottom: 10px}
.infoArea ul li ul li{ list-style-type:none; background:url(../images/ico1.png) no-repeat 0 center; padding:7px 0 7px 20px; line-height:18px; font-size:12px; font-weight:600; color:#232323;margin-bottom: 0px}
.infoArea input{ display:inline-block; margin:0 5px}
.infoArea li a{ color:#232323; text-decoration:underline}
.infoArea li a:hover{ text-decoration:none;}
.infoArea li a.link{background:url(../images/ico1.png) no-repeat 15px center; padding:0 0 0 35px; border-left:1px solid #888888; margin:0 0 0 15px}

.greyBox{ background:#e7e8ea; text-align:center; font-size:12px; font-weight:600; color:#232323; padding:15px 10px; border-bottom:1px solid #c3c4c5}

.selectBox{ text-align:center; padding:15px 10px;}
.select2{ border-radius:5px!important;
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(255,255,255,1) 36%, rgba(229,229,229,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,rgba(255,255,255,1)), color-stop(100%,rgba(229,229,229,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 36%,rgba(229,229,229,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(255,255,255,1) 36%,rgba(229,229,229,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(255,255,255,1) 36%,rgba(229,229,229,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(255,255,255,1) 36%,rgba(229,229,229,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
padding:0 0 5px 0!important;
height:30px!important; max-width:175px;
line-height:30px!important;font-weight:600; margin:0 10px 0 0!important;
}
.select2 option{ padding-right:20px}
.select2:hover, .select2:focus{ background:#fff}
.select2 option{ padding:10px}
.select3{ border-radius:5px!important;
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(255,255,255,1) 36%, rgba(229,229,229,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,rgba(255,255,255,1)), color-stop(100%,rgba(229,229,229,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 36%,rgba(229,229,229,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(255,255,255,1) 36%,rgba(229,229,229,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(255,255,255,1) 36%,rgba(229,229,229,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(255,255,255,1) 36%,rgba(229,229,229,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
padding:0 0 5px 0!important;
height:24px!important;
line-height:21px!important;font-weight:600; margin:0 10px 0 0!important;
}
.select3:hover, .select3:focus{ background:#fff}

.tareaBox{padding:0 5px; text-align:center; display:inline-block; width:160px; height:75px; vertical-align:top}
.tareaBox p{ padding:0 0 5px 0; margin:0; color:#000; font-weight:600}
.rowdlt{ position:absolute; margin-left:-20px}
.fr{ float:right}
.fl{ float:left}
/*####################*/
td.moreless{ text-align:left; color:#000; font-size:12px; font-weight:600}
.rm{ color:#f5902d;font-size:12px; font-weight:600}
td.open{ color:#009900}


/*responsive start*/
@media screen and (min-width:320px) and (max-width:767px){
ul.nav li{ padding:0 20px}
.navbar-collapse{ position:absolute; z-index:999; background:#202020; width:100%; top:50px}
.db a, .ep a{ background-position:0 15px; border-bottom:1px solid #323232}
.lo a{ background-position:0 15px;}
ul.nav li.active a{ background-position:0 -74px!important}
.orngTxt{ position:absolute; top:55px; display:block; background:#323232; width:100%; text-align:center}
.pageTitle{ margin:60px 0 0 0}
.pageTitle span{ text-align:left}
.pageTitle p{ padding:2px}
.select2{ margin:5px!important}
.greyBox{ text-align:left}
.infoArea ul{ margin:0; padding:0}
.infoArea li{ background-position:0 10px; display:block;}
.infoArea li a{ display:block}
.infoArea li a.link{ margin:15px 0 0 -20px!important; padding:0 0 0 20px!important; border:none!important; background-position:0 3px}
.respTable{ width:100%; overflow:auto;}
.tblDisplay{ width:750px!important}
.tblDisplay-no-borders{ width:750px!important}
.respTable .btnArea{ width:750px!important}
input.input3{ width:40px}
input.input2{ width:76px}
}
@media screen and (min-width:768px) and (max-width:999px){
input.input3{ width:40px}
input.input2{ width:76px}

}

@media (min-width:1000px){
.navbar-header{ min-width:350px;}
}
.bar{padding:0 0 0 15px; border-left:1px solid #888888; margin:0 0 0 15px}

/* added by Paul */
.kairos_teal{ color:#008080; }  /* rgb (0,128,128) */
.kairos_green{ color:#009900; }
.kairos_dark_green{ color:#3B693B; font-family: 'Open Sans', sans-serif; }
.kairos_red{ color:#990000; }
.kairos_red2{ color:#990000; }
.kairos_blue{ color:#000099; font-family: 'Open Sans', sans-serif; }
.kairos_purple{ color:#4c0099; }
.kairos_purple_weight{ color:#4c0099; font-weight:700; }
.kairos_grey{ color:#999999; } /* rgb(153,153,153) */
.kairos_black{ color:#464646; }
.kairos_blue_h{ color:#000099; }
.kairos_orange{ color:#FFA500; }
.kairos_amber{ color:#FC7F03; } /* rgb (252,127,3)  */

.survey_title{
    font-size: 2vw;
    color:#008080;
    width:70%;
}

.survey_thank_you {
font-size: 1vw;
    color:#999999;
    background-color: #3B693B;
    padding: 5px 15px 5px 15px;
    border-radius: 7px;
}

.help-text {
    /* SET the text color to grey */
    color: grey; 
    
    /* Change the text-decoration style to 'dotted' */
    text-decoration: underline dotted;
    
    /* Optional: option to nake it slightly smaller for a subtle look e.g. 0.8em */
    font-size: 1.1em; 
}