/**
Applied to all screen sizes if included in jade template. Media queries below to adjust styles.
To contain all other component classes, with media queries for changes needed on a device size basis
**/
body {
    font-family: 'Open Sans',Arial, sans-serif;
    font-size: 1rem;
    margin: 0;
    padding: 0;
    background-color: #E2E8E8;
    color: #1A2636;
}
*, *:before, *:after {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
a {
    color: #203F83;
    text-decoration: none;
}
p {
    margin: 0;
    padding: 0;
}
ul{
  list-style-type: none;
  margin: 0;
  padding:0;
}
h2, h3, h4, h5 {
    font-family: Arial, sans-serif;
    color: #1A2636;
}
#myApp {
    clear:both;
    margin:0;
    height:auto!important;
}
.inlineError {
    padding:0 1.5em;
    width:100%;
    height:60px;
    overflow: hidden;
    line-height:60px;
    display: block;
}
.logoContainer {
    position: relative;
}
#selectLanguages {
    width: 12%;
    right: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    border: 1px solid #1A2636;
    background-color:#1A2636;
    padding: 0.4rem 0 0.4rem 0;
    border-radius: 3px;
    -webkit-border-radius: 3px;
}
.error {
    padding: 0 1.5em;
    width: 100%;
    height: 60px;
    line-height: 60px;
    overflow: hidden;
    display: none;
    z-index: 1000;
    top: 0;
    position: fixed;
}
.errorPanel {
    width: 100%;
    min-height: 500px;
    height: auto;
    display: block;
    padding: 0;
}
.profile {
    max-width: 100%;
    height: auto;
    display: block;
}
/* MISC */
.left {
    float:left;
}
.right {
    float:right;
}
.pointer {
    cursor: pointer;
}
.resetPointer {
    cursor:default!important;
}
.show {
    display: block;
}
.hide {
    display: none!important;
}
.clear {
    clear:both;
    overflow: hidden;
}
.capitalize {
    text-transform: capitalize;
}
.uppercase {
    text-transform: uppercase!important;
}
.bold {
    font-weight: bold;
}
.overflow {
    height:auto!important;
    overflow:hidden;
}
.block {
    display: block;
}
.centerText {
    text-align: center;
}
.visible {
    visibility: visible;
}
.not_visible {
    visibility: hidden;
}
.clearfix:after {
    content:"";
    display:block;
    clear:both;
}
.ellipses {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.noclick {
    pointer-events: none;
    cursor: default;
    opacity: 0.5;
}
/* LEFT NAVIGATION MENU */
.leftNav {
    display: block;
    position: fixed;
    z-index: 1010;
    top: 0;
}
.leftNav .clientLogo {
    line-height: 80px;
    height: 80px;
    font-size:2em;
    display: block;
    background-image: url('');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 60% auto;
    background-color: #525E6E;
}
.leftNav .collapsibleMenu {
    line-height: 80px;
    height: 80px;
    display: block;
    font-size: 2em;
    background-image: url('');
    background-size: 60% auto;
    background-position: center center;
    background-repeat: no-repeat;
}
.leftNav .collapsibleMenu .fa{
    vertical-align: middle;
    -moz-middle-with-baseline: middle;
}
.leftNav .collapsibleMenu:not(.expandSideMenu):hover {
    background-color: #EEEEEE;
}
.leftNav .collapsibleMenu.expandSideMenu:hover{
    background-color: #3C495A;
}
.leftNav .sideMenuItem  {
    width:275px;
    height:60px;
    display: block;
    cursor: pointer;
    color:#B9BEC5;
    font-size:0.8em;
    text-align: left;
    line-height: 25px;
    padding: 17px 0 17px 0;
    border-left-width:5px;
    border-left-style: solid;
    border-left-color:#525E6E;
}
.leftNav .sideMenuItem:hover {
    border-left-color:#00989E;
    color:#fff;
    background-color:#3C495A;
}
.leftNav .userMenu:hover {
    border-left-color: #FFD923!important;
}
.leftNav .userMenu.active {
    border-left-color: #FFD923!important;
    color:#fff;
    background-color:#3C495A;
}
.leftNav .userMenuDropDown .sideMenuItem.active {
    border-left-color: #FFD923!important;
    color:#fff;
    background-color:#738C9A;
}
.leftNav .toggleUserMenu {
    margin-right:0!important;
    margin-top:5px;
}
.leftNav .userMenuDropDown .sideMenuItem:hover {
    border-left-color: #FFD923;
}
.leftNav .userMenuDropDown .sideMenuItem {
    border-left-color:#3C495A;
    background-color: #3C495A;
}
.leftNav .mainMenu .sideMenuItem.active {
    border-left-color:#00989E;
    color:#fff;
    background-color:#3C495A;
}
.leftOffset {
    padding-left: 66px;
}
.filters-counter {
    width: 22px;
    height: 20px;
    -webkit-border-radius: 15%;
    -moz-border-radius: 15%;
    border-radius: 15%;
    padding: 1px 4px 1px 3px;
    text-align:center;
    display:block;
    pointer-events: none;
    background-color: #990556;
    color: white;
}
.advancedFilters {
    position: relative;
}
.advancedFiltersContainer {
    position: relative;
    top: 35%;
}
.advancedFilters:hover::before {
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    right: 0;
    position: absolute;
    color: #3C495A; /** kh--gray **/
}
.advancedFilters.collapse:hover::before {
    content: "\f106";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}
/* SURVEY JADE TEMPLATE */
.loading {
    width: 36px;
    height: 36px;
    display: block;
    background:url('../img/loader.gif') center center no-repeat;
}
.loading.centered {
    position: absolute;
    margin-left: -18px;
    margin-top: -40px;
    left: 50%;
    top: 50%;
}
/* MAIN PAGE*/
.main {
    width:100%;
    height:auto;
    z-index: 1;
    top:80px;
    position: relative;
}
.main.subject {
    width: 100%;
    height: auto;
    z-index: 1;
    top: 60px;
    position: relative;
}
.nav {
    width:96%;
    height:80px;
    display: block;
    z-index:1000;
    top:0;
    position:fixed;
    opacity:0.9;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
    transition:opacity 1s ease 0s;
    box-sizing:content-box;
    background-color: #fefefe;
}
.nav .dropDown {
    width:auto;
    height:80px;
    display: block;
}
.nav label {
    font-size: 0.8rem;
    display: block;
    line-height: 1;
}
.nav select {
    margin:0;
    display: block;
    font-family: "Open Sans", Arial, sans-serif;
    font-size:0.95em;
    border:0;
    background-color:transparent;
}
.nav .useCase {
    width:auto;
    line-height: 80px;
    text-align: center;
    text-transform: uppercase;
    display: block;
}
.nav .useCase .production {
    display:none;
}
.nav h4 {
    margin:0!important;
    padding:0;
    display: block;
    height:80px;
    line-height: 80px;
    font-weight: 300;
    text-transform: uppercase;
    font-family: "Open Sans", Arial, sans-serif;
}
.panel h4 {
    margin: 0;
    padding:0;
    width: auto;
    font-weight: 200;
    letter-spacing: 1px;
    font-size: 1rem;
    text-transform: uppercase;
    font-family: "Open Sans", Arial, sans-serif;
}
.panel h4.bolder {
    font-weight: bolder;
}
.panel h5 {
    margin: 0;
    padding: 0;
    width: auto!important;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: "Open Sans", Arial, sans-serif;
}
.panel h6 {
    margin:0;
    padding:0;
    font-weight: 200;
    font-size:0.8em;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: "Open Sans", Arial, sans-serif;
}
.insidePanel {
    margin: 0;
    width:100%;
    display: block;
    height:auto;
    overflow: hidden;
}
.insidePanel h4 {
    max-width: 300px;
    line-height: 1.4rem;
    font-family: "Open Sans", "Arial", sans-serif;
}
/**number metric**/
.numberMetric {
    width: 20%;
    height: auto;
    overflow: hidden;
    display: block;
    text-align: center;
}
.numberMetric .value {
    width:100%;
    font-size:2em;
    font-weight: 300;
    display: block;
}
/**text messaging*/
.charCounter {
    line-height: 0.8em;
    text-align: right;
    display: block;
}
.txtMsgDialog {
    display:none;
}
.txtMsgDialog textarea {
    width:100%;
}
/**participant dashboard**/
.row {
    width:100%;
    height:auto;
    overflow:hidden;
    line-height: 1.2em;
    display: block;
    font-size:1em;
}
.rowHeader {
    width:100%;
    height:auto;
    overflow:hidden;
    display: block;
    font-size:.9em;
}
.rowDetail {
    width:100%;
    height:auto;
    overflow:hidden;
    display:block;
}
.rowIcon {
    width:5%;
    height:auto;
    overflow:hidden;
    display: none;
    min-height: 1.4em;
    line-height: 1.4em;
    font-size:0.9em;
    text-align: center;
}
.rowCell {
    height:auto;
    overflow:hidden;
    display: block;
    min-height: 2.4em;
    line-height: 2.4em;
    font-size:0.9em;
    position: relative;
}
.rowCellCompliance {
    height: auto;
    overflow: hidden;
    display: block;
    min-height: 2.4rem;
    font-size: 0.9rem;
    position: relative;
}
.compliance_metadata {
    flex: 1;
    flex-grow: 0;
    min-width: 4em;
}
.compliance-dot {
    flex: 1;
    flex-grow: 1;
}
.rowCellCompliance .topHalfCell{
    line-height: 1.2rem;
    font-size: 0.9rem;
    width: 50px;
    display: block;
    float: left;
}
.rowCellCompliance .bottomHalfCell{
    line-height: 1.2rem;
    font-size: 0.8rem;
    width: 50px;
    display: block;
}
.rowCellCompliance .topHalfCellFull {
    line-height: 1.2rem;
    font-size: 0.9rem;
    width: 150px;
    display: block;
    float: left;
}
.rowCellCompliance .bottomHalfCellFull {
    line-height: 1.2rem;
    font-size: 0.8rem;
    width: 120px;
    display: block;
}
.rowCellCompliance .rowCellData {
    width: 50px;
    float: left;
}
.rowCell .topHalfCell {
    line-height: 1.4em;
    font-size:1em;
    width:100%;
    display: block;
}
.participantsDashboard .rowCell .topHalfCell {
    width:50px;
    float: left;
}
.rowCell .bottomHalfCell {
    line-height: 1.25em;
    font-size:0.8em;
    width:100%;
    display: block;
}
.participantsDashboard .rowCell .bottomHalfCell {
    width:50px;
}
.rowCellNoDetail {
    height:auto;
    overflow:hidden;
    display: block;
    line-height: 2.4em;
    font-size:0.9em;
    border-radius: 3px;
}
.rowCellNoDetail.ellipses {
    white-space: nowrap;
    text-overflow: ellipsis;
}
.rowCellNoDetailRowMessage {
    height:auto;
    overflow:hidden;
    display: block;
    font-size:0.9em;
    border-radius: 3px;
    line-height: 1.74rem;
    padding: 0 0.4rem 0 0.4rem;
}
.participantsDashboard .rowData .rowCell:hover::before{
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    right: 1em;
    position: absolute;
}
.participantsDashboard .rowData .rowCell.collapse:hover::before{
    content: "\f106";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}
.participantsDashboard .rowCell:hover::before{
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    right: 1em;
    position: absolute;
}
.participantsDashboard .rowCell.collapse:hover::before{
    content: "\f106";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}
.rowCellHeader {
    height:auto!important;
    overflow:hidden;
    display: block;
    min-height: 1.2em;
    line-height: 1.2em;
    font-size:1em;
    padding:0;
}
.rowCellHeader.ellipses {
    white-space: nowrap;
    text-overflow: ellipsis;
}
.rowUnits {
    height:auto!important;
    overflow:hidden;
    display: block;
    font-size:0.8em;
    padding-top:0.2em;
}
.questionnairesList .rowCell:hover::before{
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    right: 1em;
    position: absolute;
}
.questionnairesList .rowCell.collapse:hover::before{
    content: "\f106";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}
.fa.warningCircle {
    font-size: 0.7em;
    position: relative;
    left: 7px;
    bottom: 2px;
}
.fa.fa-check.outdatedMeasurementCircle {
    font-size: 0.9rem;
    position: absolute;
    top: 18px;
    padding-right: 30%;
}
.fa.outdatedMeasurementCircle {
    font-size: 0.6rem;
    position: absolute;
    top: 18px;
    padding-right: 30%;
}
/* DETAILED VIEW */
.innerRow {
    width:100%;
    height:auto;
    overflow:hidden;
    line-height: 1.2em;
    display: block;
    font-size:1em;
}
.innerRowCell {
    height:auto;
    overflow:hidden;
    display: block;
    min-height: 2.4em;
    line-height: 2.4em;
    font-size:0.9em;
    position: relative;
}
.innerRow:hover {
    background-color: #f8f8f8;
}
.innerSubRow {
    width:100%;
    height:auto;
    overflow:hidden;
    line-height: 1.2em;
    display: block;
    font-size:1em;
}
.innerSubRow:hover {
    background-color: #f8f8f8;
}
.innerSubRowCell {
    height:auto;
    overflow:hidden;
    display: block;
    min-height: 2.4em;
    line-height: 2.4em;
    font-size:0.9em;
    position: relative;
}
/**UPDRS detailed view**/
.participantTasksList .innerRow .innerRowCell.taskRowIcon span::before {
    content: "\f105";
    font-family: "Font Awesome 5 Free", "Open Sans", sans-serif;
    font-weight: 900;
    right: 1em;
}
.participantTasksList .innerRow.expanded .innerRowCell.taskRowIcon span::before {
    content: "\f107";
    font-family: "Font Awesome 5 Free", "Open Sans", sans-serif;
    font-weight: 900;
    right: 1em;
}
/* BUTTONS */
.smallButton {
    border:0;
    padding:0 1em;
    height:2em;
    line-height: 2em;
    width:7em;
    text-align: center;
    display: block;
    cursor: pointer;
    text-decoration: none;
    -webkit-appearance: none;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.labelNoDevice,
.smallButtonNoDevice {
    border:0;
    padding: 0 0.4rem 0 0.4rem;
    font-size: 0.9em;
    line-height: 1.74rem;
    display: block;
    cursor: pointer;
    border-radius: 3px;
    text-decoration: none;
    -webkit-appearance: none;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}
.labelNoDevice {
    cursor: default;
}
.periodDetails.active {
    border-left-width: 2px;
    border-left-style: solid;
    border-left-color: #00989E;
    background-color: rgba(0, 177, 181, 0.2);
}
.periodDetails.active .periodName {
    margin-left: -2px;
}
.monitoringPeriodNameBox,
.questionnaireNameBox {
    border:0;
    padding: 0 0.4rem 0 0.4rem;
    font-size: 0.9em;
    line-height: 1.74rem;
    display: inline-block;
    cursor: pointer;
    border-radius: 3px;
    text-decoration: none;
    -webkit-appearance: none;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    color: #FFF;
    background-color: #00989E;
    margin-bottom: 0.6rem;
}
.smallAutoButton {
    cursor: pointer;
    display: block;
    font-size: 0.9em;
    height: 2.4em;
    line-height: 2.3em;
    padding: 0 1em;
    text-align: center;
    text-decoration: none;
    width: auto!important;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-appearance: none;
}
.inlineCenterButton {
    width:20%!important;
    left:-40%;
    position:relative;
    margin-left:50%!important;
}
/* SPANS */
.span1col:hover, .span2col:hover, .span3col:hover, .span4col:hover,
.span5col:hover, .span6col:hover, .span7col:hover,
.span8col:hover, .span9col:hover, .span10col:hover,.span11col:hover
.span20col:hover
{
    background-color: #f8f8f8;
}
.nohover:hover {
    background-color: transparent!important;
}
.span1col {
    width:100%;
}
.span2col {
    width:50%;
    padding-left: 1.2rem;
}
.span3col {
    width:33.33%;
    padding-left: 1.2rem;
}
.span4col {
    width:25%;
    padding-left: 1.2rem;
}
.span5col {
    width:20%;
    padding-left: 1.2rem;
}
.span6col {
    width:16.66%;
    padding-left: 1.2rem;
}
.span7col {
    width:14.28%;
    padding-left: 1.2rem;
}
.span8col {
    width:12.5%;
    padding-left: 1.2rem;
}
.span9col {
    width:11.11%;
    padding-left: 1.2rem;
}
.span10col {
    width:10%;
    padding-left: 1.2rem;
}
.span11col {
    width:9.09%;
    padding-left: 1.2rem;
}
.span12col {
    width:8.33%;
    padding-left: 1.2rem;
}
.span13col {
    width:7.69%;
    padding-left: 1.2rem;
}
.span20col {
    width: 5%;
    padding-left: 1.2rem;
}
/* SHADOW */
.boxLeftShadow {
    box-shadow: -1px 0 1px 0 rgba(0, 0, 0, 0.22);
}
.boxRightShadow {
    box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.22);
}
.boxBottomShadow {
    box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.22);
}
.bottomShadow {
    box-shadow: 0 -1px 2px rgba(0,0,0,0.25);
}
/* HEIGHTS */
.h2p4em {
    height: 2.4em;
    line-height: 2.3em;
}
.h100 {
    height:100%;
}
/* OTHER */
textarea {
    border:1px solid #bebebe;
    padding:0.5em 1.2em;
    display: block;
    height:4em;
    font-size:0.9em;
    resize: none;
    clear: both;
    overflow: hidden;
    -webkit-appearance: none;
    font-family: "Open Sans", Arial, sans-serif;
}
textarea#emailDisclaimer {
    height: 18rem;
}
input {
    padding: 0.5rem 0.4rem;
    display: block;
    font-size: 0.95rem;
    height: 2.4rem;
    width: 100%;
    border: 1px solid #bebebe;
    border-radius: 3px;
    font-family: 'Open Sans', Arial, sans-serif;
}
/* login/reset email, password fields */
input#email.fullInput.email,
input#password.fullInput.pwd {
    padding: 0.5rem 0.9rem 0.6rem 0.9rem;
    display: block;
    font-size: 0.9rem;
    line-height: 1.2rem;
    width: 100%;
    color: #1A2636;
    border: 1px solid #bebebe;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    font-family: 'Open Sans', Arial, sans-serif;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.4);
    /* override old styles sheets */
    height: auto;
    margin: 0;
}
/* Chrome, Safari */
input::-webkit-input-placeholder {
    color: #585858;
}
/* FF 19+ */
input::-moz-placeholder {
    color: #585858;
}
/* IE */
input:-ms-input-placeholder {
    color: #585858;
}
input.hasError {
    border:1px solid #F48577;
}
input[type="checkbox"] {
    padding:0.6rem 0;
    border-radius: 1px;
    margin-left: 0;
    height:1.4em;
    width:1.4em;
    display: block;
    line-height: 1.4em;
    border: 1px solid #bebebe;
    background-color: #fff;
    box-sizing: border-box;
}
input[type="radio"] {
    padding: 0.4rem 0;
    height: 1rem;
    width: 1rem;
    display: block;
    line-height: 1.5rem;
    background-color: #FFF;
    border-radius: 12px;
    -moz-appearance: radio;
}
.innerPasswordPanel {
    position: relative;
}
.innerPasswordPanel .showHidePassword {
    position: absolute;
    padding: 10px 10px 10px 18%;
    font-weight: bold;
    font-size: 0.9rem;
    font-style: normal;
    cursor: pointer;
    text-transform: uppercase;
}
.rightAddOn.showHidePassword {
    right: 0;
}
.rightAddOn input {
    padding: 10%;
}
/** custom dropdown menu **/
.dropDownMenuContainer {
    display: inline-block;
}
div[id="selectAdvancedFilters"] label {
    font-size: 0.8em;
    display: block;
    line-height: 1;
}
#selectAdvancedFilters.panel {
    overflow-x: visible;
    overflow-y: visible;
    opacity: 1;
}
#selectAdvancedFilters .insidePanel {
    overflow-x: visible;
    overflow-y: visible;
    display: inline-block;
}
.multiselect {
    width: 360px;
    position: relative;
}
.selectBox {
    position: relative;
    margin: 0;
}
.selectBox select {
    width: 100%;
    font-weight: bold;
}
.overSelect {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.multiselect #checkboxes {
    display: none;
    border: 1px #dadada solid;
    position: absolute;
    top: 0;
    z-index: 1;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}
