/*
cd to public_html/css/ and use 'sass --watch .' to start watching directory for changes
*/

@-webkit-keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        -ms-transform: rotate(360deg);
    }
}

@keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        -ms-transform: rotate(360deg);
    }
}

*, body {
    margin: 0;
    padding: 0;
    border: none;
    box-sizing: border-box; /*font-family: 'Cabin', sans-serif;*/
}

html, body {
    height: 100%;
}

/* overflow is to prevent modal from causing screen jump */
body {
    font-family: 'Lato', sans-serif;
    font-size: 1em; /*background: #ebeff4;*/
    color: #424242;
}

img {
    max-width: 100%;
}

a {
    color: rgba(34, 48, 95, 0.7);
    text-decoration: none;
}

a:hover {
    color: rgb(34, 48, 95);
}

h1, h2, h3, h4, h5, h6 { /*font-family: "Arial Black", sans-serif;*/
    font-family: 'Lato', sans-serif;
}

h1 {
}

/*h2 { text-transform: uppercase; }*/
h3 {
    font-size: 1em;
    margin-top: 1em;
}

h4 {
    font-size: 0.8em;
    margin-top: 1em;
}

h5 {
}

h6 {
}

p {
    margin: 1em 0;
}

#page-wrapper {
    width: 100%;
    float: left;
}

#header {
    -js-display: flex;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*background-color: #3D7E2E; !*background: rgb(34, 48, 95);*!*/
    min-height: 75px;
}

#body {
    width: 100%;
    float: left;
    clear: both;
    min-height: calc(100vh - 75px - 60px);
    padding: 2em 0 4em;
}

#footer {
    width: 100%;
    clear: both;
}

#notices {
    width: 100%;
    padding: 1%;
    float: left;
    box-sizing: border-box;
}

#notices .notice {
    width: 100%;
    padding: 2%;
    float: left;
    box-sizing: border-box;
}

#notices .notice-title {
    font-weight: bold;
    display: inline-block;
    font-size: 1.1em;
    margin-right: 0.5em;
}

#notices .notice-message {
    display: inline-block;
}

#notices .notice-success {
    background: lightgreen;
    color: darkgreen;
}

#notices .notice-error {
    background: lightpink;
    color: darkred;
}

#notices .notice-warning {
    background: #FDB824;
    color: white;
}

#notices .notice-info {
    background: lightblue;
    color: darkblue;
}

.clear {
    clear: both;
}

.left {
    float: left;
}

.right {
    float: right;
}

.centered {
    text-align: center;
}

.rel {
    position: relative;
}

.block {
    display: block;
}

.pad {
    padding: 0.5em;
    float: left;
}

.rel {
    position: absolute;
}

.disabled {
    pointer-events: none;
}

.display-none {
    display: none !important;
}

.hidden {
    visibility: hidden;
}

.column {
    width: 33.3333%;
    float: left;
    margin: 0 auto;
}

.column.sixth {
    width: 16.6666%;
}

.column.fifth {
    width: 20%;
}

.column.quarter {
    width: 25%;
}

.column.double {
    width: 66.6666%
}

.column.half {
    width: 50%;
}

.column.three-quarter {
    width: 75%;
}

.column.full {
    width: 100%;
}

.column img {
    max-width: 100%;
}

.column.righted {
    text-align: right;
}

.height-50 {
    min-height: 50vh
}

.height-100 {
    min-height: 100vh
}

.page-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.3em 0.5em;
}

.tipso + .tipso {
    margin-left: 4px;
}

/*----- Form Styling -----*/
form {
    margin: 0 auto;
    width: 100%; /*padding: 20px 12px 10px 20px;*/
}

form li {
    padding: 0;
    display: block;
    list-style: none;
    margin: 10px 0 0 0;
}

form label {
    padding: 7px 7px 5px;
    display: block;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border: 1px solid #BEBEBE;
    margin: 0 0 5px;
    width: 70%;
}

input[type=search],
form input[type=text],
form input[type=password],
form input[type=date],
form input[type=datetime],
form input[type=number],
form input[type=search],
form input[type=time],
form input[type=url],
form input[type=email],
form input[type=file],
form textarea,
select {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border: 1px solid #BEBEBE;
    padding: 7px;
    margin: 0;
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
    outline: none;
    width: 70%;
}

form input[type=file] {
    padding: 3px 7px;
}

form input[type=file]:disabled {
    background-color: #ebeff4;
}

select {
    padding: 7px 7px 5px;
}

option {
    padding: 0 5px;
}

form input[type=text]:focus,
form input[type=password]:focus,
form input[type=date]:focus,
form input[type=datetime]:focus,
form input[type=number]:focus,
form input[type=search]:focus,
form input[type=time]:focus,
form input[type=url]:focus,
form input[type=email]:focus,
form input[type=file]:focus,
form textarea:focus,
    /*form select:focus{ -moz-box-shadow: 0 0 8px #88D5E9; -webkit-box-shadow: 0 0 8px #88D5E9; box-shadow: 0 0 8px #88D5E9; border: 1px solid #88D5E9; }*/
.dataTables_filter input:focus, .dataTables_length select:focus,
form select:focus {
    -moz-box-shadow: 0 0 4px #88afd7;
    -webkit-box-shadow: 0 0 4px #88afd7;
    box-shadow: 0 0 4px #88afd7;
    border: 1px solid #88afd7;
}

