/* Miligram overrides */
@font-face {
    font-family: "Open Sans", sans-serif;
    color: #404041;
    font-weight: 100;
    font-style: normal;
}
a {
    font-family: "Open Sans", sans-serif;
    color: #404041;
}
p {
    margin-bottom: 22px !important;
}
li {
    list-style: circle inside;
    margin-bottom: 0rem;
}
ol, ul {
    margin-bottom: 2rem;
}

/* custom */
.large-block {
    height: 42em;
}
.question {
    margin: 10px 0px 40px 0px;
}
.questionnumber {
    font-weight: 100;
    color: #ccc;
}
.questionText {
    font-weight: 600;
    margin: 0px 0px 10px 0px;
}
.questionText > a {
    font-size: small;
    font-weight: 200;
    line-height: 90%;
    text-decoration: underline;
    color: #3344dd;
}
.questionInstruction {
    font-size: 1.2rem;
    color: #333;
    font-style: italic;
}
.checkbox input, .radiobutton input, .truefalse input {
    margin: 10px 10px;
}
.checkbox label, .radiobutton label, .truefalse label {
    font-weight: 100;
    text-indent: -35px;
    padding-left: 35px;
    font-size: inherit;
}
.auxcontent {
    margin: 20px 0px 0px 0px;
    font-style: italic;
    font-size: 1.5rem;
}

/* Utility */
.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.survey-controls-container {
    position: fixed;
    bottom: 0px;
    height: 60px;
    width: 100%;
    background-color:#fff;
    padding:10px;
    left:0px;
    border-top:3px solid #ccc;
}

.survey-progress-bar {
    position: fixed;
    top: 76px;
    height:4px;
    left:0px;
    width:100%;
    z-index:10000;
}
.survey-progress-bar-frame {
    background-color:#eee;
    height:6px;
}
#survey-progress {
    float:left;
    background-color: #44cf69;
    height:6px;
    width: 0%;
}

/* Main */
body {
    padding: 0px 0;
    font-family: "Open Sans", sans-serif;
    font-weight: 100;
    color:#333;
}
header {
    margin-bottom: 0px;
    box-shadow: 0px 0px 6px #000;
    position: fixed;
    top:0px;
    left:0px;
    height: 80px;
    width: 100%;
    z-index:10000;
    background-color: #fff;
}
header > .container {
    height: 80px;
}
main {
    margin-top: 80px;  
}
header > .container > img {
    height: 60px;
    float: left;
    margin: 10px 10px;
}
.dashlink, .dashlink:hover, .dashlink:focus {
    font-size: 1.6rem;
    color: #fff;
    text-decoration: none;
    padding: 0;    
    display: block;
}
.adminDashLink, .adminDashLink:hover, .adminDashLink:focus {
    font-size: 1.5rem;
    color: #333;
    text-decoration: none;
}
.adminDashLink > .fas {
    color: #666;
}
.dashlink > .fas {
    color: #fff;
}
.headerNavImg {
    margin: 0;
    padding: 0;
}
.headerNavImg a img {
    height: auto;
    width: auto;
    max-height: 80px;
    float: left;
}
.footerNavLink {
    background-color: transparent;
}
.footerNavLink .dashlink, .footerNavLink .dashlink:hover, .footerNavLink .dashlink:focus {
    font-size: 1.1em;
    color: #fff;
    text-decoration: none;
}

main h4 {
    margin-top:20px;
}
main h3 {
}
.content {
    padding: none;
    background: #ffffff;
}
.actions a {
    font-weight: bold;
    padding: 0 0.4rem;
}
th {
    white-space: nowrap;
}
.adminDash, .userDash {
    min-height: 500px;
}
.dashboard-tile {
    float: left;
    margin: 10px 10px 10px 0px;
    width: 100%;
    background: #eee;
    border: 0.1rem solid #ddd;
    border-radius: 0.5rem;
}
.dashboard-tile .tile-title {
    margin: 10px;
}
.dashboard-tile .tile-item {
    padding: 10px;
    margin: 10px;
    background-color: #e0e0e0;
    border-radius: 0.5rem;
}
.dashboard-tile .tile-item:hover {
    background-color: #fff;
}
/* milligram overrides */
.float-right {
    margin-left: 10px;
}
.container {
    padding: 0 1.0rem;
}
label {
    margin-bottom: 0rem;
    font-size: 1.7rem;
}
legend {
    font-size: 2.2rem;
    margin-bottom: 1rem;
}
input[type='email'], input[type='number'], input[type='password'], input[type='search'], input[type='tel'], input[type='text'], input[type='url'], input[type='color'], input[type='date'], input[type='month'], input[type='week'], input[type='datetime'], input[type='datetime-local'], input:not([type]), textarea, select {
    background-color: transparent;
    border: 0.1rem solid #d1d1d1;
    border-radius: .4rem;
    box-shadow: none;
    box-sizing: inherit;
    height: 2.6rem;
    padding: 0.3rem;
    width: 100%;
}
.container .form, .container .view {
    margin-top: 30px;
}
.container .index {
    margin-top: 30px;
}
td, th {
    padding: 0.4rem;
    min-height: 4rem;
    
}
/* Side nav */
.side-nav {
    float:left;
    margin-top:30px;
    width:90%;
    border-right: 1px solid #BBBBBB;
}
.side-nav h4 {
    display: none;
}
.side-nav-item {
    display: block;
    padding: 0.5rem 0.6rem;
    background-color: #eee;
}
.side-nav-item:hover {
    background-color: #e0e0e0;
}
.content table {
    margin-bottom: 14px;
}