#checkboxes label {
    display: block;
    float: left;
    background-color: #FFF;
    border-bottom: 1px solid #bebebe;
    line-height: 1.8rem;
    padding-left: 0.6rem;
    font-size: 1rem;
}
#checkboxes label.menuLabel {
    padding-left: 0.9rem;
}
#checkboxes label:hover {
    background-color: #e9e9e9;
}
#checkboxes input {
    float: left;
}
/* DETAILED VIEWS */
.dataPanel {
    width:100%;
    display: block;
    min-height: 220px;
    height:auto;
    overflow:hidden;
    position:relative;
}
.dataPanelHeader .ingestWindow {
    margin: 0;
    width: auto;
    font-weight: 200;
    letter-spacing: 1px;
    font-size: 0.85em;
}
.dataPanelCharts {
    width:100%;
    display: block;
    min-height: 250px;
    height: auto;
    overflow: hidden;
}
.dataPanelDevices {
    width:100%;
    display: block;
    height:auto;
    overflow: hidden;
}
.dataPanelAccounts {
    width:100%;
    display: block;
    height:auto;
    overflow: hidden;
}
.dataPanelHeader {
    width:100%;
    display: block;
    height:auto!important;
    overflow: hidden;
}
.errorWindowMessagePanel {
    width: 100%;
    height: auto;
    display: block;
    overflow: hidden;
    font-size: 0.9em;
    padding: 1em 1.5em 1em 1.5em;
    transition:opacity 1s ease 0s;
}
.main > .errorWindowMessagePanel {
    width: initial;
}
/* Global Error Message */
.reportsPage .errorWindowMessagePanel {
    padding: 1.2rem;
    background: #FFE5E2;
    border: 1px #EDCBC8 solid;
}
/* end */
.contentErrorMessagePanel {
    width: 100%;
    height: auto;
    display: block;
    overflow: hidden;
    font-size: 0.9rem;
    line-height: 1.2rem;
    padding: 1rem 1.2rem;
    border: 1px solid #E8C9C5;
    transition:opacity 1s ease 0s;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}