form .field-divided {
    width: 49%;
}

form .field-long {
    width: 100%;
}

form .field-select {
    width: 100%;
}

form .field-textarea {
    height: 100px;
}

form input[type=submit], form input[type=button] {
    background: #4B99AD;
    padding: 8px 15px 8px 15px;
    border: none;
    color: #fff;
}

form input[type=submit]:hover, form input[type=button]:hover {
    background: #4691A4;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

form .required {
    color: red;
}

.fail {
    background-color: rgba(244, 67, 54, 0.3);
}

.success {
    background-color: rgba(15, 157, 88, 0.3);
}

/*----- Button Styling -----*/
.button {
    text-transform: lowercase;
    font-weight: bold;
    display: inline-block;
    position: relative;
    width: 120px;
    height: 32px;
    line-height: 30px;
    border-radius: 2px;
    font-size: 0.9em;
    background-color: #fff;
    color: #646464;
    cursor: pointer;
    transition: all 0.2s ease, background-position 1ms;
    font-family: 'Lato', sans-serif;
    margin: 2px 0;
}

.button + .button {
    margin-left: 4px;
}

/*.button > paper-ripple { border-radius: 2px; overflow: hidden; }*/
.button.narrow {
    width: 60px;
}

.button.medium {
    width: 90px;
}

.button.gray {
    background-color: #e3e3e3;
}

.button.blue {
    background-color: #41658A;
    color: #fff;
}

.button.green {
    background-color: #3D7E2E;
    color: #fff;
}

.button.red {
    background-color: #f44336;
    color: #fff;
}

.button.orange {
    background-color: rgba(255, 152, 0, 1);
    color: #fff;
}

.button.clear {
    background-color: transparent;
    color: #fff;
}

.button.white {
    background-color: #fff;
    color: #424242;
}

.button.raised {
    transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 0.2s;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}

.button.raised:active {
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2); /*transition-delay: 0s;*/
}

.button:disabled {
    background-color: #ebeff4;
    pointer-events: none;
    cursor: default;
    color: #B4A3AB;
}

/* Icon Button */
.icon-button {
    position: relative;
    display: inline-block;
    width: 56px;
    height: 56px;
}

/* FAB */
.fab {
    position: relative;
    display: inline-block;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    color: #fff;
    overflow: hidden;
    transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 0.2s;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}

.fab.red {
    background-color: #f44336;
}

.fab.blue {
    background-color: #4285f4;
}

.fab.green {
    background-color: #0f9d58;
}

.fab:active {
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2); /*transition-delay: 0s;*/
}

/*.fab > core-icon { margin: 16px; }*/
/*.fab > core-icon::shadow path { fill: #fff; }*/

/* Menu */
.menu {
    display: inline-block;
    width: 180px;
    background-color: #fff;
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
}

.item {
    position: relative;
    height: 48px;
    line-height: 48px;
    color: #646464;
    font-size: 0.9em;
}

.menu.blue > .item {
    color: #4285f4;
}

/* Card, Dialog */
.card, .dialog {
    position: relative;
    display: inline-block;
    width: 300px;
    height: 240px;
    vertical-align: top;
    background-color: #fff;
    box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24);
}

.dialog {
    box-sizing: border-box;
    padding: 16px;
}

.dialog > .content {
    height: 170px;
    font-size: 0.9em;
}

.dialog > .content > .title {
    font-size: 1.3em;
}

.dialog > .button {
    width: 90px;
    float: right;
}

.card.image {
    background: url(http://lorempixel.com/300/240/nature/);
    color: #fff;
}

/* Grid List */
.grid-list {
    min-height: 60px;
    padding: 8px;
    color: #FFFFFF;
    background-color: #607d8b;
}

.grid-list + .grid-list {
    margin-top: 4px;
}

.grid-list.collection {
    background-color: rgba(15, 157, 88, 0.8);
}

.grid-list.question {
    background-color: rgba(66, 133, 244, 0.8);
}

.grid-list.break {
    background-color: rgba(255, 152, 0, 0.7);
}

.grid-list.answer {
    background-color: rgba(255, 87, 34, 0.8);
}

.grid-list.special {
    background-color: rgba(233, 30, 99, 0.7);
}

.grid-list > .text-container {
    width: 75%;
    display: inline-block;
    vertical-align: middle;
}

.grid-list > .text-container > .title {
    font-size: 16px;
    text-transform: uppercase;
}

.grid-list > .text-container > .sub-title {
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.grid-list > .text-container > .sub-title > .expand {
    display: inline-block;
    margin: 0 8px 0 8px;
}

.grid-list > .text-container > .sub-title > .expand > i {
    font-size: 1.5em;
    vertical-align: middle;
}

.grid-list > .action {
    width: 20%;
    display: inline-block;
    text-align: right;
}

.grid-list > .action > i {
    font-size: 24px;
}

.grid-list > .expanded {
    display: none;
    padding: 8px 0;
}

.grid-list > .expanded > div + div {
    margin: 2px 0 0 0;
}

/* Misc */
.center {
    text-align: center;
}

.label {
    padding: 0 16px;
}

.label-blue {
    color: #4285f4;
}

.label-red {
    color: #f44336;
}

.print-instead {
    display: none;
}

/* Reordering */
/*body.dragging, body.dragging * { cursor: move !important; }*/

.dragged {
    position: absolute;
    opacity: 0.5;
    z-index: 2000;
}

ol#survey-object-list li.placeholder {
    position: relative; /** More li styles **/
}

ol#survey-object-list li.placeholder:before {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    margin-top: -5px;
    left: -10px;
    top: 0;
    border: 10px solid transparent;
    border-left-color: #e91e63;
    border-right: none;
}

