/*
CARE NAV COMMON STYLES - USED BY ALL INSTANCES of CARE NAV

    Common.scss/common.css overrides Bootstrap UI settings for public-facing CareNav UI.

	Goals for font description technology:
        1) Font sizes can be described in simple em terms.
		2) All text which should not be scaled uses rem.
        3) Works across all target browsers.
*/
/* - - - Mixins and Imports  - - - */
@import url("https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin");
/* - - - Color  Palette - - - */
/*******************************
                         Index
*******************************/
/* - - - - - General - - - - -
- Tyopgraphy
- Links
- Global
- Container
- Buttons
- Icons
- Help Tooltips
- Cards
- Lists

- - - - -  Layout. - - - -
- Header
- Main Navigation
- Desktop Navigation
- Right Column

- - - - -  Tables - - - -
- Tables

- - - - -  Forms - - - -
- Form Elements
- Custom Radio & Checkmarks
- Search
- Form
- Vertical Grouped Forms
- "Other" Text Fields
- Auto-complete
- Answer Required
- Restricted

- - - - -  Content. - - - -
- Assessment
- Action Plan

- - - - -  Other - - - -
- Alerts
- Login
- Modal
- Notifications
- Palette

- - - - -  Media Queries- - - -
- Media Queries-
*/
/*******************************
                        General
*******************************/
/* - - - Typography - - - */
h1, h2, h3, h4, h5 {
  color: #0087A2;
  letter-spacing: 0.025em;
  font-weight: 700;
  line-height: 1.2;
}

h1 {
  font-size: 1.75rem;
}

h1,
h1:last-child {
  margin-bottom: 15px;
  text-transform: capitalize;
}

h2 {
  font-size: 1.65rem;
}

h3,
.subtitle h3,
.subtitle h3:last-child {
  margin-bottom: 15px;
  color: #0087A2;
  font-size: 1.2em;
}

h4 {
  font-size: 1.1em;
}

.title,
.title h4 {
  margin-bottom: 5px;
  color: #0087A2;
  font-weight: 700;
}

/* - - - Links - - - */
a {
  color: #0087A2;
  text-decoration: none;
  cursor: pointer;
}
a:hover, a:active {
  color: #0087A2;
  text-decoration: none;
  opacity: 0.8;
}

/* - - - Global - - - */
body {
  color: #606060;
  font-family: "Lato", "Helvetica Neue", Arial, Helvetica, sans-serif;
  font-size: 0.95rem;
  background-color: transparent;
  overflow-x: auto !important;
}

svg {
  height: 100%;
  width: 100%;
}