.dataNav {
    width:auto;
    height:2.2em;
    overflow: hidden;
    display: block;
    visibility: visible;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}
.disablePageButton {
    pointer-events: none;
    cursor: default;
}
.dataNav .dateRange {
    min-width: 180px!important;
    width:auto!important;
}
.dataNav .toggleButton {
    padding:0 1rem;
    height:100%;
    line-height: 2.4em;
    font-size:0.8em;
    width:auto;
    display: block;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}
.dataNav .toggleButton.leftToggle {
    -webkit-border-top-left-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-bottomleft: 3px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    border:1px solid #bebebe;
}
.dataNav .toggleButton.middleToggle {
    border-top:1px solid #bebebe;
    border-bottom:1px solid #bebebe;
    border-right:1px solid #bebebe;
}
.dataNav .toggleButton.rightToggle {
    -webkit-border-top-right-radius: 3px;
    -webkit-border-bottom-right-radius: 3px;
    -moz-border-radius-topright: 3px;
    -moz-border-radius-bottomright: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-top:1px solid #bebebe;
    border-right:1px solid #bebebe;
    border-bottom:1px solid #bebebe;
}
.dataNav .toggleMenuButton {
    padding:0 1rem;
    height:100%;
    line-height: 2.4em;
    font-size:0.8em;
    width:auto;
    display: block;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}