/* Change the cursor for fa icons to look 'click-able' */
.fa {
    cursor: pointer;
}

/* Data Tables */
.dataTables_length, .dataTables_filter {
    width: 50%;
}

.dataTables_length select {
    max-width: 6em;
    margin: 0 0.2em;
}

.dataTables_scrollHeadInner, .display.dataTable.no-footer {
    width: 100% !important;
}

.dataTable tr.row-disabled {
    background-color: rgba(244, 67, 54, 0.2) !important;
}

.dataTable td.buttons {
    text-align: center;
}

/*      Page Specific CSS    */
/*----- Header --------------*/
#header {
}

.header-title {
    /*font-size: 2.5em;*/
    color: #fff; /*font-weight: bold;*/ /*padding: 1em;*/ /*position: relative; top: 10px; left: 60px;*/ /*text-transform: uppercase;*/
    font-family: 'Lato', sans-serif;
}

.header-title a {
    text-decoration: none;
    color: #fff;
}

/*.header-nav { position: relative; top: 20px; right: 20px; }*/
.header-left, .header-right {
    margin: 0 3em;
}

.header-left img {
    background-color: #fff;
    border-radius: 12px;
    /*border: 1px solid #00AF52;*/
    height: 100px;
    margin: 1rem;
    padding: 2px 0 0 0;
    /*max-height: 60px; }*/
}

.header-fail {
    color: rgb(50, 98, 149);
}

.header-safe {
    color: #fff;
    font-weight: bolder;
}

.header-right {
    -js-display: flex;
    display: flex;
    justify-content: space-between;
    align-content: center;
}

.header-right .header-nav-button {
    font-size: 1.5em;
    width: auto;
    width: initial;
    margin: 0 0.25em;
}

/* duplicated width for IE*/
.header-nav .nav-selected {
    background-color: transparent; /*color: #4f88c4;*/
    color: #202020;
}

/*----- Footer --------------*/
#footer {
    position: relative;
    height: 60px;
    /*background-color: #606060;*/
}

/*.footer-circle { position: absolute; left: 50%; transform:translate(-50%, -45px); margin: 0 auto; width: 75px; height: 75px; border: 2px solid #22305F; background-color: #fff; border-radius: 50px; }*/
/*.footer-blue { height: 80px; width: 100%; !*background-color: #22305F;*! background-color: #b7df8c; }*/
/*.footer-white { -js-display: flex; display: flex; justify-content: space-between; align-items: center; flex-direction: column; height: 200px; width: 100%; background-color: #fff; padding: 1em 0;}*/
/*.footer-white .footer-image-wrapper { text-align: center; }*/
/*.footer-white .footer-image { width: 90%; max-width: 1200px; }*/

/*.footer-text-wrapper { width: 100%; -js-display: flex; display: flex; justify-content: center; align-items: center; }*/
/*.footer-text h3 { margin: 0; }*/
/*.footer-text a { text-decoration: none; color: #22305F; margin: 0 1em; }*/

/*----- Page home -----------*/
.table-dashboard-fullwidth {
    width: 100%;
    margin: 0 10% 0 0;
    border: 1px solid #22305F;
    border-collapse: collapse;
}

.table-dashboard-fullwidth th {
    border: 1px solid #22305F;
}

.table-dashboard-fullwidth tbody td {
    padding: .1em .5em;
}

.table-dashboard-fullwidth tbody td:not(:nth-child(1)) {
    text-align: center;
}

.warning {
    font-weight: bolder;
    color: #f44336;
}

.passed {
    color: #0f9d58;
}

/*----- Page student-leaders */
.add-participant h3 {
    margin: 0.5em;
    font-size: 1em;
}

/*----- Page Survey Leaders ------*/
.survey-leader-button-wrapper {
    text-align: right;
}

.survey-leader-dashboard ul {
    list-style-position: outside;
    margin: 0 0 0 2em;
    text-align: left;
}

/*----- Page Super Admin -----------*/
.admin-dashboard form {
    position: relative;
}

.admin-dashboard form label {
    width: 100%;
    padding: 1em;
}

.admin-dashboard .form-action {
    position: absolute;
    bottom: 1em;
    right: 1em;
}

/*----- Page data export -----------*/
.org-select-div {
    display: none;
    width: 100%;
}

.data-export-sort input {
    display: inline-block;
    vertical-align: center;
}

.data-export-sort label {
    display: inline-block;
    text-align: left;
    width: 50%;
}

/*----- Page Organizations ----------*/
#university.pseudo-disabled:disabled {
    background-color: #fff;
    color: #000;
}

.manage-student-organizations label {
    width: 100%;
}

.university-suggestions-wrapper {
    position: relative;
    width: 100%;
}