.cjios {
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.close-app {
  display: block;
  position: absolute;
  height: 36px;
  width: 36px;
  top: -17px;
  right: -17px;
  font-weight: 400;
}
.close-app img {
  max-height: 100%;
  height: auto;
  cursor: pointer;
  border-radius: 50%;
  -webkit-box-shadow: 4px 4px 5px 0px rgba(94, 94, 94, 0.37);
  -moz-box-shadow: 4px 4px 5px 0px rgba(94, 94, 94, 0.37);
  box-shadow: 4px 4px 5px 0px rgba(94, 94, 94, 0.37);
}

.disable > div {
  color: #C0C0C0 !important;
}
.disable .custom-control-label {
  color: #C0C0C0 !important;
}

.indent {
  margin-left: 2em !important;
}

.instructions h4,
.instructions h4:last-child {
  margin-bottom: 15px;
  color: #606060;
  font-size: 1.11em;
  font-weight: 400;
}
.instructions input {
  display: inline;
}

/* - - -  Container - - - */
.container,
.container-fluid {
  margin-top: 20px;
  margin-bottom: 20px;
}

.content {
  display: block;
  position: relative;
}

.main {
  min-height: 600px;
  padding: 1.5rem;
  display: block;
  overflow: x-scroll;
  background-color: #EAEBEB;
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
  overflow: auto;
}
.main::after {
  display: block;
  content: "";
  clear: both;
}

footer {
  width: 95%;
  padding-top: 15px;
  padding-bottom: 15px;
  display: block;
  position: absolute;
  bottom: 0px;
  font-size: 0.8em;
}
footer .footer span a {
  white-space: nowrap;
}

.modal {
  margin-top: 20px;
  margin-bottom: 20px;
}

.overlay {
  margin-left: 20px;
  margin-right: 40px;
  margin-top: 20px;
  margin-bottom: 20px;
  background-color: #F1F1F1;
  -webkit-box-shadow: 4px 4px 5px 0px rgba(94, 94, 94, 0.37);
  -moz-box-shadow: 4px 4px 5px 0px rgba(94, 94, 94, 0.37);
  box-shadow: 4px 4px 5px 0px rgba(94, 94, 94, 0.37);
  border-radius: 7px;
}
.overlay::after {
  display: block;
  content: "";
  clear: both;
}

/* Clearfix
still used in some layouts  that contain floats - */
.cf:before,
.cf:after {
  content: "";
  display: table;
}

.cf:after {
  clear: both;
}

/* - - - Buttons - - - */
button:focus,
button:active {
  outline: none;
  box-shadow: none;
}

.btn {
  padding: 0.5rem 1rem;
  font-family: "Lato", "Helvetica Neue", Arial, Helvetica, sans-serif;
  font-weight: 700;
  border-radius: 0.45rem;
  border: none;
}
.btn.active {
  background-color: rgba(0, 135, 162, 0.6);
  color: white;
}
.btn.active:active, .btn.active:hover {
  background-color: rgba(0, 135, 162, 0.6);
}

.btn-primary {
  color: white;
  background-color: #0087A2;
  border-color: #0087A2;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-primary .active {
  background-color: rgba(0, 135, 162, 0.8) !important;
  border-color: rgba(0, 135, 162, 0.8) !important;
  color: white;
  box-shadow: none !important;
}

.btn-secondary {
  background-color: #606060;
  border-color: #606060;
}

.btn-gray {
  color: white;
  background-color: #D0D0D0;
}

.btn-sm {
  padding: 0.35rem 0.75rem;
  font-size: 0.75rem;
  border-radius: 0.25rem;
}
.btn-sm.btn-page {
  padding: 0.15rem 0.75rem;
  font-size: 1rem;
  color: #0087A2;
  background-color: transparent;
  cursor: default;
}

.btn-wide {
  min-width: 175px;
}

.bottom-buttons .field, .bottom-buttons.field,
.assessment .field.buttons .field,
.assessment .field.buttons.field {
  width: auto;
  margin-bottom: 0;
  display: inline-block;
}
.bottom-buttons .field .btn, .bottom-buttons.field .btn,
.assessment .field.buttons .field .btn,
.assessment .field.buttons.field .btn {
  margin-right: 0.5rem;
}

button.cs-collapse-expand {
  /*do not remove cs for this class*/
  margin-top: -0.2rem;
  margin-left: 0.5rem;
  margin-right: -0.2rem;
  padding: 0.3rem 0.4rem;
  float: right;
  border-radius: 0.25rem;
}

/* - - - Icons - - - */
i.fa.fa-round,
a.fa.fa-round,
button.fa.fa-round {
  width: 22px;
  height: 22px;
  padding-left: 1px;
  padding-top: 2px;
  color: #FFFFFF;
  font-size: 18px;
  line-height: 18px;
  text-align: center;
  background-color: #DCDCDC;
  border-radius: 50%;
}
i.fa.fa-round:hover,
a.fa.fa-round:hover,
button.fa.fa-round:hover {
  color: white;
}

.fa.fa-round.close {
  width: 30px;
  height: 30px;
  padding-top: 4px;
  padding-left: 0;
  padding-right: 0;
  font-size: 24px;
  text-align: center;
}

.close {
  font-size: 1.75rem;
}

/* - - - Help Tooltip - - - */
.help-cirlce {
  margin-left: 0.25rem;
  width: 1.3rem;
  display: inline-block;
  color: #ffffff;
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.3rem;
  text-align: center;
  background: #C4C4C4;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
}

.help-cirlce:hover:after {
  width: 250px;
  padding: 5px 10px;
  position: absolute;
  left: -65px;
  top: 20px;
  content: attr(data-title);
  color: #606060;
  font-size: 0.85rem;
  line-height: 1.2;
  text-align: left;
  background: white;
  font-weight: normal;
  border: 1px solid #e6e6e6;
  border-radius: 0.3rem;
  z-index: 100;
  -webkit-box-shadow: 4px 4px 5px 0px rgba(94, 94, 94, 0.37);
  -moz-box-shadow: 4px 4px 5px 0px rgba(94, 94, 94, 0.37);
  box-shadow: 4px 4px 5px 0px rgba(94, 94, 94, 0.37);
}

/* - - - Cards - - - */
.card {
  border-radius: 7px;
  border-radius: 0.5rem;
  border: white;
  /*    .cs-text {
          clear: both;
      }*/
}
.card .card-body::after {
  display: block;
  content: "";
  clear: both;
}
.card .title {
  display: inline-block;
}
.card h2.title {
  margin-top: 0;
  margin-bottom: 1.25rem;
  font-size: 1.3em;
}

/* - - - Lists - - - */
ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
ul.bullet-list {
  margin-left: 15px;
  list-style-type: disc;
  list-style-position: outside;
  list-style-image: none;
}

/*******************************
                       Layout
*******************************/
/* - - - Header - - - */
.header {
  padding: 1rem 1.75rem;
  display: block;
  position: relative;
  background-color: #DEDEDE;
  background: #F9FAFA;
  background: -moz-linear-gradient(top, #f9fafa 2%, #dddfdf 99%);
  background: -webkit-linear-gradient(top, #f9fafa 2%, #dddfdf 99%);
  background: linear-gradient(to bottom, #f9fafa 2%, #dddfdf 99%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#f9fafa", endColorstr="#dddfdf",GradientType=0 );
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
}
.header::after {
  display: block;
  content: "";
  clear: both;
}
.header .branding {
  margin-top: 4px;
  margin-right: 25px;
  float: left;
}

.login {
  position: absolute;
  top: 1.25rem;
  right: 1.75rem;
  color: #C2C1C3;
  font-size: 0.9em;
}

/* - - - Branding - - - */
.navbar-brand {
  padding-bottom: 0;
}

.navbar-brand .logo,
.branding .logo {
  width: 275px;
  height: 70px;
  display: inline-block;
  background-image: url(/app/assets/images/carenav-logo.svg);
  background-repeat: no-repeat;
  background-size: cover;
}

/* - - - Main Navigation - - - */
.navbar {
  width: 100%;
  padding: 0;
}
.navbar::after {
  display: block;
  content: "";
  clear: both;
}
.navbar .navbar-wrap {
  width: 100%;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-pack: justify !important;
  -ms-flex-pack: justify !important;
  justify-content: space-between !important;
}
.navbar .navbar-right {
  text-align: right;
}
.navbar .navbar-toggler {
  margin-top: 2.25rem;
  background-color: white;
}
.navbar .navbar-toggler:focus,
.navbar .navbar-toggler:active,
.navbar .navbar-toggler-icon:focus {
  outline: none;
  box-shadow: none;
}
.navbar .navbar-collapse {
  margin-top: 0.5rem;
  padding: 0;
  background-color: white;
  border-radius: 0.5rem;
}
.navbar .navbar-collapse .nav-item {
  border-bottom: 1px solid #DCDCDC;
}
.navbar .navbar-collapse .nav-item a {
  padding: 0.75rem;
}
.navbar .navbar-collapse .nav-item:last-child {
  border-bottom: none;
}
.navbar .navbar-collapse .step-1 {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}
.navbar .navbar-collapse .section {
  text-transform: uppercase;
  color: white;
  font-weight: 700;
  background-color: #0087A2;
}
.navbar .navbar-collapse .section a {
  color: white;
}
.navbar .navbar-collapse .section a:focus, .navbar .navbar-collapse .section a:hover {
  color: white;
  opacity: 1;
}
.navbar.navbar-light .navbar-nav .nav-link {
  color: #606060;
}
.navbar.navbar-light .navbar-nav .nav-link.section {
  color: white !important;
}
.navbar.navbar-light .navbar-nav .active > .nav-link,
.navbar.navbar-light .navbar-nav .nav-link.active,
.navbar.navbar-light .navbar-nav .nav-link.show,
.navbar.navbar-light .navbar-nav .show > .nav-link {
  color: #0087A2;
}
.navbar.navbar-light .navbar-nav .active > .nav-link.section,
.navbar.navbar-light .navbar-nav .nav-link.active.section,
.navbar.navbar-light .navbar-nav .nav-link.show.section,
.navbar.navbar-light .navbar-nav .show > .nav-link.section {
  color: white !important;
}

/* - - - Desktop Navigation - - - */
.nav-workflow {
  margin-top: 2.5rem;
  margin-right: -5px;
  overflow: hidden;
  border-radius: 5px;
}
.nav-workflow button {
  padding: 0 10px 0 27px;
  display: block;
  position: relative;
  float: left;
  color: #BABABA;
  font-size: 14px;
  line-height: 36px;
  background: #fefefe;
  background: linear-gradient(to right, #fefefe 0%, #f1f1f1 100%);
  border: none;
  outline: none;
  /*hover/active styles*/
  /*Arrows for the breadcrumbs using rotated pseudo elements*/
  /*No arrow after the last link*/
}
.nav-workflow button::before {
  width: 0;
  height: 0;
  display: none;
}
.nav-workflow button:first-child {
  padding-left: 17px;
  border-radius: 5px 0 0 5px;
  /*to match with the parent's radius*/
}
.nav-workflow button:first-child:before {
  left: 14px;
}
.nav-workflow button:last-child {
  border-radius: 0 5px 5px 0;
  /*this was to prevent glitches on hover*/
  padding-right: 20px;
}
.nav-workflow button.js-step-1 {
  text-transform: uppercase;
  font-weight: 700;
}
.nav-workflow button.active, .nav-workflow button.active:after, .nav-workflow button.active:hover {
  color: white;
  background: #0087A2;
}
.nav-workflow button.active:before {
  background: #219db7;
}
.nav-workflow button:hover, .nav-workflow button:hover:after {
  color: #0087A2;
}
.nav-workflow button:after {
  content: "";
  position: absolute;
  top: 0;
  right: -18px;
  /*half of square's length*/
  /*same dimension as the line-height of .breadcrumb a */
  width: 36px;
  height: 36px;
  /*as you see the rotated square takes a larger height. which makes it tough to position it properly. So we are going to scale it down so that the diagonals become equal to the line-height of the link. We scale it to 70.7% because if square's: 
  length = 1; diagonal = (1^2 + 1^2)^0.5 = 1.414 (pythagoras theorem)
  if diagonal required = 1; length = 1/1.414 = 0.707*/
  transform: scale(0.707) rotate(45deg);
  /*Prevent the arrows from getting buried under the next link*/
  z-index: 1;
  /*background same as links but the gradient will be rotated to compensate with the transform applied*/
  background: #f1f1f1;
  background: linear-gradient(135deg, #f1f1f1, #ececec);
  border-radius: 0 5px 0 50px;
}
.nav-workflow button:last-child:after {
  content: none;
}
.nav-workflow button.visited {
  color: #0087A2;
}
.nav-workflow button.visited.active {
  color: white;
  background: #0087A2;
}

/* - - - Right Column - - - */
.col-right .card h2.title {
  font-weight: 700;
}

.fb-page {
  width: 100%;
}

/* - - - Right Column - Team Members - - - */
.team-member {
  margin-bottom: 0.75rem;
  position: relative;
  line-height: 1.4;
}
.team-member:last-child {
  margin-bottom: 0;
}
.team-member i.fa {
  position: absolute;
  top: 0px;
  left: 0px;
  float: none;
  font-size: 1.5em;
  color: #CECECE;
}
.team-member .text {
  display: block;
  padding-left: 30px;
}
.team-member .text h3 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1em;
}

/* - - - Right Column - Resources, Services Documents - - - */
ul.resources-list,
ul.services-list,
ul.documents-list {
  line-height: 120%;
}

.resource,
.document,
.service {
  min-height: 38px;
  margin-bottom: 15px;
  display: block;
  position: relative;
  clear: both;
}
.resource::after,
.document::after,
.service::after {
  display: block;
  content: "";
  clear: both;
}
.resource:last-child,
.document:last-child,
.service:last-child {
  margin-bottom: 0;
}

.resources .icon,
.documents .icon,
.services .icon,
.events .icon {
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
}
.resources a,
.documents a,
.services a,
.events a {
  color: #606060;
}
.resources a:hover,
.documents a:hover,
.services a:hover,
.events a:hover {
  color: #0087A2;
  text-decoration: none;
}
.resources .title,
.documents .title,
.services .title,
.events .title {
  font-weight: 400;
}
.resources .text,
.documents .text,
.services .text,
.events .text {
  padding-bottom: 5px;
  font-size: 0.94em;
  line-height: 1.3;
}
.resources .status,
.documents .status,
.services .status,
.events .status {
  font-size: 0.94em;
  line-height: 1.3;
}

.resource .icon {
  top: 4px;
}
.resource .icon img {
  height: 34px;
  width: 34px;
}
.resource .text {
  padding-left: 50px;
}
.resource .text .type {
  margin-top: -5px;
  font-size: 0.85em;
  text-transform: uppercase;
  opacity: 0.8;
}

.document .icon {
  top: 3px;
}
.document .icon img {
  height: 20px;
  width: 20px;
}
.document .text {
  padding-left: 30px;
}

.service .icon img {
  margin-left: -2px;
  margin-top: -2px;
  height: 23px;
  width: 23px;
}
.service .text {
  padding-left: 30px;
}

/*******************************
                 Forms
*******************************/
/* - - - Form Elements - - - */
label {
  margin-bottom: 0.25rem;
  color: #595959;
  font-size: 0.925rem;
  font-weight: 700;
}
label.custom-control-label {
  font-weight: 400;
}
label.error {
  color: red;
}

input,
textarea,
.form-control,
.custom-select {
  border-width: 2px;
}
input:focus,
textarea:focus,
.form-control:focus,
.custom-select:focus {
  color: rgba(0, 0, 0, 0.95);
  border-color: #F78840;
}

input,
.form-control,
.custom-select {
  height: calc(2.65rem + 2px);
}

input {
  background-color: #FFFFFF;
}
input[type=checkbox], input[type=radio] {
  height: auto;
  cursor: pointer;
  opacity: 0.5 !important;
  background-color: inherit;
}
input[type=checkbox]:checked, input[type=radio]:checked {
  opacity: 1 !important;
}

textarea {
  width: 100%;
}
textarea:focus {
  background: #FFFFFF;
  box-shadow: 0px 0em 0em 0em rgba(34, 36, 38, 0.35) inset;
  -webkit-appearance: none;
}

textarea:empty,
label:empty,
.title:empty {
  display: none;
}

.form-control,
.custom-select {
  margin-bottom: 0.5rem;
  padding: 0.25rem 1rem;
  border: 2px solid #DEDEDF;
  border-radius: 0.275rem;
}
.form-control:focus,
.custom-select:focus {
  color: #495057;
  background-color: white;
  outline: 0;
  box-shadow: none;
}

.form-link a {
  cursor: pointer;
}
.form-link label {
  font-weight: 500;
}

.cs-trigger-show-hide {
  overflow: visible !important;
}

/* - - - Custom Radio & Checkmarks - - - */
.custom-radio,
.custom-checkbox {
  /* the shadow; displayed while the element is in focus */
}
.custom-radio .custom-control-label::before,
.custom-checkbox .custom-control-label::before {
  background-color: white;
  border: 1px solid #D1D1D1;
}
.custom-radio .custom-control-input:focus ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(255, 195, 122, 0.35);
}

/* Radio */
.custom-radio .custom-control-input {
  /* Checked state */
  /* Active state */
  /*&:active ~ .custom-control-label::before {
  }*/
}
.custom-radio .custom-control-input:checked ~ .custom-control-label::before, .custom-radio .custom-control-input:checked ~ .custom-control-label::after {
  background-color: #F78840;
  border-radius: 50%;
}
.custom-radio .custom-control-input:disabled ~ .custom-control-label::before {
  background-color: white;
}

/* Checkbox */
.custom-checkbox {
  /* CheckmarkSize */
  /* Checked state */
}
.custom-checkbox .custom-control-label::before {
  top: 0.15rem;
  left: 0;
  width: 1.05rem;
  height: 1.1rem;
}
.custom-checkbox .custom-control-label::after {
  top: 0.15rem;
  left: 0;
  width: 1.05rem;
  height: 1.1rem;
  background-size: 70% 70%;
}
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before, .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
  background-color: #F78840;
  border-radius: 0.25rem;
}

/* - - - Search - - - */
.search .input-group {
  width: auto;
}
.search .input-group input[type=text] {
  border-width: 1px;
  border-top-left-radius: 2rem;
  border-bottom-left-radius: 2rem;
  border-right: none;
}
.search .input-group-append {
  height: calc(2.35rem + 2px);
  padding: 0.7rem 0.65rem;
  text-align: center;
  border: 1px solid #DEDEDF;
  border-top-right-radius: 2rem;
  border-bottom-right-radius: 2rem;
  border-left: none;
}
.search .form-control[type=text] {
  height: calc(2.35rem + 2px);
}
.search .form-control:focus {
  border-color: #DEDEDF !important;
}

/* - - - Form - - - */
.form {
  color: #606060;
}
.form .question,
.form .title {
  margin-bottom: 0.4rem;
  color: #606060;
  font-size: 1.1em;
  font-weight: 700;
}
.form .form-check {
  margin-bottom: 0.5rem;
  padding-left: 0;
  display: inline-block;
}
.form .form-check > .form-control {
  width: auto;
  margin-top: -12px;
  margin-left: 10px;
}
.form .form-check .form-control[type=text] {
  height: auto;
}
.form .form-check .input-wrap {
  display: inline-block;
  white-space: nowrap;
}
.form .disabled .form-control,
.form :disabled {
  background-color: white;
  pointer-events: none;
  opacity: 0.45;
}

/* - - - Vertical Grouped Forms- - - */
.grouped.fields {
  display: block;
  margin: 0em 0em 1em;
}
.grouped.fields:last-child {
  margin-bottom: 0em;
}
.grouped.fields .field, .grouped.fields.inline .field {
  display: block;
  margin: 0.5em 0em;
  padding: 0em;
}
.grouped .form-group {
  margin-bottom: 0;
}
.grouped .form-check .input-wrap {
  display: block;
  white-space: nowrap;
}
.grouped .form-check-inline {
  width: 100%;
}

/* - - - "Other" Text Fields - - - */
.keep-with-next {
  display: inline-block !important;
  float: left !important;
  clear: both;
}
.keep-with-next .form-check {
  margin-right: 0;
}

.keep-with-last {
  display: inline-block !important;
}
.keep-with-last .form-check > .form-control {
  height: calc(1.6rem + 2px) !important;
  margin-top: 0;
  margin-bottom: -4px !important;
  padding: 0.15rem 0.3rem;
  color: #595959;
  font-size: 0.974em;
}

.has-other .form-control.other {
  height: calc(1.6rem + 2px) !important;
  width: auto;
  margin-left: 0.5rem;
  margin-top: -4px !important;
  margin-bottom: -4px !important;
  padding: 0.15rem 0.3rem;
  display: inline-block !important;
  color: #595959;
  font-size: 0.974em;
}

/* - - - Auto-complete - - -*/
.autocomplete-results {
  color: #606060;
  background-color: #FFFFFF;
  border: 2px solid rgba(2, 129, 154, 0.501961);
  border-radius: 4px;
  padding: 0px 14px;
  opacity: 0.9;
  display: none;
}
.autocomplete-results > :first-child {
  margin-top: 9px;
}
.autocomplete-results > :last-child {
  margin-bottom: 9px;
}
.autocomplete-results .selected {
  color: #0087A2;
  background-color: #EAEBEB;
}

/* - - - Answer Required - - -*/
.field {
  margin-bottom: 1rem;
}
.field:first-child.unanswered {
  width: 100%;
  margin-right: 0;
  padding-left: 10px;
  padding-right: 10px;
}
.field.js-form-element-view.unanswered {
  background-color: #EDF7F7;
  /*Percentage of primary color, shifted towards green or yellow;*/
  border-radius: 5px;
  margin-left: -5px !important;
  margin-right: -5px !important;
  padding: 5px 10px;
}
.field.unanswered .question {
  margin-top: 5px;
}
.field.unanswered .title {
  padding-top: 5px;
}
.field.buttons {
  margin-bottom: 0;
}

/* - - - Restricted - - -*/
.js-scope-restricted {
  margin-left: -5px !important;
  margin-right: -5px !important;
  padding: 5px 10px;
  background-color: #EFE5E5 !important;
  border-radius: 5px;
}
.js-scope-restricted .question {
  margin-top: 5px;
}
.js-scope-restricted .title {
  padding-top: 5px;
}

/*******************************
                       Tables
*******************************/
.table {
  font-size: 0.9rem;
  line-height: 1.2;
  color: #444444;
}
.table table {
  width: 100%;
}
.table thead th {
  background-color: #F9FAFB;
}
.table td.table-checkbox, .table td.table-radio {
  text-align: center;
  vertical-align: middle;
}
.table td.table-checkbox .custom-control, .table td.table-radio .custom-control {
  padding-left: 1.1rem;
  margin-left: 0.75rem;
  display: inline-block;
}
.table td.table-checkbox .custom-control-label, .table td.table-radio .custom-control-label {
  min-width: 0.75rem;
  margin-top: 0.15rem;
  padding-left: 0.3rem;
  vertical-align: middle;
}
.table td.table-checkbox {
  background-color: #F9FAFB;
}
.table td.table-radio {
  background-color: #FFFFFF;
}

.table-bordered thead th {
  border-bottom-width: 1px;
}

.scroll-table {
  margin-top: 10px;
  margin-bottom: 10px;
  overflow-x: auto;
}

@media screen and (max-width: 1100px) {
  .table-responsive {
    border-right: 1px solid #DEDEDE;
  }
}
.cs-table-caregiver-phq91 td.table-input,
.cs-table-caregiver-lsns61 td.table-input {
  padding-right: 14px;
}

.cs-table-caregiver-phq91 th.questions-table-header,
.cs-table-caregiver-lsns61 th.questions-table-header {
  /*Social Network*/
  width: 10%;
  min-width: 22px;
  max-width: 50px;
}

.cs-table-caregiver-phq91 th.questions-table-header {
  width: 15%;
}

.cs-table-caregiver-lsns61 th.questions-table-header {
  /*Social Network*/
  width: 10%;
}

/*******************************
                       Content
*******************************/
/* - - - Page - General Non-App Content - - - */
.page .card-header {
  border-bottom: none;
}
.page .card-body {
  padding: 1.5rem 2rem;
}

/* - - - Assessment - - - */
.question-group-header h4 {
  margin-top: 20px;
}

/* - - -  Action Plan - - - */
.action-plan ul {
  margin-bottom: 15px !important;
}
.action-plan li {
  margin-left: 25px;
  margin-bottom: 3px;
  list-style: disc;
}

/* - - -  Welcome - - - */
.welcome {
  margin-bottom: 15px;
  color: #0087A2;
  font-size: 1.2em;
  font-weight: 400;
}

/*******************************
                         Other
*******************************/
/* - - -  Alerts - - - */
.alert-message h2.title {
  color: #F78840;
  font-size: 1.75em;
}
.alert-message a.fa.close {
  position: relative;
  background-color: #F78840;
}

/* - - - Login - - - */
.login-wrap {
  text-align: center;
}

.login-content {
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
  text-align: left;
}
.login-content .welcome {
  font-size: 1em;
}

/* - - - Modals - - - */
.modal-dialog .modal-header,
.modal-dialog .modal-body,
.modal-dialog .modal-footer {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.modal-dialog .modal-header {
  padding-bottom: 0;
  border-bottom: 0;
}
.modal-dialog .modal-footer {
  padding-top: 0;
  border-top: 0;
}

/* - - - Notifications - - - */
.notifications .btn.notifications-new-message {
  float: right;
}
.notifications .notifications-content {
  color: #808080;
  clear: both;
}
.notifications .notifications-list {
  min-height: 50px;
  max-height: 500px;
  width: 100%;
  margin: 2px;
  padding: 0px 10px;
  overflow-y: auto;
  border: 1px solid rgba(34, 36, 38, 0.15);
  border-radius: 0.28571429rem;
}
.notifications .notifications-message {
  width: 100%;
  max-height: 300px;
  overflow-y: auto;
  padding: 0 15px 15px 0;
  clear: both;
}
.notifications .notifications-message-text textarea {
  margin: 0px;
  width: 100%;
  height: 5em;
}
.notifications .notifications-recipient {
  width: 45%;
  margin-bottom: 15px;
  margin-right: 5%;
  display: inline-block;
}
.notifications .notifications-subject {
  width: 45%;
  overflow-x: auto;
  margin-bottom: 15px;
  display: inline-block;
}
.notifications .no-new-notifications {
  padding: 25px;
}
.notifications .no-new-notifications:empty {
  display: none;
}

.notifications-unread {
  height: 2rem;
  width: 2rem;
  margin-left: 10px;
  margin-top: -10px;
  display: inline-block;
  color: #FFFFFF;
  font-size: 1rem;
  line-height: 2rem;
  text-align: center;
  vertical-align: middle;
  background: #F78840;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
}

.notification-block {
  max-height: 20em;
  margin: 15px 5px;
  padding: 10px;
  position: relative;
  overflow-y: auto;
  font-size: 1rem;
  word-wrap: break-word;
  border-radius: 7px;
  border: 1px solid #EAEBEB;
}
.notification-block.to {
  background: #FCFCFC;
  /* Old browsers */
  background: -moz-linear-gradient(top, #FCFCFC 0%, #F2F2F2 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #FCFCFC 0%, #F2F2F2 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #FCFCFC 0%, #F2F2F2 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#FCFCFC", endColorstr="#F2F2F2",GradientType=0 );
  /* IE6-9 */
  margin-right: 30px;
}
.notification-block.to.unread {
  border: 2px solid #F78840;
}
.notification-block.to.unread .notification-subject {
  color: #141414;
}
.notification-block.from {
  background-color: rgba(0, 135, 162, 0.1);
  margin-left: 30px;
}
.notification-block .notification-content pre {
  margin: 0;
  font-family: inherit;
  line-height: normal;
}
.notification-block .notification-from {
  margin-right: 65px;
  margin-bottom: 4px;
  float: left;
  color: #C0C0C0;
  font-size: 0.9rem;
}
.notification-block .notification-read-when {
  margin-bottom: 4px;
  margin-right: 65px;
  float: right;
  color: #C0C0C0;
  font-size: 0.9rem;
}
.notification-block .notification-subject {
  margin-bottom: 4px;
  font-weight: 700;
}
.notification-block i.remove,
.notification-block i.reply {
  margin: 0;
  position: absolute;
  top: 10px;
  color: #7C7C7C;
  font-size: 20px;
  opacity: 0.5;
  cursor: pointer;
}
.notification-block i.reply {
  right: 40px;
}
.notification-block i.remove {
  right: 10px;
}
.notification-block .title {
  margin-top: 0em;
}

.js-notification.from .js-notification-message-reply {
  display: none;
}

/* - - - Palette - Mini Controls Outside of CJ - - - */
.palette-region {
  position: absolute;
  top: 100;
  right: 0;
  z-index: 100;
  overflow: hidden;
  display: none;
}

.palette {
  width: auto;
  max-width: 240px;
  margin: 20px 0 20px 20px;
  font-size: 0.9rem;
  background-color: #EDEDED;
  border-radius: 10px 0 0 10px;
  -webkit-box-shadow: -5px 0px 10px 5px rgba(153, 153, 153, 0.4);
  -moz-box-shadow: -5px 0px 10px 5px rgba(153, 153, 153, 0.4);
  box-shadow: -5px 0px 10px 5px rgba(153, 153, 153, 0.4);
}
.palette::after {
  display: block;
  content: "";
  clear: both;
}

.palette-header {
  padding: 10px 15px;
  color: #FFFFFF;
  background-color: #0087A2;
  border-top-left-radius: 10px;
}

.palette-title {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.2;
}

.palette-close .fa.fa-round {
  margin-right: -8px;
  margin-top: -4px;
  margin-bottom: -4px;
  width: 30px;
  height: 30px;
  padding-top: 4px;
  font-size: 24px;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.2) !important;
  cursor: pointer;
}

.palette-footer {
  height: 25px;
  background-color: #0087A2;
  border-bottom-left-radius: 10px;
}

.palette-block {
  padding: 15px;
  color: #2D2C2C;
  background-color: white;
}
.palette-block::after {
  display: block;
  content: "";
  clear: both;
}
.palette-block h2.title {
  width: 100%;
  margin-top: 0;
  margin-bottom: 3px;
  font-size: 1rem;
}
.palette-block h3 {
  width: 100%;
  margin-top: 0;
  margin-bottom: 2px;
  font-size: 0.9rem;
  color: #2D2C2C;
}
.palette-block.block-gray {
  background-color: #F6F7F7;
}
.palette-block .entry {
  min-height: 30px;
  margin-top: 5px;
  margin-bottom: 5px;
  display: block;
  position: relative;
  clear: both;
  font-size: 1rem;
  line-height: 120%;
}
.palette-block .entry.icon .entry-text {
  clear: none;
  padding-left: 30px;
}

/*******************************
            Media Queries
*******************************/
@media screen and (max-width: 1199.99px) {
  .notifications-search {
    margin-bottom: 10px;
    padding-right: 0;
    clear: both;
  }
}
@media screen and (max-width: 1050px) {
  .navbar-brand .logo,
.branding .logo {
    /*80%*/
    width: 220px;
    height: 56px;
  }

  .navbar .navbar-brand {
    width: 100%;
    padding: 0;
    display: block;
  }
  .navbar .navbar-wrap {
    display: block !important;
  }
  .navbar .navbar-right {
    text-align: left;
  }
  .navbar .nav-workflow {
    margin-top: 0.5rem;
  }
}
@media screen and (max-width: 767.999px) {
  .header,
.main {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .overlay {
    margin-left: 0;
    margin-right: 20px;
  }
}
@media screen and (min-width: 700px) {
  .navbar-toggler,
.navbar-collapse {
    display: none !important;
  }
}
@media screen and (max-width: 699.999px) {
  .navbar .navbar-brand {
    width: auto;
    margin-top: 2rem;
    display: inline-block;
  }
  .navbar .navbar-wrap {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .navbar .navbar-right {
    text-align: right;
  }
  .navbar .nav-workflow {
    display: none;
  }

  .help-cirlce:hover:after {
    width: 185px;
  }
}
@media screen and (max-width: 650px) {
  .keep-with-last {
    margin-left: 1.3rem;
    display: block !important;
  }
  .keep-with-last .form-check > .form-control {
    margin-bottom: 0 !important;
    margin-left: 0 !important;
  }
}
@media screen and (max-width: 575.999px) {
  .container-fluid {
    margin: 0;
    padding: 5px;
  }

  .overlay {
    margin: 0;
  }

  .header,
.main {
    padding: 1rem;
  }

  .notifications-search,
.notifications-search input {
    width: 100%;
  }

  .overlay {
    margin-left: 5px;
    margin-right: 17px;
  }

  .bottom-buttons .btn-primary {
    margin-bottom: 7px;
  }
}
@media screen and (max-width: 450px) {
  .navbar .navbar-brand .logo,
.branding .logo {
    /*60%*/
    width: 165px;
    height: 42px;
  }

  .help-cirlce:hover:after {
    width: 135px;
  }
}