/* View action */
.view.content .text {
    margin-top: 1.2rem;
}
.related {
    margin-top: 2rem;
}

/* Flash messages */
.message {
    padding: 1rem;

    background: #eff8ff;
    color: #2779bd;

    border-color: #6cb2eb;
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    margin-bottom: 2rem;
    
    /*width: fit-content;*/
}
.message.hidden {
    display: none;
}
.message.success {
    background: #e3fcec;
    color: #1f9d55;
    border-color: #51d88a;
}
.message.error {
    background: #fcebea;
    color: #cc1f1a;
    border-color: #ef5753;
}

/* Forms */
.input.radio,
.input.checkbox {
    margin-bottom: 2.0rem;
}
.input.radio input,
.input.checkbox input {
    margin: 0;
}
.input.radio label,
.input.checkbox label {
    margin: 0;
    /*display: flex;*/
    align-items: center;
}
.input.radio label > input,
.input.checkbox label > input {
    margin-right: 1.0rem;
}
.input.radio label:first-of-type {
    margin-bottom: 2.0rem;
}

/* Paginator */
.paginator {
    text-align: right;
}
.pagination {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}
.pagination li {
    margin: 0 0.5rem;
}
.prev.disabled a,
.next.disabled a {
    cursor: not-allowed;
    color: #606c76;
}
.asc:after {
    content: " \2193";
}
.desc:after {
    content: " \2191";
}


/* Error */
.error-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100vh;
    justify-content: center;
}

@media screen and (max-width: 890px) {
    header > .container > img, .top-nav img {
        height: 40px;
    }
    header > .container {
        height: 60px;
    }
    header {
        height: 60px;
        opacity: 1;
    }
    .headerNavImg a img {
        max-height: 60px;
    }
    main {
        margin-top: 60px;
        min-height: calc(100vh - 266px);
    }
    .container .form, .container .view {
        margin-top: 10px;
    }
    .container .index {
        margin-top: 20px;
    }
    .survey-progress-bar {
        top: 60px;
    }
}
@media screen and (max-width: 640px) {
    main {
        min-height: calc(100vh - 410px);
    }
    footer .bottom-nav .column {
        text-align: center!important;
    }
    .side-nav {
        display:none;
    }
    .top-nav {
        margin: 0 auto;
    }
    .side-nav {
        margin-bottom: 1rem;
    }
    .heading {
        margin-bottom: 1rem;
    }
    .side-nav-item {
        display: inline;
        margin: 0 1.5rem 0 0;
    }
    .asc:after {
        content: " \2192";
    }
    .desc:after {
        content: " \2190";
    }
    .bottom-nav .column {
        margin-bottom: 20px;
    }
    .footerNavLink {
        margin-bottom: 6px;
    }
    .top-nav-links a {
        font-size: 1rem;
    }
}

.loginForm {
    width: 300px;
    margin: 30px auto 200px auto;
}
.regForm {
    width: 80%;
    margin: 30px auto 200px auto;
}