.university-suggestions-wrapper .clear-university {
    position: absolute;
    top: 1.4em;
    left: 67%;
    visibility: hidden;
}

input[readonly] {
    background-color: rgba(255, 152, 0, 0.2);
    pointer-events: none;
}

.university-suggestions {
    width: 70%;
    background-color: #fff;
    border: 1px solid #BEBEBE;
    margin: -1.1em 0 0 0;
    position: absolute;
    top: 4.1em;
    z-index: 10;
    visibility: hidden;
}

.university-suggestions li {
    width: 100%;
    padding: 0 4em 0 0.5em;
    position: relative;
    height: 2em;
    margin: 0.5em 0 0 0;
}

.university-suggestions li button {
    width: 3em;
    height: 1.6em;
    position: absolute;
    bottom: .65em;
    right: .5em;
    line-height: normal;
}

.university-static-data-wrapper {
    width: 100%;
}

.university-static-data-wrapper input {
    text-align: right;
}

.university-static-data-wrapper > div.column.pad {
    position: relative;
}

.university-static-data-wrapper span.pseudo-placeholder {
    font-size: 0.9em;
    position: absolute;
    top: 1em;
    left: 1em;
    color: #000;
}

/*----- Page Static data ------------*/
.staticdata__input {
    border: 1px solid #BEBEBE;
    padding: 7px;
    text-align: center;
}

/*----- Page edit surveys -----------*/
.detail.survey h5 {
    font-size: 0.8em;
    text-transform: uppercase;
    display: inline-block;
}

.detail.survey h5 + h5 {
    margin-left: 16px;
}

.options-survey-wrapper {
    position: fixed;
    width: 296px;
    top: 150px;
}

.options-preview-wrapper {
    padding: 0 0 3em 0;
}

.edit-survey-wrapper {
    margin: 0 0.5em 0 0;
    font-family: 'Lato', sans-serif;
}

.edit-survey-wrapper ol {
    list-style: none;
}

.edit-survey-wrapper .survey-object {
    margin: 8px 4px 0 -4px;
    padding: 16px;
    width: 95%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    transition: all 0.2s ease-in-out;
}

.edit-survey-wrapper .survey-object.collection {
    background-color: rgba(15, 157, 88, 0.3);
}

.edit-survey-wrapper .survey-object.question {
    background-color: rgba(66, 133, 244, 0.3);
}

.edit-survey-wrapper .survey-object.grid-question {
    background-color: rgba(32, 110, 242, 0.4);
}

.edit-survey-wrapper .survey-object.break {
    background-color: rgba(255, 152, 0, 0.3);
}

.edit-survey-wrapper .survey-object.text {
    background-color: rgba(96, 125, 139, 0.3);
}

.edit-survey-wrapper .survey-object.answer {
    background-color: rgba(244, 67, 54, 0.3);
}

.edit-survey-wrapper .survey-object.special {
    background-color: rgba(233, 30, 99, 0.3);
}

.edit-survey-wrapper .survey-object.selected {
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.45);
}

.survey-object .object-actions {
    display: inline-block;
}

.survey-object .object-actions span + span {
    margin: 0 0 0 8px;
}

.survey-object .object-actions .handle i.fa {
    cursor: grab;
}

.survey-object .object-text {
    margin: 10px 0 0 0;
}

#modal-text textarea {
    width: 100%;
}