.dataNav .toggleMenuButton.leftToggle {
    -webkit-border-top-left-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-bottomleft: 3px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    border:1px solid #bebebe;
}
.dataNav .toggleMenuButton.middleToggle {
    border-top:1px solid #bebebe;
    border-bottom:1px solid #bebebe;
    border-right:1px solid #bebebe;
}
.dataNav .toggleMenuButton.rightToggle {
    -webkit-border-top-right-radius: 3px;
    -webkit-border-bottom-right-radius: 3px;
    -moz-border-radius-topright: 3px;
    -moz-border-radius-bottomright: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-top:1px solid #bebebe;
    border-right:1px solid #bebebe;
    border-bottom:1px solid #bebebe;
}
.dataNav .toggleMenuButton.singleToggle {
    -webkit-border-radius: 3px;
    -moz-border-radius:3px;
    border-radius: 3px;
    border:1px solid #bebebe;
}
.dataNav .togglePageButton {
    padding:0 1em;
    height:100%;
    line-height: 2.4em;
    font-size:0.8em;
    width:auto;
    display: block;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}
.dataNav .togglePageButton.leftToggle {
    -webkit-border-top-left-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-bottomleft: 3px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    border:1px solid #bebebe;
}
.dataNav .togglePageButton.middleToggle {
    border-top:1px solid #bebebe;
    border-bottom:1px solid #bebebe;
    border-right:1px solid #bebebe;
}
.dataNav .togglePageButton.rightToggle {
    -webkit-border-top-right-radius: 3px;
    -webkit-border-bottom-right-radius: 3px;
    -moz-border-radius-topright: 3px;
    -moz-border-radius-bottomright: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-top:1px solid #bebebe;
    border-right:1px solid #bebebe;
    border-bottom:1px solid #bebebe;
}
.dataPanelContent {
    width:100%;
    height:auto;
    display: block;
    overflow: hidden;
}
.ingestWindowMessagePanel {
    width: 100%;
    display: block;
    height: auto;
    overflow: hidden;
    font-size: 0.9em;
}
.panel select {
    margin: 0px 1rem 0px 0px;
    display: block;
    border: 1px solid #bebebe;
    border-radius:0;
    width: 100%;
    font-family: 'Open Sans',Arial, sans-serif;
    font-size: 1rem;
    outline: none;
    height: 2.4rem;
    background-color:#fff;
    text-indent: 0.25rem;
    padding: 0.4rem 1.2rem 0.4rem 0.6rem;
    -webkit-appearance: menulist-button;
}
select#selectQuestionnaire {
    margin: 0;
    display: block;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 0.95em;
    border: 0;
    background-color: transparent;
}
.min-height--n {
    min-height: 0
}
.detailLeftScroll {
    display: block;
    line-height: 2.4em!important;
}
.detailRightScroll {
    display: block;
    line-height: 2.4em!important;
}
/* Org Sign page */
.main.signup {
    top: 50px;
    margin-bottom: 50px;
}
/**program metric**/
.programMetric {
    width: 20%;
    height: auto;
    overflow: hidden;
    display: block;
    text-align: center;
}
.programMetric .value{
    width:100%;
    font-weight: 500;
    display: block;
    font-size: 1.4rem;
    font-family: "Open Sans", Arial, sans-serif;
}
.programMetric .value .split {
    font-size:0.6em;
    line-height: 2em;
    padding:0 0.5em;
}
.programMetric h5 {
    font-size:0.8em;
    padding-left:0!important;
    font-family: "Open Sans", Arial, sans-serif;
}
.goalBlockData {
    width: 50%;
    height: 250px;
    display: block;
}
.tab {
    line-height: 1.6em;
    min-width:8em;
    width:auto!important;
    display: block;
    -webkit-appearance: none;
    cursor: pointer;
    text-decoration: none;
}
.tab.surveyTab, .tab.surveyTab {
    padding:0;
    border-radius: 3px;
}
.issuedStats .programMetric {
    width: 33%;
}
.issuedStats .value {
    font-size: 2em;
}
.summaryMetrics .programMetric h5 {
    font-size: 0.7em;
}
.warningMessage {
    font-size: 0.8em;
    color: grey;
}
a.surveyLink {
    color: rgb(60, 73, 90);
    text-decoration: underline;
}
a.surveyLink:hover {
    cursor: pointer;
}
.coverageDataPointsList .row{
    border-left: 0;
}
/* FONTS */
.fp8em {
    font-size:0.8em!important;
}
.fp9em {
    font-size:0.9rem!important;
}
/* SETTINGS PAGE */
.verticalTab {
    width:99%;
    height:3em;
    line-height: 3em;
    font-size:0.9em;
    display: block;
    float:right;
    -webkit-border-top-left-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-bottomleft: 3px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    text-transform: capitalize;
    overflow: hidden;
}
.leftToggle {
    -webkit-border-top-left-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-bottomleft: 3px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    border-top:1px solid #bebebe;
    border-left:1px solid #bebebe;
    border-bottom:1px solid #bebebe;
}
.rightToggle {
    -webkit-border-top-right-radius: 3px;
    -webkit-border-bottom-right-radius: 3px;
    -moz-border-radius-topright: 3px;
    -moz-border-radius-bottomright: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-top:1px solid #bebebe;
    border-right:1px solid #bebebe;
    border-bottom:1px solid #bebebe;
}
/** modal **/
/* The Modal (background) */
.confirmationModal,
.modalBackground {
    display: block;
    position: fixed; /* Stay in place */
    z-index: 1001; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.confirmationModal.orientation {
    background-color: #FFFFFF; /* white */
}
.confirmationModal.open {
    display: block;
}
.confirmationModal.closed {
    display: none;
}

.confirmationModal .actionButtonContainer {
    display: flex;
    justify-content: center; /* align flex items horizontally (in this case) */
    align-items: center; /* align flex items vertically (in this case) */
}

.actionButton {
    display: flex;
    justify-content: center;
    align-items: center;
}


/* Modal Content */
.modalContent {
    background-color: #fefefe;
    margin: auto;
    padding: 2.5rem;
    border: 1px solid #888;
    width: 52%;
    max-width: 600px;
    border-radius: 9px;
    height: auto;
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
}
.modalContent.orientation {
    border: none;
}
.modalContent.notification {
    background-color: #FFE5E2;
    width: 40%;
}
/* Create Questionnaire */
.questionInstruction {
    font-style: italic;
    color: grey;
    font-size: 0.9em;
    padding-bottom: 1.2rem;
}
/* Garmin Connect */
.devicePanel {
    border-radius: 5px;
}
.devicePanel:hover {
  cursor: pointer;
  border: 1px solid #00989E;
}
.deviceLogo {
    width:100%;
    height:60px;
    display: block;
    background-position: center center;
    background-repeat: no-repeat;
}
.formHead {
  margin: 0 1em;
  border: 1px solid #ffd923;
}
.country-name {
  font-family: "Open Sans", Arial, sans-serif;
}
.panel .formSpacer.cellPhone, .panel .formSpacer.usernameCell {
  overflow: visible;
}
/* Password re-entry */
.passwordReEntryPanel {
    background-color: rgba(0,142,188, .1);
    border: 1px solid #3C5CAA;
    border-radius: 5px;
    padding: 1rem;
}
.passwordReEntryPanel.missingData {
    background-color: #FFE5E2;
}
.errorWindowMessagePanel span {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 0.9rem;
    padding: 1.2rem;
    color: #1A2636;
}
/* Surveys */
.questionText p:first-child {
    display: inline;
}

.surveyDescription p, .questionText p {
    margin-top: 1rem;
}

.surveyDescription p:first-child {
    margin-top: 0;
}

.redactor-layer.redactor-styles {
    font-family: "Open Sans", Arial, sans-serif;
    font-size: 0.95rem;
}

.redactor-box {
    border: 1px solid #bebebe;
    border-radius: 3px;
}
/* Inputs */
input:focus:not([type='number']):not([type='text']) {
    outline: none;
    outline-width: 0;
}
input[type=number].no-spin-button::-webkit-inner-spin-button,
input[type=number].no-spin-button::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type='number']:focus,
input[type='text']:focus {
    outline-width: 2px;
}
.optionBox textarea:focus {
    outline-width: 2px;
}
/* subject header nav and menu */
.subjectNav {
    height: 60px;
    width:100%;
    display: block;
    margin: 0 auto 0 auto;
    overflow: visible;
    position:fixed;
    top:0;
    z-index:100;
    background-color: #2B2351;
    color:#fefefe;
}
.subjectNav .programNameOrLogo .addLogo{
    background-image:url("/assets/img/img_logo2.png");
    background-size: contain;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    margin-left: -30px;
    left: 38.75%;
}
.subjectBurgerIcon {
    width: 60px;
    height: 60px;
    padding: 1.1rem 1.5rem 1.2rem 1.5rem;
    display: inline-block;
    float: left;
}
.subjectNav .useCase {
    width:60px;
    height:60px;
    padding:0 1.5em;
    display: inline-block;
    float: right;
    text-transform: uppercase;
    text-align: center;
    vertical-align: middle;
    line-height: 60px;
}
h4.subjectMenuTitle {
    color: #FFFFFF;
    display: inline-block;
    width: calc(100% - 124px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 200;
    font-family: "Open Sans", Arial, sans-serif;
    font-size: 1rem;
    margin: 0;
    padding: 1.2rem 0 1.2rem 0;
}
.subjectMenu {
    width:200px;
    height:100%;
    display: block;
    position: fixed;
    z-index:1010;
    top:60px;
    background-color:#3D535E;
}
.subjectMenu .clientLogo {
    line-height: 80px!important;
    height:80px!important;
    width:200px;
    display: block;
    padding-left:50px!important;
    font-size:2em!important;
    background-image: url('');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 60% auto;
}
.subjectMenu .sideMenuItem  {
    width:200px;
    height:60px;
    display: block;
    cursor: pointer;
    border-left-width:5px;
    line-height: 25px;
    padding: 17px 0.6rem 17px 1.2rem;
    border-left-style: solid;
    border-left-color:#525E6E;
    color:#B9BEC5;
    font-size:0.8em;
    text-align: left;
}
.subjectMenu .sideMenuItem:hover {
    border-left-color:#00989E;
    color:#fff;
    background-color:#738C9A;
}
.subjectMenu .userMenu:hover {
    border-left-color: #FFD923!important;
}
.subjectMenu .userMenu.active {
    border-left-color: #FFD923!important;
    color:#fff;
    background-color:#738C9A;
}
.subjectMenu .userMenuDropDown .sideMenuItem.active {
    border-left-color: #FFD923!important;
    color:#fff;
    background-color:#738C9A;
}
.subjectMenu .mainMenu .sideMenuItem.active {
    border-left-color:#00989E;
    color:#fff;
    background-color:#738C9A;
}
.subjectMenu .toggleUserMenu {
    margin-right:0!important;
    margin-top:5px;
}
.subjectMenu .userMenuDropDown .sideMenuItem:hover {
    border-left-color: #FFD923;
}
.subjectMenu .userMenuDropDown .sideMenuItem {
    border-left-color:#3D535E;
    background-color: #3D535E;
}
.scaleLineIndicator {
  width: 1px;
  height: 30px;
  margin-top: 0;
  margin-bottom: 0;
  color: #bbc0c7;
}
.scalequestions {
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
}
.scaleButton {
  font-size: 0.9rem;
  text-align: center;
  line-height: 1.4rem;
  padding: 0.5rem 1.5rem 0.6rem 1.5rem;
  font-family: "Open Sans", "Arial", sans-serif;
  cursor: pointer;
  color: #1A2636;
  border: 1px solid #B9BEC5;
  background: linear-gradient(#FFFFFF, #EDF0F0);
}
.scalequestions .scaleButton {
  -webkit-flex: 1 0 5%;
  -moz-flex: 1 0 5%;
  -ms-flex-: 1 0 5%;
  box-sizing: border-box;
  padding: 10px;
}
.scaleIndicators {
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   flex-direction: row;
   -webkit-justify-content: space-between;
   -moz-justify-content: space-between;
   width: 100%;
   margin: 0 auto;
}
.scaleLine {
   width: 10%;
}
.displayLabels {
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   -webkit-justify-content: space-between;
   -moz-justify-content: space-between;
   width: 100%;
   margin: 0 auto;
}
#displayMiddle, #displayLast {
    text-align: center;
    width: 12%;
}
/* lable over email, password - login, reset */
.panel label {
    width: 100%;
    font-size: 0.9rem;
    line-height: 1.2rem;
    padding: 0.1rem 0 0.2rem 0;
    display: block;
}
/* new success/error banner */
.contentMessagePanel {
    width: 100%;
    height: auto;
    display: block;
    overflow: hidden;
    font-size: 0.9rem;
    line-height: 1.2rem;
    padding: 1rem 1.2rem;
    transition: opacity 1s ease 0s;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}
.contentMessagePanel.errorMessage {
    border: 1px solid #E8C9C5;
}
.contentMessagePanel.successMessage {
    border: 1px solid #A3D5C1;
}
/* Questionnaires Count Down Page */
.noSingleSurvey .noDataMessage {
    font-size: 1.2rem;
    font-weight: bold;
}
.noSingleSurvey .greeting {
    font-size: 1.2rem;
}
/* label over email, password - login, reset - end */
/* subject phone number in A&D - start */
.dataPanelAccounts .staticPhone {
    overflow: visible;
}
.daterangepicker {
  position: absolute;
  color: inherit;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #ddd;
  width: 278px;
  max-width: none;
  padding: 0;
  margin-top: 7px;
  top: 100px;
  left: 20px;
  z-index: 3001;
  display: none;
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 15px;
  line-height: 1em;
}

.daterangepicker:before, .daterangepicker:after {
  position: absolute;
  display: inline-block;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: '';
}

.daterangepicker:before {
  top: -7px;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  border-bottom: 7px solid #ccc;
}

.daterangepicker:after {
  top: -6px;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #fff;
  border-left: 6px solid transparent;
}

.daterangepicker.opensleft:before {
  right: 9px;
}

.daterangepicker.opensleft:after {
  right: 10px;
}

.daterangepicker.openscenter:before {
  left: 0;
  right: 0;
  width: 0;
  margin-left: auto;
  margin-right: auto;
}

.daterangepicker.openscenter:after {
  left: 0;
  right: 0;
  width: 0;
  margin-left: auto;
  margin-right: auto;
}

.daterangepicker.opensright:before {
  left: 9px;
}

.daterangepicker.opensright:after {
  left: 10px;
}

.daterangepicker.drop-up {
  margin-top: -7px;
}

.daterangepicker.drop-up:before {
  top: initial;
  bottom: -7px;
  border-bottom: initial;
  border-top: 7px solid #ccc;
}

.daterangepicker.drop-up:after {
  top: initial;
  bottom: -6px;
  border-bottom: initial;
  border-top: 6px solid #fff;
}

.daterangepicker.single .daterangepicker .ranges, .daterangepicker.single .drp-calendar {
  float: none;
}

.daterangepicker.single .drp-selected {
  display: none;
}

.daterangepicker.show-calendar .drp-calendar {
  display: block;
}

.daterangepicker.show-calendar .drp-buttons {
  display: block;
  font-size: 12px;
}

.daterangepicker.auto-apply .drp-buttons {
  display: none;
}

.daterangepicker .drp-calendar {
  display: none;
  max-width: 270px;
}

.daterangepicker .drp-calendar.left {
  padding: 8px 0 8px 8px;
}

.daterangepicker .drp-calendar.right {
  padding: 8px;
}

.daterangepicker .drp-calendar.single .calendar-table {
  border: none;
}

.daterangepicker .calendar-table .next span, .daterangepicker .calendar-table .prev span {
  color: #fff;
  border: solid black;
  border-width: 0 2px 2px 0;
  border-radius: 0;
  display: inline-block;
  padding: 3px;
}

.daterangepicker .calendar-table .next span {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.daterangepicker .calendar-table .prev span {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.daterangepicker .calendar-table th, .daterangepicker .calendar-table td {
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
  min-width: 32px;
  width: 32px;
  height: 24px;
  line-height: 24px;
  font-size: 12px;
  border-radius: 4px;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
}

.daterangepicker .calendar-table {
  border: 1px solid #fff;
  border-radius: 4px;
  background-color: #fff;
}

.daterangepicker .calendar-table table {
  width: 100%;
  margin: 0;
  border-spacing: 0;
  border-collapse: collapse;
}

.daterangepicker td.available:hover, .daterangepicker th.available:hover {
  background-color: #eee;
  border-color: transparent;
  color: inherit;
}

.daterangepicker td.week, .daterangepicker th.week {
  font-size: 80%;
  color: #ccc;
}

.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
  background-color: #fff;
  border-color: transparent;
  color: #999;
}

.daterangepicker td.in-range {
  background-color: #ebf4f8;
  border-color: transparent;
  color: #000;
  border-radius: 0;
}

.daterangepicker td.start-date {
  border-radius: 4px 0 0 4px;
}

.daterangepicker td.end-date {
  border-radius: 0 4px 4px 0;
}

.daterangepicker td.start-date.end-date {
  border-radius: 4px;
}

.daterangepicker td.active, .daterangepicker td.active:hover {
  background-color: #357ebd;
  border-color: transparent;
  color: #fff;
}

.daterangepicker th.month {
  width: auto;
}

.daterangepicker td.disabled, .daterangepicker option.disabled {
  color: #999;
  cursor: not-allowed;
  text-decoration: line-through;
}

.daterangepicker select.monthselect, .daterangepicker select.yearselect {
  font-size: 12px;
  padding: 1px;
  height: auto;
  margin: 0;
  cursor: default;
}

.daterangepicker select.monthselect {
  margin-right: 2%;
  width: 56%;
}

.daterangepicker select.yearselect {
  width: 40%;
}

.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
  width: 50px;
  margin: 0 auto;
  background: #eee;
  border: 1px solid #eee;
  padding: 2px;
  outline: 0;
  font-size: 12px;
}

.daterangepicker .calendar-time {
  text-align: center;
  margin: 4px auto 0 auto;
  line-height: 30px;
  position: relative;
}

.daterangepicker .calendar-time select.disabled {
  color: #ccc;
  cursor: not-allowed;
}

.daterangepicker .drp-buttons {
  clear: both;
  text-align: right;
  padding: 8px;
  border-top: 1px solid #ddd;
  display: none;
  line-height: 12px;
  vertical-align: middle;
}

.daterangepicker .drp-selected {
  display: inline-block;
  font-size: 12px;
  padding-right: 8px;
}
.daterangepicker .drp-selected::before {
    content: 'Select the start and end date for the monitoring period.';
    display: block;
}

.daterangepicker .drp-buttons .btn {
  margin-left: 8px;
  font-size: 12px;
  font-weight: bold;
  padding: 4px 8px;
  display: none;
}

.daterangepicker.show-ranges .drp-calendar.left {
  border-left: 1px solid #ddd;
}

.daterangepicker .ranges {
  float: none;
  text-align: left;
  margin: 0;
}

.daterangepicker.show-calendar .ranges {
  margin-top: 8px;
}

.daterangepicker .ranges ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

.daterangepicker .ranges li {
  font-size: 12px;
  padding: 8px 12px;
  cursor: pointer;
}

.daterangepicker .ranges li:hover {
  background-color: #eee;
}

.daterangepicker .ranges li.active {
  background-color: #08c;
  color: #fff;
}
/* Reports Page */
.basic-multi-select .select__control {
    height: 2.4rem;
    min-height: fit-content;
    border-color: #bebebe;
}
.basic-multi-select .select__placeholder {
    color: #3C495A;
    position: sticky;
}
@media screen and (-ms-high-contrast:none) {
    .basic-multi-select .select__placeholder {
        position: fixed;
    }
}
.basic-multi-select .select__control:hover {
    border-color: #BEBEBE;
}
.basic-multi-select .select__control:focus {
    box-shadow: none;
}
.basic-multi-select .select__value-container {
    max-height: 2.4rem;
}
.basic-multi-select .select__multi-value {
    background-color: #990556;
}
.basic-multi-select .select__multi-value__label {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    color: #FFFF;
}
.basic-multi-select .select__multi-value__remove {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    color: #FFFF;
}
.reportsPage .insidePanel {
    overflow: visible;
}
.reportsPage .insidePanel > div {
    display: flex;
    flex-wrap: wrap;
}
.profile.reportsPage {
    overflow: visible;
}
.profile.reportsPage .panel {
    overflow: visible;
}
.reportsPage h4,
.reportsPage h5 {
    font-weight: 600;
}
.reportsPage h5 {
    font-size: 0.9rem;
    line-height: 1.2rem;
}
#emailNotification #checkboxSelect {
    display: flex;
}
#emailNotification label {
    padding: 0.25rem 0 0.2rem 0;
}
#emailNotification #checkboxSelectMessage {
    flex: 0 0 100%;
}
#reportActionButtons {
    justify-content: flex-end;
}
.loaderContainer {
    width: auto;
    height: 210px;
    position: relative;
}
.confirmationMessage svg[data-icon="check-circle"] {
    vertical-align: middle;
}
.terms-of-use ul {
    list-style-type: unset;
    font-family: 'Open Sans',Arial, sans-serif;
    font-size: 0.9rem;
}
/* Reports page end */
/*  Larger Screen Styling */
@media (min-width: 564px) {
  .daterangepicker {
    width: auto; }
    .daterangepicker .ranges ul {
      width: 140px; }
    .daterangepicker.single .ranges ul {
      width: 100%; }
    .daterangepicker.single .drp-calendar.left {
      clear: none; }
    .daterangepicker.single.ltr .ranges, .daterangepicker.single.ltr .drp-calendar {
      float: left; }
    .daterangepicker.single.rtl .ranges, .daterangepicker.single.rtl .drp-calendar {
      float: right; }
    .daterangepicker.ltr {
      direction: ltr;
      text-align: left; }
      .daterangepicker.ltr .drp-calendar.left {
        clear: left;
        margin-right: 0; }
        .daterangepicker.ltr .drp-calendar.left .calendar-table {
          border-right: none;
          border-top-right-radius: 0;
          border-bottom-right-radius: 0; }
      .daterangepicker.ltr .drp-calendar.right {
        margin-left: 0; }
        .daterangepicker.ltr .drp-calendar.right .calendar-table {
          border-left: none;
          border-top-left-radius: 0;
          border-bottom-left-radius: 0; }
      .daterangepicker.ltr .drp-calendar.left .calendar-table {
        padding-right: 8px; }
      .daterangepicker.ltr .ranges, .daterangepicker.ltr .drp-calendar {
        float: left; }
    .daterangepicker.rtl {
      direction: rtl;
      text-align: right; }
      .daterangepicker.rtl .drp-calendar.left {
        clear: right;
        margin-left: 0; }
        .daterangepicker.rtl .drp-calendar.left .calendar-table {
          border-left: none;
          border-top-left-radius: 0;
          border-bottom-left-radius: 0; }
      .daterangepicker.rtl .drp-calendar.right {
        margin-right: 0; }
        .daterangepicker.rtl .drp-calendar.right .calendar-table {
          border-right: none;
          border-top-right-radius: 0;
          border-bottom-right-radius: 0; }
      .daterangepicker.rtl .drp-calendar.left .calendar-table {
        padding-left: 12px; }
      .daterangepicker.rtl .ranges, .daterangepicker.rtl .drp-calendar {
        text-align: right;
        float: right; } }