.homeLsts {
    list-style-type: circle !important;
    list-style-position: outside !important;
}
.bottom-nav {
    min-height: 100px;
    font-size: 0.8em;
    text-align: center;
    width: 100%;
    color: #fff;
    background: #2d3032;
}
.bottom-nav .column {
    text-align: left;
}
.bottom-nav .container {
    padding-top: 30px;
    padding-bottom: 30px;
    font-family: "Open Sans", sans-serif;
}
.bottom-nav p {
    margin-bottom: 22px !important;
}
.bottom-nav img {
    
    max-height: 100px;
}
.bottom-nav-copyright {
    padding-top: 20px;
}
.dash-block {
    margin: 0px 0px;
    text-align: left;
}
.start-block {
    margin: 40px 0px;
    text-align: left;
}
.start-block-heading {
    margin:40px 0px 20px 0px;
    padding: 2px 10px;
    border-bottom: 1px solid #333;
    background-color: #eee;
}
.downloadLinkContainer {
    text-align: center;
    margin: 40px 0px;
}
.downloadLinkContainer a, .downloadLinkContainer a:hover, .downloadLinkContainer a:focus {
    color: #333333;
    text-decoration: none;
    border: none;
}
.reportIntro {
    margin-bottom: 30px;
}
.domainTitle {
    font-size: 1.5rem;
    font-weight: 600;
    border-top: 1px solid #eeeeee;
    background-color: #eee;
    margin-top: 30px;
    margin-bottom: 20px;
    padding: 4px;
}
.domainTitleScoreReport {
    font-size: 1.5rem;
    font-weight: 600;
    border-top: 1px solid #666;
    background-color: #eee;
    margin-bottom: 20px;
    margin-top: 15px;
    clear: both;
    padding: 4px;
}
.domainContent {
    margin-bottom: 20px;
}
.domianScore {
    font-size: 1.2em;
    font-weight: 600;
    margin-top: 10px;
    margin-bottom: 20px;
}
.questionReportContainer {
    padding: 4px;
}
.questionReportContainer:nth-child(even) {background: #eee}
.questionReportContainer:nth-child(odd) {background: #fff}
.questionReport {
    font-size: 1.5rem;
    font-weight: 400;
    display: inline-block;
    width:80%;
}
.questionReport { font-size: 1.5rem;font-weight: 400;display: inline-block;width:80%;}
.questionScore {font-size: 1.5rem;font-weight: 600;float: right;width:20%;text-align: center;}
.questionAnswer {font-size: 1.3rem;clear:both;}
.questionAnswer i {margin-left: 10px;margin-right: 5px;font-size: 1rem;}
.questionScore {
    font-size: 1.5rem;
    font-weight: 600;
    float: right;
    width:20%;
    text-align: center;
}
.questionAnswer {
    font-size: 1.3rem;
    clear:both;
}
.questionAnswer i {
    margin-left: 10px;
    margin-right: 5px;
    font-size: 1rem;
}
.reportHeading {
    font-size: 1.5rem;
    font-weight: 600;
}
.reportPartBlock {
    margin-top: 30px;
    margin-bottom: 30px;
}
.matrix_heading {
    text-align: center;
}
.matrix_label {
    
}
.matrix_checkbox {
    text-align: center;
}
.long_answer > input {
    height:40px;
}
hr {
    margin-top: 0em !important;
    margin-bottom: 0.8em !important;
}
.option_parent_id { display: none; }
.sc-gaugeset { width: 200px; height: 190px; display:inline-block; margin:7px }
.sc-gaugetitle { text-align: center; font-weight: 600; vertical-align: top; height: 55px }
.sc-gauge  { width:200px; height:200px;  }
.sc-background { position:relative; height:100px; margin-bottom:0px; background-color:#ccc; border-radius:150px 150px 0 0; overflow:hidden; text-align:center }
.sc-mask { position:absolute; top:20px; right:20px; left:20px; height:80px; background-color:#eee; border-radius:150px 150px 0 0 }
.sc-percentage { position:absolute; top:100px; left:-200%; width:400%; height:400%; margin-left:100px; }
.sc-low {background-color:#ffc000;}
.sc-med {background-color: #ffff00}
.sc-high {background-color: #92d14f}
.sc-percentage {  transform-origin:top center; }
.sc-min { float:left;color:#999 }
.sc-max { float:right;color:#999 }
.sc-value { position:absolute; top:35%; left:0; width:100%;  font-size:48px; font-weight:700 }
.total-bar-set {
    width: 80%;
    margin-left: 10%;
    margin-bottom: 20px;
    height:45px;
    clear: both;
    background-color: #eee;
}
.total-bar {
    height: 30px;
    background-color: green;
}
.total-color {
    
}
.total-red {
    float:left;
    background-color: #CC0000;
    height: 15px;
    width: 33%
}
.total-orange {
    float:left;
    background-color: orange;
    height: 15px;
    width: 33%;
}
.total-green {
    float:left;
    background-color: lightgreen;
    height: 15px;
    width: 34%;
}

.guage-sets {
    width: 100%;
}
.guage-break {
    width:1px;
    height:1px;
    display: inline-block;
}
.guage-title {
    font-size: 0.9em;
    text-align: center;
    height: 45px;
    font-weight:bold;
}
.guage-figures {
    text-align: center;
    font-size: 2em;
    line-height: 0em;
    padding-bottom: 1.5em;
}
.guage-set {
    width: 215px;
    display: inline-block;
}
.guage-set > img {
    width: 100%;
}

/* new bar */
.bar-chart, .bar-chart > td {
    padding:0px;
    margin: 0px;
    box-sizing: content-box;
}
td, td {
    border-bottom: none !important;
}
.bar-legend-cell {
    width: 26.6%;
}
.bar-total-container {
    width: 100%;
    margin-bottom: 20px;
    clear: both;
    height: 80px;
}
.bar-total-set {
    float:left;
    vertical-align: top;
    width: 80%;
}
.bar-total-values {
    font-size: 2rem;
    font-weight: bold;
}
.bar-total-zero {
    text-align: right;
}
.bar-total-max {
    padding-left: 9px;
}
.bar-total {
    width:35px;
    height:45px;
    text-align: center;
    font-weight: bold;
}
.bar-total > img {
    width: 35px;
}
.bar-total-legend {
    
}
.bar-total-red {
    background-color: #ebc3c3;
    height: 20px;
    text-align: center;
    padding: 5px;
    width: 100%
}
.bar-total-orange {
    background-color: #ffeec7;
    height: 20px;
    text-align: center;
    padding: 5px;
    width: 100%
}
.bar-total-green {
    background-color: #c7ffcd;
    height: 20px;
    text-align: center;
    padding: 5px;
    width: 100%
}
/* new bar */


/* new gauges */
.gauge-sets {
    width: 100%;
}
.gauge-break {
    width:1px;
    height:1px;
    display: inline-block;
}
.gauge-title {
    font-size: 0.9em;
    text-align: center;
    height: 45px;
    font-weight:bold;
}
.gauge-figures {
    text-align: center;
    font-size: 2em;
    line-height: 0em;
    padding-bottom: 1.5em;
    margin-top: -25px;
}
.gauge-set {
    width: 212px;
    display: inline-block;
}
.gauge-set > img {
    width: 100%;
}
.w-100{
    width: 100%;
}
/* Start Matrix Tables*/
table.matrix .matrix-vert {
    display: none;
}
@media screen and (max-width: 640px){
    table.matrix {
      display: block;
    }
    table.matrix thead {
      display: none;
    }
    table.matrix tbody, 
    table.matrix tr,
    table.matrix td {
      display: block;
      margin: 0;
      padding: 0;
      white-space: normal;
    }
    table.matrix tbody tr td:first-child {
      margin: 10px 0 5px !important;
      border-top: none;
    }
    table.matrix tbody tr td:not(:first-child) {
      float: left;
      width: 100%;
    }
    table.matrix tbody input[type=radio],
    table.matrix tbody input[type=checkbox] {
      margin: 0 0 0 10px !important
    }
    table.matrix .matrix-vert {
      display: inline;
      padding-left: 10px;
    }
    table.matrix td, th {
        padding: 0;
    }
    table.matrix tbody tr td:not(:first-child) {
        float: none;
        margin-top: -7px;
    }
    table.matrix label {
        font-weight:inherit;
    }
    table.matrix .matrix_checkbox{
        text-align: left; 
        display : flex;
        align-items : center;
    }
    table.matrix .matrix_label{
        font-weight: bold;
        display : flex;
        align-items : center;
    }
}
/* End Matrix Tables */
/* Begin Navbar */
.header.main-nav {
    background-color: #fff;
    box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, .1);
    position: fixed;
    width: 100%;
    z-index: 3;
}
.header.main-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    background-color: #fff;
}
.header.main-nav li.nav-list-item a {
    display: block;
    padding: 10px 20px 10px 20px;
    text-decoration: none;
    color: #333;    
    font-size: 1.2em;
}
.header.main-nav li.nav-list-btn {
    margin: 0 20px 0 20px;
}
.header.main-nav li.nav-list-item a:hover,
.header.main-nav .menu-btn:hover {
    color: #000000;
}
.header.main-nav .logo {
    height: 100%;
    display: block;
    float: left;
    font-size: 2em;
    padding: 5px;
    text-decoration: none;
}
.header.main-nav .logo img {
    max-height: 100%;
}
.header.main-nav .menu {
    clear: both;
    max-height: 0;
    transition: max-height .2s ease-out;
    border-bottom: 1px solid #ccc;
}
.header.main-nav .menu-icon {
    cursor: pointer;
    float: right;
    padding: 28px 20px;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
}
.header.main-nav .menu-icon .navicon {
    background: #333;
    display: block;
    height: 2px;
    position: relative;
    transition: background .2s ease-out;
    width: 18px;
}
.header.main-nav .menu-icon .navicon:before,
.header.main-nav .menu-icon .navicon:after {
    background: #333;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%;
}
.header.main-nav .menu-icon .navicon:before {
    top: 5px;
}
.header.main-nav .menu-icon .navicon:after {
    top: -5px;
}
.header.main-nav .menu-btn {
    display: none;
}
.header.main-nav .menu-btn:checked~.menu {
    max-height: 340px;
}
.header.main-nav .menu-btn:checked~.menu-icon .navicon {
    background: transparent;
}
.header.main-nav .menu-btn:checked~.menu-icon .navicon:before {
    transform: rotate(-45deg);
}
.header.main-nav .menu-btn:checked~.menu-icon .navicon:after {
    transform: rotate(45deg);
}
.header.main-nav .menu-btn:checked~.menu-icon:not(.steps) .navicon:before,
.header.main-nav .menu-btn:checked~.menu-icon:not(.steps) .navicon:after {
    top: 0;
}
header.main-nav>.container {
    padding-left: 0;
    padding-right: 0;
}
.header.main-nav li {
    list-style: none;
}
.users.form {
    width: 100%;
    display: inline-block;
    margin: 0;
}
@media (min-width: 891px) {
    main {
        min-height: calc(100vh - 286px);
    }
    .header.main-nav li.nav-list-item {
        float: left;
    }
    .header.main-nav .logo {
        padding: 10px 0 10px 0;
    }
    .header.main-nav li.nav-list-item a {
        padding: 24px;
    }
    .header.main-nav li.nav-list-btn {
        margin: 0 5px 0 20px;
    }
    .header.main-nav .menu {
        clear: none;
        float: right;
        max-height: none;
        display: flex;
        align-items: center;
        border-bottom: none;
    }
    .header.main-nav .menu-icon {
        display: none;
    }
    .header.main-nav li.nav-list-item {
        list-style: none;
    }
}
/* End Navbar */
/* Start Buttons */
.button {
    border-radius: 50px;
}
main .button, main button, main input[type='button'], main input[type='reset'], main input[type='submit'] {
    background-color: green;
    border: 0.1rem solid green;
    border-radius: 4rem;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 1.1rem;
    font-weight: 700;
    height: 3.8rem;
    letter-spacing: .1rem;
    line-height: 3.8rem;
    padding: 0 3.0rem;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}
.button:hover {
	background-color: #00AD00;
	border: 0.1rem solid #00AD00;
}
.addButton {
    background-color: green;
    border: none;
}
.cancelButton {
    background-color: #d33c43 !important;
    border: 0.1rem solid #d33c43 !important;
}
.continueButton {
	background-color: green !important;
}
.continueButton:hover {
	background-color: #00AD00  !important;
}
.newButton {
	background-color: #0071BC !important;
}
.startButton {
    margin: 40px 0;
    text-align: center;
}
.start-block a, .start-block a:hover, .start-block a:focus, .startButton a, .startButton a:hover, .startButton a:focus {
    background-color: #f0982e;
    padding: 10px 24px;
    border-radius: 20px;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}
.btn, .btn:hover, .btn:focus, .btn:active {
    border: unset;
    cursor: pointer;
    height: unset;
    letter-spacing: unset;
    text-transform: unset;
    font-weight: unset;
    margin: unset;
    display: inline-block;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    -webkit-user-select: none;
    text-decoration: none;
    margin: 10px 0 10px 0;
}
.primaryButton, .primaryButton:hover, .primaryButton:focus, .primaryButton:active  {
    padding: 8px 25px;
    background-color: #0071BC;
    border-radius: 20px;
    font-size: 1.6rem;
    line-height: 2rem;  
    color: white;
}
.secondaryButton, .secondaryButton:hover, .secondaryButton:focus, .secondaryButton:active {
    padding: 8px 25px;
    background-color: #686777;
    border-radius: 20px;
    font-size: 1.6rem;
    line-height: 2rem;  
    color: white;
}
/* End Buttons */