.modal form {
    -js-display: flex;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

/*.modal form label { display: inline-block; width: 49%; margin: 2px; vertical-align: top; }*/
.modal form label {
    width: 49%;
    margin: 2px;
    flex-grow: 1;
    flex-shrink: 1;
}

.grid-list .action i.fa.disabled {
    color: rgba(0, 0, 0, 0.3);
    pointer-events: none;
    cursor: pointer;
}

/*----- Page preview surveys -----------*/
.preview-border {
    margin: 0 auto;
}

.preview-viewport {
    width: 100%;
    height: 100%; /*background-color: #ebeff4;*/
}

.tablet {
    background-color: #fff;
    box-sizing: content-box;
    border: black 30px solid;
    border-radius: 30px;
}

.mobile {
    background-color: #fff;
    box-sizing: content-box;
    border: black 20px solid;
    border-radius: 20px;
}

/* These styles should be designed to appear identically in the actual survey */

.survey-page {
    display: none;
}

.loader__wrapper {
    position: fixed;
    width: 10000px;
    height: 10000px;
    top: 50%;
    left: 50%;
    margin-top: -5000px;
    margin-left: -5000px;
    background-color: rgba(100, 100, 100, 0.8);
    z-index: 99;
}

.loader__message {
    color: #fff;
    position: fixed;
    top: 50%;
    left: 50%;
}

.loader,
.loader:after {
    border-radius: 50%;
    width: 100px;
    height: 100px;
}

.loader {
    font-size: 10px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    z-index: 100;
    text-indent: -9999em;
    border-top: 1.1em solid rgba(155, 155, 155, 0.2);
    border-right: 1.1em solid rgba(155, 155, 155, 0.2);
    border-bottom: 1.1em solid rgba(155, 155, 155, 0.2);
    border-left: 1.1em solid rgba(200, 200, 200, 1);
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load8 1.1s infinite linear;
    animation: load8 1.1s infinite linear;
}

.introduction h1.object-text {
    margin: 1em 0;
}

.introduction h2.object-text {
    margin: 1em 0;
    text-align: justify;
    text-transform: none;
}

.introduction button {
    margin: 1em;
}

.parent-wrapper .survey-object {
    border: 1px /*#ebeff4*/ #fff solid;
    transition: all 0.2s ease;
}

.parent-wrapper .survey-object.general-collection {
    margin: -5px 0;
}

.parent-wrapper .survey-object.question {
    border: 1px solid #BEBEBE;
    margin: 1rem 0;
    min-height: 55px;
    /*padding: 0.5em;*/
    padding: 1rem;
    -js-display: flex;
    display: flex;
    justify-content: space-between;
    /*align-items: center;*/
}

/* -js-display is to enable flexibility.min.js to polyfill */
.parent-wrapper .survey-object .object-text {
    margin: 0;
    /*flex-grow: 100;*/
    /*width: 75%;*/
    width: 50%;
    text-align: left;
    padding-right: 1rem;
}

.parent-wrapper tr.survey-object td .object-text {
    width: initial;
}


/*.parent-wrapper .survey-object.general-text .object-text { max-width: 90%; }*/
.object-text + .answer {
    margin-left: 5px;
}

.parent-wrapper .survey-object select {
    height: 1.7rem;
    width: 20rem;
}

.survey-page > .general-text .object-text {
    font-size: 1.4em; /*margin: 0 1em 1em;*/
    margin: 1rem;
    max-width: 100%;
    width: auto;
}

.parent-wrapper .survey-object input, .parent-wrapper .survey-object select {
    margin: 0 .5em;
    padding: .25em;
}

.parent-wrapper .survey-object input[type="text"],
.parent-wrapper .survey-object input[type="number"],
.parent-wrapper .survey-object textarea {
    border: 1px solid #BEBEBE;
}

.parent-wrapper .survey-object input[type="text"] {
    width: 20rem;
    /*width: 65%;*/
}

.parent-wrapper .survey-object textarea {
    height: 5rem;
    margin: 0 .5em;
    padding: .25em;
    width: 20rem;
}

.parent-wrapper .survey-object.not-answered {
    background-color: rgba(255, 87, 34, 0.5)
}

.parent-wrapper .group.group-text-field .answer {
    width: 4em;
}

.parent-wrapper label { /*text-transform: lowercase;*/
    min-width: 10%;
}

.parent-wrapper input[type="radio"] {
    height: 1rem;
    width: 1rem;
    vertical-align: text-bottom;
}

.parent-wrapper option:hover {
    background-color: #efefef;
}

.parent-wrapper ul {
    list-style-position: inside;
}

.money__wrapper {
    -js-display: inline-flex;
    display: inline-flex;
    width: 99%;
}

.slider-wrapper {
    /*margin: 2.5rem .5rem 0.5rem .5rem;*/
    margin: 2.5rem auto 0.5rem auto;
    /*padding-left: 1rem;*/
    width: 40%;
}

.slider-wrapper .noUi-connect {
    /*background: #0179A4;*/
    background: #41658A;
}

.slider-wrapper .noUi-tooltip {
    white-space: nowrap;
}

/* Standard grid collection table styles */
table.collection.grid-collection {
    margin: 1rem 0;
    width: 100%;
    display: table;
    border-bottom: 1px solid #BEBEBE;
    border-collapse: collapse;
}

table.collection.grid-collection caption {
    width: 100%;
    border-left: 1px solid #BEBEBE;
    border-right: 1px solid #BEBEBE;
    border-top: 1px solid #BEBEBE; /*margin: 1rem 0 0 0;*/
}

table.collection.grid-collection caption div.object-text {
    width: 90%;
    margin: 1em auto;
    font-size: 20px;
}

table.grid-collection th {
    padding: 0.5em; /*text-transform: capitalize;*/ /*background-color: #e3e3e3;*/
}

table.grid-collection th:not(:first-child) {
    width: 9rem;
}

table.grid-collection thead {
    border-left: 1px solid #BEBEBE;
    border-right: 1px solid #BEBEBE;
}

table.grid-collection tbody {
    margin: 0 auto;
}

table.grid-collection tr.survey-object.question {
    display: table-row;
}

table.grid-collection tr.survey-object:nth-child(even) { /*background-color: #e3e3e3;*/
}

table.grid-collection tr.survey-object div.object-text {
    margin: 0.5em;
}

table.grid-collection td label {
    display: block;
}

/* These style only apply when tables are stacked but are applied everywhere in case someone crosses the break without reloading */
.grid-collection.stacktable.mobile th {
    padding: 0;
}

.grid-collection.stacktable.mobile .st-head-row .object-text {
    padding: 1em 0.5em;
}

.grid-collection.stacktable.mobile td {
    border: 1px solid #BEBEBE;
    padding: 0.5em;
    width: 50%;
    text-align: center;
}

table.grid-collection td:first-child {
    text-align: left;
    min-width: 15rem;
}

img.survey-resource {
    display: block;
    margin: 1em auto 0;
}

.cbox-wrapper, .rad-wrapper {
    padding: 0 0 0 2rem;
    text-align: left;
    width: 50%;
}

.cbox-wrapper label, .rad-wrapper label {
    display: inline-block;
    text-align: left;
    margin-top: .1rem;
    margin-bottom: .1rem;

    /*this is for the checkbox background test*/
    padding-top: 2px;
    padding-bottom: 5px;
    width: 99%;
}

/*this is for the checkbox background test*/
.cbox-wrapper label:nth-of-type(even), .rad-wrapper label:nth-of-type(even) {
    /*background-color: rgba(108, 165, 64, .2);*/
    background-color: rgba(128, 128, 128, .2);
}

.cbox-wrapper input, .rad-wrapper input {
    display: inline-block;
    vertical-align: text-bottom;
}

.cbox-wrapper .label-text, .rad-wrapper .label-text {
    display: inline-block;
    max-width: 85%;
    vertical-align: middle;
    line-height: 1rem;
}

/* Progress bar css */
/* Base styling */
#progressBar {
    margin: 2em auto;
    width: 75%;
    height: 22px;
}