@media (min-width: 730px) {
  .daterangepicker .ranges {
    width: auto; }
  .daterangepicker.ltr .ranges {
    float: left; }
  .daterangepicker.rtl .ranges {
    float: right; }
  .daterangepicker .drp-calendar.left {
    clear: none !important; } }

.periodRange {
    width: 35%;
}
.periodRange .fa-calendar{
    display: none;
}
.periodRange.editMode {
    margin-left: 1rem;
    padding-left: 1rem;
    border: 1px solid #ccc;
}
.periodRange.editMode .fa-calendar{
    display: initial;
}
.statusCell-calendar.rowCell .topHalfCell,
.statusCell-calendar.rowCell .bottomHalfCell {
    width: 10rem;

}
/** single option select menu **/
select.singleOption {
    -webkit-appearance: none;
    -moz-appearance: none;
    text-overflow: "";
}
select.singleOption::-ms-expand {
    display: none;
}
/* Reports Final Modal */
.finalModal .button--sm.downloadButton {
    padding: 0;
}
.finalModal .button--sm.downloadButton a {
    padding: 0.2rem 1.2rem 0.3rem 1.2rem;
    display: block;
}
/* Reports Final Modal - end */
/* subject phone number in A&D - end */
/* Tablet (iPad) + Desktop only styles */
@media (min-width: 666px) {
    /* NOT SUPPORTED DASH */
    .mobileIcon {
        text-align: center;
        font-size: 50px;
        vertical-align: bottom;
    }
    .brand_header {
        width: 100%;
        display: block;
        height: 100px;
        background-image: url('../img/icons/white_koneksa_logo.png');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 180px;
    }
    .modalPanel {
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }
    .noPadding {
        padding: 0;
    }
    .pleft100 {
        padding-left: 100px!important;
    }
    .pright100 {
        padding-right: 100px!important;
    }
    .modalPanel .error {
        padding: 1rem;
        width: 100%;
        min-height: 1.5rem;
        overflow: hidden;
        line-height: 1.5rem;
        display: none;
        z-index: 1;
        height: auto;
        top: 0;
        position: relative;
    }
    .panel h3 {
        font-size: 1.2rem;
        text-transform: capitalize;
        font-family: "Open Sans", Arial, sans-serif;
    }
    .panel h2 {
        font-size: 1.4rem;
        line-height: 1.8rem;
        color: #1A2636;
        font-family: "Open Sans", Arial, sans-serif;
    }
    input[type="submit"].register {
        padding: 0.5em 1.2em;
        width: auto;
        line-height: 100%;
        display: block;
        -webkit-appearance: none;
        cursor: pointer;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        border: 0;
    }
    /* Login page - end */
    .mobileHide {
        display: none!important;
    }
    .leftDataPanelContent {
        width:20%;
        min-height:339px;
        height:auto!important;
        display: block;
        overflow: hidden;
        position:relative;
        z-index:3;
    }
    .rightDataPanelContent {
        width:80%;
        height:auto!important;
        display: block;
        overflow: hidden;
        position:relative;
        z-index:2;

    }
    .bgpicSmall {
        background-image: url('../img/home_header.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        width:100%;
        height:300px;
        overflow: hidden;
        display:block;
    }
    .infoCaptionCentered {
        width: 960px;
        overflow: hidden;
        margin: 0 auto 0 auto;
        display: block;
        font-size: 2rem;
        text-align: center;
        height: 300px;
        line-height: 300px;
    }
    .privacypanel {
        width: 90%;
        height: auto;
        margin: 0 5%;
        display: block;
        text-align: justify;
        font-weight: 300;
        font-size: 0.9rem;
        font-family: "Open Sans", Arial, sans-serif;
    }
    .privacypanel ul li {
        margin-bottom: 0.6rem;
        list-style-type: disc;
        font-size: 0.9rem;
    }
    .innerPanel {
        padding: 40px 0;
        height: auto;
        margin: 0 auto;
        width: 100%;
    }
    .innerPanel p {
        height: auto;
        display: block;
        text-align: justify;
        font-weight: 300;
        font-size: 0.9rem;
    }
    .footer {
        width:100%;
        height:200px;
        display: block;
    }
    .footer .caption {
        margin: 0 auto;
        text-align: center;
    }
    .footer .caption h5 {
        display: inline-block;
        font-size:0.8em!important;
        text-align: left;
        position:relative;
        font-weight: 300;
        margin:0 1em 0 0;
    }
    .footer .caption a {
        font-size:0.8em!important;
        display: inline-block;
        font-weight: 300;
        margin-right:1em;
    }
    .panel {
        height: auto;
        display: block;
        overflow: hidden;
        opacity: 0.95;
        border-radius: 3px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        transition: opacity 3s ease-in 0s;
    }
    /** custom menu - needed to prevent dashboard panel from covering menu when expanded **/
    [data-view="compliance-dashboard-view"] .panel {
        opacity: 1;
    }
    /** custom menu end **/
    .panel label.hasError {
        color: #B50000;
    }
    .panel .formSpacer {
        height: auto;
        overflow: hidden;
    }
    .availableSurveys .panel {
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
    }
    .formSpacer .checkboxLabel label {
        padding: 0.25rem 0;
    }
    label.bottom {
        padding: 0.6rem 0 0 0;
    }
    label.none {
        padding: 0;
    }
    label.both {
        padding: 0.6rem 0 0.6rem 0;
    }
    input[type="radio"]:checked {
        background-color: #3c495a;
    }
    /* SHADOW */
    .boxShadow {
        box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.22);
    }
    .offsetPanel {
        z-index: 10;
        opacity: 0.97;
    }
    /* BUTTONS */
    .button {
        padding: 0.4em 1em;
        line-height: 1.6em;
        width: auto;
        display: block;
        cursor: pointer;
        border-radius: 3px;
        -webkit-appearance: none;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        text-decoration: none;
    }
    /* Question Preview */
    .savedQuestion label {
        line-height: normal;
    }
    /* single survey view */
    .panelSurveyChoices {
        max-width: 720px;
        margin: 0 auto;
        height:auto;
        display: block;
        overflow: hidden;
        opacity:0.95;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        transition: opacity 3s ease-in 0s;
    }
    .confirmationPage .panel {
        max-width: 720px;
        margin: 0 auto;
    }
}
/* ipad portrait to ipad landscape */
@media (min-width: 767px) and (max-width: 1024px) {
    /* login page - start */
    .panel label {
        width: 100%;
        font-size: 1rem;
        line-height: 1.2rem;
        padding: 0.1rem 0 0.5rem 0;
        display: block;
    }
    .panel label.email,
    .panel label.password {
        margin-bottom: 0;
    }
    input[type="submit"].loginButton,
    input[type="submit"].logoutButton,
    input[type="submit"].cancelButton {
        height: auto;
    }
    input[type="button"].resetButton {
        height: auto;
    }
    /* login page - end */
}
/* Samsung Tablet E - portrait with 800 */
@media (max-width: 800px) and (min-width: 769px) {
    .main {
        width: 800px;
        height:auto;
        z-index: 1;
        top: 80px;
        position: relative;
    }
    .infoCaptionCentered {
        width: 800px;
        overflow: hidden;
        margin: 0 auto 0 auto;
        display: block;
        font-size: 2rem;
        text-align: center;
        height: 300px;
        line-height: 300px;
    }
    .innerPanel {
        padding: 40px 20px;
        height: auto;
    }
    .innerPanel p {
        height:auto;
        display: block;
        text-align: justify;
        font-weight: 300;
        font-size: 0.9rem;
        font-family: "Open Sans", Arial, sans-serif;
    }
}
@media (max-width: 1024px) {
    .modalContent {
        width: 72%;
        top: 20%;
    }
}
/* mobile width of 666 and less */
@media (max-width: 666px) {
    /* login page - start */
    .noMainTop {
        top: 0;
    }
    .panel h3 {
        font-size:1.2em;
        text-transform: capitalize;
    }
    .panel h2 {
        font-size: 1.6rem;
        line-height: 2rem;
        color: #1A2636;
        font-family: "Open Sans", Arial, sans-serif;
    }
    .brand_header {
        width:100%;
        display: block;
        height:100px;
        background-image:url('../img/icons/white_koneksa_logo.png');
        background-repeat:  no-repeat;
        background-position: center center;
        background-size: 190px;
    }
    #selectLanguages {
        width: 16%;
    }
    .panel label {
        width: 100%;
        font-size: 1rem;
        padding: 0;
        display: block;
        color: #1A2636;
        line-height: 1.2rem;
        font-family: "Open Sans", Arial, sans-serif;
    }
    .panel label.email,
    .panel label.password {
        margin-bottom: 0;
        padding: 0.1rem 0 0.5rem 0;
    }
    input[type="submit"].loginButton,
    input[type="submit"].logoutButton,
    input[type="submit"].cancelButton {
        height: auto;
    }
    input[type="button"].resetButton {
        height: auto;
    }
    /* login page - end */
    .offsetPanel {
        border: 0;
    }
    .noPadding {
        padding: 0;
    }
    .desktopHide {
        display: none;
    }
    .nav {
        display: none;
    }
    .fullNav {
        display: none;
    }
    .noBg {
        background-color:#fff;
    }
    .profile {
        margin:0 auto;
    }
    .leftNav {
        display: none;
    }
    .footer .caption a {
        font-size: 0.8rem;
        text-align: left;
        display: inline-block;
        font-weight: 300;
        margin-right: 1em;
    }
    .bgpicSmall {
        background-image: url('../img/home_header.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        width:100%;
        overflow: hidden;
        display:block;
    }
    .infoCaptionCentered {
        width: 100%;
        overflow: hidden;
        margin: 0 auto 0 auto;
        display: block;
        font-size: 2rem;
        text-align: center;
        height: 150px;
        line-height: 150px;
    }
    .kh_compare {
        width: 100%;
        height: 100px;
        display: block;
        background-image: url('../img/img_logo2.png');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: auto 100%;
    }
    .innerPanel {
        padding: 40px 0;
        overflow: hidden;
        height: auto;
        margin: 0 5%;
    }
    .innerPanel p {
        height:auto;
        display: block;
        text-align: justify;
        font-weight: 300;
        font-size: 0.9rem;
        font-family: "Open Sans", Arial, sans-serif;
    }
    .privacypanel ul li {
        margin-bottom: 0.6rem;
        list-style-type: disc;
        font-size: 0.9rem;
        margin-left: 5%;
    }
    .footer {
        width:100%;
        height:auto!important;
        overflow: hidden;
        display: block;
    }
    .footer .caption {
        margin: 0 auto;
        text-align: center;
    }
    .footer .caption h5 {
        display: inline-block;
        font-size:0.8em!important;
        text-align: left;
        position:relative;
        font-weight: 300;
        margin:0;
    }
    .panel {
        width: 100%;
        height: auto;
        display: block;
        clear: both;
        overflow: hidden;
        opacity: 0.95;
        padding: 1rem;
    }
    .panel .formSpacer {
        padding: 1.2rem;
        height: auto;
        overflow: hidden;
        clear: both;
    }
    /* NOT SUPPORTED DASH */
    .mobileIcon {
        text-align: center;
        font-size: 50px;
        vertical-align: bottom;
    }
    .accessMessage {
        font-size: 1.5em;
    }
    .modalContent {
        width: 85%;
        top: 5%;
    }
    .modalContent.notification {
        width: 80%;
    }
    .button {
        line-height: 2rem;
        padding: 0.4em 2em;
        height: 3em;
        font-family: "Open Sans", Arial, sans-serif;
        font-weight: bold;
        display: block;
        -webkit-appearance: none;
        cursor: pointer;
        text-decoration: none;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        width: 10em;
        margin: 0;
    }
    .completeSurvey {
        margin-left: auto;
        margin-right: auto;
    }
    .availableSurveys {
        font-size: 16px !important;
    }
    .dataNav {
        margin: 0;
        width: auto;
        height: auto;
    }
    .panel h4 {
        margin-bottom: 0;
    }
    .smallButton {
        max-width: none;
        width: 100%;
    }
    .programMetric {
        width:48%;
        padding:1em 0;
        height: 8.5rem;
    }
    .halfPanel {
        width: 100%;
        display: block;
        overflow: hidden;
        border-top: 1px solid #bebebe;
    }
    .dataNav .toggleButton {
        padding: 0.3rem 0.7rem;
    }
    .noMainTop {
        top: 0;
    }
    .completeSurvey {
        display: block;
    }
    .questionOptions label {
        text-transform: none;
    }
    .scalequestions .scaleButton {
        -webkit-flex: 1 0 3%;
        -moz-flex: 1 0 3%;
        -ms-flex-: 1 0 3%;
        box-sizing: border-box;
        padding: 0px;
        padding-top: 14px;
        height: 50px;
    }
    .scaleIndicators {
        width: 90%;
        height: 30px;
    }
    .scaleLine {
        width: 0%;
    }
    #displayMiddle, #displayLast, #displayFirst {
        width: 25%;
    }
    #displayLast {
        text-align: right;
    }
    .scaleLine .Middle {
        height: 100px;
    }
    #displayMiddle {
        margin-top: 75px;
    }
}
/* ----------- up to iPad mini ----------- */
/* Portrait and Landscape */
@media only screen
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
    /* mobile subject menu */
    .subjectMenu {
        width: 300px;
    }
    .subjectMenu .sideMenuItem {
        font-size: 1rem;
        width: 300px;
    }
}
/* ----------- up to iPad 1 and 2 ----------- */
/* Portrait and Landscape */
@media only screen
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
    /* mobile subject menu */
    .subjectMenu {
        width: 300px;
    }
    .subjectMenu .sideMenuItem {
        font-size: 1rem;
        width: 300px;
    }
    .subjectBurgerIcon {
        padding: 1rem 1.5rem;
    }
    .panel h2 {
        font-size: 1.6rem;
        line-height: 2rem;
        color: #1A2636;
        font-family: "Open Sans", Arial, sans-serif;
    }
}
/* ----------- up to iPad 3 and 4 ----------- */
/* Portrait and Landscape */
@media only screen
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
    /* mobile subject menu */
    .subjectMenu {
        width: 300px;
    }
    .subjectMenu .sideMenuItem {
        font-size: 1rem;
        width: 300px;
    }
    .subjectBurgerIcon {
        padding: 1rem 1.5rem;
    }
    .panel h2 {
        font-size: 1.6rem;
        line-height: 2rem;
        color: #1A2636;
        font-family: "Open Sans", Arial, sans-serif;
    }
}
/* ----------- Others ----------- */
@media (max-device-width: 1024px) {
    /* nav bar */
    h4.subjectMenuTitle {
        color: #FFFFFF;
        display: inline-block;
        width: calc(100% - 124px);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-weight: 200;
        font-family: "Open Sans", Arial, sans-serif;
        font-size: 1.2rem;
        margin: 0;
        padding: 1.2rem;
    }
    /* mobile subject menu */
    .subjectMenu {
        width: 300px;
    }
    .subjectMenu .sideMenuItem {
        font-size: 1rem;
        width: 300px;
    }
    .panel h2 {
        font-size: 1.6rem;
        line-height: 2rem;
        color: #1A2636;
        font-family: "Open Sans", Arial, sans-serif;
    }
}