#progressBar div {
    height: 100%;
    color: #fff;
    text-align: right;
    font-size: 12px;
    line-height: 22px;
    width: 0;
}

/* Progress bar styles */
.tiny-green {
    position: relative;
    padding: 3px;
    height: 12px !important;
    background-image: linear-gradient(-180deg, rgb(58, 64, 80) 0%, rgb(58, 64, 80) 47%, rgb(46, 50, 62) 48%, rgb(46, 50, 62) 100%);
    border-radius: 2px;
}

.tiny-green div {
    font-family: 'Lato', sans-serif;
    font-size: 3px;
    color: white;
    text-align: right;
    text-shadow: 0px 0px 2px #000;
    text-indent: 9999px;
    overflow: hidden;
    background-image: linear-gradient(-180deg, rgb(118, 177, 1) 0%, rgb(118, 177, 1) 47%, rgb(102, 153, 0) 48%, rgb(102, 153, 0) 100%);
    border-radius: 2px;
}

.material-blue {
    position: relative;
    padding: 0;
    height: 5px !important;
    background-color: rgba(50, 98, 149, 0.3);
    border-radius: 0;
}

.material-blue div {
    font-family: 'Lato', sans-serif;
    font-size: 3px;
    color: white;
    text-align: right;
    text-shadow: 0px 0px 2px #000;
    text-indent: 9999px;
    overflow: hidden;
    background-color: rgb(50, 98, 149);
    border-radius: 0;
}

.project-path {
    position: relative;
    padding: 0;
    height: 5px !important;
    background-color: rgba(65, 101, 138, .3);
    border-radius: 0;
}

.project-path div {
    font-family: 'Lato', sans-serif;
    font-size: 3px;
    color: white;
    text-align: right;
    text-shadow: 0px 0px 2px #000;
    text-indent: 9999px;
    overflow: hidden;
    background-color: #41658A;
    border-radius: 0;
}

/* Survey Nav */
#survey-nav-wrapper {
    margin: 1em 0;
}

#survey-nav-message {
    color: rgba(100, 100, 100, 1);
    margin: .5em 0;
    min-height: 21px;
}

#survey-nav-wrapper .survey-action + .survey-action {
    margin-left: 1em;
}

#emptyDiv, #emptySpan {
    display: none;
}

/* Feedback */
#page-of {
    margin: 0 0 1.5em 0;
}

.feedback-page { /*text-align: left;*/
    display: none;
}

.feedback-page h1 {
    margin: 0 0 1em 0;
}

.feedback-page h2 {
    margin: 0 0 1em 0;
    text-transform: unset;
    font-size: 1.6em;
}

.feedback-page h3, .feedback-page caption {
    font-size: 1.4em;
    margin: 1.5em 0 .75em 0;
}

.feedback-page p {
    font-size: 1.5rem;
}

.feedback-page img.medium {
    width: 350px;
}

.feedback-page img.m-small {
    max-width: 200px;
    max-height: 200px;
}

.feedback-page img.small {
    max-width: 100px;
    max-height: 100px;
}

.feedback-page .margin__small {
    margin: .25rem .1rem;
}

.feedback-page .margin__medium {
    margin: .5rem .25rem;
}

.feedback-page .margin__large {
    margin: 1rem .5rem;
}

.feedback-page .margin__x-large {
    margin: 2rem .5rem;
}

.var-emph {
    font-weight: bolder;
}

.feedback-page .footnote {
    text-align: right;
}

.feedback-page table {
    width: 90%;
    margin: 1em 5%;
    border-collapse: collapse;
    border: 1px solid #424242;
    padding: 1em;
}

.feedback-page th {
    padding: .5em 1em;
    border-bottom: 1px solid #424242;
}

.feedback-page th:not(:first-child) { /*text-align: center;*/
}

.feedback-page tr {
    text-align: left;
}

.feedback-page tr:nth-child(even) {
    background-color: #e3e3e3;
}

.feedback-page td {
    padding: .5em 1em;
    border-collapse: collapse;
    border: 1px solid #424242;
}

.feedback-page td:not(:first-child) { /*text-align: center;*/
}

.feedback-page .row__major {
    font-size: 1.5rem;
}

.feedback-page .row__minor td:first-child {
    padding-left: 3rem;
}

.feedback-page .row__major td:not(:first-child), .feedback-page .row__minor td:not(:first-child) {
    text-align: center;
}

.feedback-page .row__major td:not(:first-child) img, .feedback-page .row__minor td:not(:first-child) img {
    max-width: unset;
}

.feedback-page ul, .feedback-page ol {
    list-style-position: inside;
    padding: 0 0 0 1em;
}

.feedback-nav-wrapper {
    margin: 1em 0 2.5em;
    text-align: center;
}

.feedback-page .column__1-3 {
    display: inline-block;
    width: 30%;
    vertical-align: middle;
}

.feedback-page .column__1-4 {
    display: inline-block;
    width: 22%;
    vertical-align: middle;
}

.feedback-page .column__1-5 {
    display: inline-block;
    width: 17%;
    vertical-align: middle;
}

.feedback-page .column__1-10 {
    display: inline-block;
    width: 8%;
    vertical-align: middle;
}

.feedback-page .column__2-3 {
    display: inline-block;
    width: 60%;
    vertical-align: middle;
}

.feedback-page .support__header {
    background-image: url("/img/support.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    height: 180px;
}

.feedback-page .support__header div {
    background-color: rgba(255, 255, 255, 0.7);
    height: 180px;
}

.feedback-page .support__header h2 {
    padding-top: 6%;
}

.chain__wrapper {
    width: 360px;
    height: 70px;
    margin: 0 auto;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: -1;
}

.chain__percent {
    width: 0;
    height: 68px;
    background-color: greenyellow;
    padding-top: 2px;
}

/* Organization Leader Dashboard */
.organization-leader-dashboard form {
    position: relative;
}

.organization-leader-dashboard form label {
    width: 100%;
    padding: 1em;
}

.organization-leader-dashboard .form-action {
    position: absolute;
    bottom: 1em;
    right: 1em;
}

.organization-leader-participants .existing-participant-list {
    list-style: inside;
}

#stacked1 {
    position: relative;
    height: 400px;
    width: 400px;
}

#d1, #d2 {
    position: absolute;
}

#d1 {
    top: 0px;
    left: 0px;
}

#d2 {
    border-radius: 150px;
    height: 320px;
    width: 320px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#chartjs-tooltip {
    opacity: 0;
    position: absolute;
    background: rgba(0, 0, 0, .7);
    color: white;
    padding: 3px;
    border-radius: 3px;
    -webkit-transition: all .1s ease;
    transition: all .1s ease;
    pointer-events: none;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

#chartjs-tooltip.above {
    -webkit-transform: translate(-50%, -100%);
    transform: translate(-50%, -100%);
}

#chartjs-tooltip.above:before {
    border: solid;
    border-color: #111 transparent;
    border-color: rgba(0, 0, 0, .8) transparent;
    border-width: 8px 8px 0 8px;
    bottom: 1em;
    content: "";
    display: block;
    left: 50%;
    top: 100%;
    position: absolute;
    z-index: 99;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

/*----- Page users ----------------*/
#users-table td:last-child {
    text-align: center;
}

/*----- All pages help -------------*/
.help-wrapper {
    padding: 1em;
}

.help-step {
    padding: 1em;
}

.help-step h3 {
    text-transform: uppercase;
}

.help-step table {
    width: 100%;
}

.help-step tr td:nth-child(1), .help-step tr td:nth-child(3) {
    width: 5%;
    vertical-align: top;
    text-align: center;
    font-family: 'Lato', sans-serif;
}

.help-step tr td:nth-child(2), .help-step tr td:nth-child(4) {
    width: 45%;
    vertical-align: top;
    padding-top: 2px;
}

/*----- Media Queries Desktop First -----*/
.stacktable.large-only {
    display: table !important;
}

.stacktable.small-only {
    display: none !important;
}

@media screen and (max-width: 1160px) {
    .desktop-only {
        display: none;
    }

    .column.double.centered.clients {
        width: 100%;
    }

    .parent-wrapper .survey-object.question .object-text {
        /*max-width: 60%;*/
    }
}

@media screen and (max-width: 1000px) {
    .header-right .header-nav-button {
        font-size: 1.2em;
        width: unset;
        margin: 0 0.2em;
    }

}

@media screen and (max-width: 900px) {
    .header-left {
        margin-right: 0;
    }

    .parent-wrapper .survey-object.question .object-text {
        max-width: 50%;
    }
}

@media screen and (max-width: 800px) {
    .header-left {
        margin-left: 2em;
    }

    .header-right {
        margin-right: 2em;
    }
}

@media screen and (max-width: 750px) {
    /* Tables stack here */
    /* This breakpoint should prevent tables from stacking/unstacking when rotating phone or tablet*/
    .stacktable.large-only {
        display: none !important;
    }

    /* Can't build enough specificity without the important */
    .stacktable.small-only {
        display: table !important;
    }

    /* Can't build enough specificity without the important */
    .feedback-page td {
        padding: .5em .5em;
    }

    /* End css for stack tables */
    #header {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    #header > .header-left {
        margin: 1em 0 0.5em;
    }

    #header > .header-right {
        margin: 0.5em 0 1em;
        display: block;
    }

    #header > .header-nav > button {
        width: 100%;
        margin: 0;
    }

    .button + .button {
        margin: unset;
    }

    .cbox-wrapper, .rad-wrapper {
        padding: 0;
        width: 90%;
    }

    .cbox-wrapper label, .rad-wrapper label {
        display: inline-block;
        text-align: left;
        width: 100%;
    }

    .cbox-wrapper .label-text, .rad-wrapper .label-text {
        width: 95%;
    }

    .feedback-page .column__1-4 {
        display: block;
        width: 80%;
        vertical-align: middle;
        margin-left: auto;
        margin-right: auto;
    }

    .feedback-page .column__1-5 {
        display: block;
        width: 80%;
        vertical-align: middle;
        margin-left: auto;
        margin-right: auto;
    }

    .parent-wrapper label {
        padding-bottom: .35rem;
        padding-top: .35rem;
    }

    .parent-wrapper .survey-object .object-text {
        min-width: unset;
        margin: 0.5em;
        padding: 0;
        width: unset;
    }

    .parent-wrapper .survey-object.question {
        flex-direction: column;
    }

    .parent-wrapper .survey-object.question .object-text {
        max-width: initial;
        width: 95%;
    }

    .parent-wrapper .survey-object input[type="text"] {
        margin-top: .5rem;
        width: 95%;
    }

    .parent-wrapper .survey-object select {
        margin: 0 auto;
        width: 95%;
    }

    .parent-wrapper .survey-object textarea {
        width: 95%;
    }

    .slider-wrapper {
        padding: 0;
        width: 85%;
    }
}

@media screen and (max-width: 700px) {
    .column {
        width: 50%;
    }

    .column.sixth, .column.fifth {
        width: 33.3333%
    }

    .column.quarter {
        width: 50%;
    }

    .column.double, .column.half {
        width: 100%;
    }

    .circle {
        top: -60px;
        left: 0;
    }

    .page-content {
        text-align: center;
    }

    .organization-leader-dashboard .form-action {
        position: relative;
        bottom: unset;
        right: unset;
        margin: 1em 0 0;
    }

    .survey-leader-button-wrapper {
        text-align: center;
    }

    .manage-organization-leaders .dataTables_length,
    .manage-organization-organizations .dataTables_length {
        width: 100%;
        display: block;
        text-align: center;
        margin: 0.5em;
    }

    .manage-organization-leaders .dataTables_filter,
    .manage-student-organizations .dataTables_filter {
        width: 100%;
        display: block;
        text-align: center;
        margin: 0.25em;
    }

    .button-wrapper {
        width: 100%;
        text-align: center; /*margin: 1em 1em 0;*/
    }

    .button-wrapper .button {

    }
}

@media screen and (max-width: 600px) {
    .email-sample-wrapper {
        width: 100%;
    }

    .footer-white {
        justify-content: space-around;
    }

    .footer-text-wrapper {
        flex-direction: column;
        align-items: center;
    }

    .footer-text-divider {
        display: none;
    }

    .body {
        padding: 0;
    }

    /*-- Feedback --*/
    .mobile-instead {
        display: block;
    }

    .feedback-page table {
        margin: 1em auto;
    }

    .no-mobile {
        display: none;
    }

    #page-3 .var-emph {
        display: block;
        width: 100%;
        text-align: center;
    }

}

@media screen and (max-width: 520px) {

}

@media screen and (max-width: 440px) {

}

@media screen and (max-width: 380px) {

}

@media print {
    /*----------------- Boilerplate ----------------------------------------------------*/
    *, *:before, *:after, *:first-letter,
    *:first-line {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a, a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre, blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr, img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p, h2, h3 {
        orphans: 3;
        widows: 3;
    }

    h2, h3 {
        page-break-after: avoid;
    }

    /*----------------------------------------------------------------------------------*/
    h1, h2 {
        font-size: 16pt !important;
    }

    h3, caption {
        font-size: 14pt !important;
    }

    body {
        font-size: 12pt !important;
    }

    canvas {
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
    }

    img {
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
    }

    #header, #footer {
        display: none;
    }

    #effects-bac {
        width: 670px !important;
        height: 150px !important;
    }

    .feedback-page .canvas-wrapper-tall {
        height: 150px;
    }

    .print-instead {
        display: block;
    }

    .no-print, .feedback-nav-wrapper {
        display: none !important;
    }

    .feedback-page {
        display: block !important;
    }

    .feedback-page .show-hide, .feedback-page .box {
        page-break-inside: avoid;
    }

    .feedback-page .show-hide.hide {
        display: block;
        margin: .2em;
        padding: 0 .5em;
    }

    .feedback-page .show-hide.hide h3, .feedback-page .show-hide.hide caption {
        padding: 0;
        margin: .5em 0;
    }

    .feedback-page .box, .feedback-page .show-hide.label, .feedback-page .resources {
        border: 1px solid #000;
    }

    .feedback-page table {
        padding: 0;
        margin: 0 auto;
        page-break-inside: avoid;
    }

    .feedback-page th {
        padding: .2em 1em;
    }

    .feedback-page td {
        padding: .2em 1em;
    }

}

/* prevent iPhone from zooming in on select */
/*@media screen and (-webkit-min-device-pixel-ratio: 0) {*/
/*select:focus, textarea:focus, input:focus {*/
/*font-size: 16px;*/
/*}*/
/*}*/