/*
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: 135px;
}

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

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

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

#notices .notice {
    width: 100%;
    padding: .5rem 1rem;
    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;
}

.lefted {
    text-align: left !important;
}

.right {
    float: right;
}

.righted {
    text-align: 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;
}

.hidden {
    visibility: hidden;
}

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

.column.sixth {
    width: 16.6666%;
}

.column.fifth {
    width: 20%;
}

.column.five-sixths {
    width: 83%;
}

.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;
}

.d__inline-block {
    display: inline-block;
}

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

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

.page-content {
    margin: 0 auto;
    max-width: 1200px;
    min-height: calc(100vh - 24rem);
    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;*/
    color: #d3d3d3;
}

.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-note {
    color: white;
}

.header-title {
    font-size: 2.5rem;
    /*color: #fff;*/
    color: #bababa;
    font-family: 'Lato', sans-serif;
}

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

/*.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: 6rem;
    /*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;
}

.money__wrapper--short input {
    max-height: 1.5rem;
    width: 6rem !important;
    text-align: center;
}

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

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

/* 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 {
    padding: 0 0 0 2rem;
    text-align: left;
    width: 50%;
}

.cbox-wrapper label {
    display: inline-block;
    /*width: 50%;*/
    text-align: left;
    margin-top: .1rem;
    margin-bottom: .1rem;

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

/*this is for the checkbox background test*/

.cbox-wrapper label:nth-of-type(odd) {
    /*background-color: rgba(100, 100, 100, .2);*/
}

.cbox-wrapper label:nth-of-type(even) {
    /*background-color: rgba(200, 200, 200, .2);*/
}

.cbox-wrapper label + label {
    border-top: 1px solid #ccc;
}

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

.cbox-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-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;*/
    color: #444;
    display: none;
    max-width: 7in;
    /*min-height: 10in;*/
    margin: auto;
}

.feedback-page h1,
.feedback-page h2,
.feedback-page h3,
.feedback-page h4,
.feedback-page h5,
.feedback-page h6 {
    font-weight: normal;
}

.feedback-page h1 {
    font-size: 1.5rem;
    margin: 1rem 0 1rem 0;
    padding-bottom: .5rem;
}

.feedback-page h2 {
    font-size: 1.2rem;
    margin: 0 0 1rem 0;
    text-transform: unset;

}

.feedback-page p {
    /*font-size: 1rem;*/
}

.feedback__title {
    border-bottom: 3px solid #444;
    display: block;
    text-align: center;
    text-transform: uppercase;
}

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

.ib-column {
    display: inline-block;
    width: 33%;
}

.ib-column__double {
    display: inline-block;
    width: 66%;
}

.ib-column__half {
    width: 49%;
}

.bac--blue {
    color: rgba(43,180,224,1);
    font-weight: bold;
}

.bac--red {
    color: rgba(224,87,43,1);
    font-weight: bold;
}

.bac-effects {
    border-collapse: collapse
}

.bac-effects__cell-1 {
    border-bottom: 1px solid #444;
    border-left: 1px solid #444;
    border-top: 1px solid #444;
    width:1rem
}

.bac-effects__cell-1--last {
    border-bottom: none;
}

.bac-effects__cell-2 {
    width:6rem;
}

.bac-effects__cell-3 {

}

.chart__wrapper {
    /*background-color: #eee;*/
    height: 3in;
}

.drink__column {
    display: inline-block;
    width: 33%;
    padding-left: .25rem;
    padding-right: .25rem;
    position: relative;
}

.drink__overlay {
    font-size: 2rem;
    font-weight: bold;
    left: 50%;
    position: absolute;
}

.drink__overlay--beer {
    top: 3.5rem;
    transform: translate(-50%, 0);
}

.drink__overlay--cal {
    top: 4.8rem;
    transform: translate(-50%, 0);
}

.fa-10x {
    font-size: 10em;
}

.gauge__wrapper {
    /*background-color: #eee;*/
    /*height: 1.5in;*/
    margin: 0 auto;
    width: 300px;
    height: 300px;
}

.icon__gray {
    color: #b8b8b8;
}

.js-clock {
    border-radius: 50%;
    background: #fff url("./img/feedback/clock-face.png") no-repeat center;
    background-size: 88%;
    /*height: 20em;*/
    height: 10em;
    margin: 0 auto;
    padding-bottom: 31%;
    position: relative;
    /*width: 20em;*/
    width: 10em;
}

.js-clock:after {
    background: #000;
    border-radius: 50%;
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 5%;
    height: 5%;
    z-index: 350;
}

.js-clock img {
    /*visibility: hidden;*/
}

.js-clock__hours-container,
.js-clock__minutes-container,
.js-clock__seconds-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 350;
}

.js-clock__hours {
    background: #000;
    height: 20%;
    left: 48.75%;
    position: absolute;
    top: 30%;
    transform-origin: 50% 100%;
    width: 2.5%;
}

.js-clock__minutes {
    background: #000;
    height: 40%;
    left: 49%;
    position: absolute;
    top: 10%;
    transform-origin: 50% 100%;
    width: 2%;
}

.js-clock--mask,
.js-clock__pie--filler,
.js-clock__pie--spinner {
    animation-play-state: running;
}

.js-clock__mask {
    width: 50%;
    height: 100%;
    position: absolute;
    background: inherit;
    opacity: 1;
    z-index: 300;
    animation: opa 5s steps(1, end) infinite;
}

.js-clock__outer {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 49%;
}

.js-clock__pie {
    width: 50%;
    height: 100%;
    transform-origin: 100% 50%;
    position: absolute;
    border: 10px solid #93CF96;
}

.js-clock__pie--filler {
    border-radius: 0 100% 100% 0 / 0 50% 50% 0;
    left: 50%;
    opacity: 0;
    z-index: 100;
    animation: opa 5s steps(1, end) infinite reverse;
    border-left: none;
}

.js-clock__pie--spinner {
    border-radius: 100% 0 0 100% / 50% 0 0 50%;
    z-index: 200;
    border-right: none;
    animation: rota 5s linear infinite;
}

.js-clock__wrapper,
.js-clock__wrapper * {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.js-clock__wrapper {
    /*width: 150px;*/
    /*height: 150px;*/
    width: 100px;
    height: 100px;
    position: absolute;
    margin: 0 auto;
    background: white;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.list__header {
    border-bottom: 1px solid darkgray;
    padding: .25rem .5rem;
}

.list__header--outcomes {
    background-color: rgba(171, 226, 225, .6);
}

.list__header--try {
    background-color: rgba(172, 226, 171, .6);
}

.list__list {
    padding: .5rem .75rem;
}

.list__list--colored:nth-child(even) {
    background-color: rgba(172, 226, 171, .6);
}

.list__list--square {
    font-size: 1rem;
}

.list__list--square .fa {
    cursor: default;
}


.list__list--square li {
    margin-bottom: .25rem;
    margin-top: .25rem;
}

.list__list--check label {
    cursor: pointer;
}

.list__table {
    border: 1px solid darkgray;
    margin-bottom: 1rem;
}

.mobile__show {
    display: none;
}

.middle {
    vertical-align: middle;
}

.pbc {
    border: 1px solid darkgray;
    border-collapse: collapse;
    text-align: center;
    width: 100%;
}

.pbc__header {
    background-color: rgb(157,195,194);
    border: 1px solid darkgray;
    font-weight: bold;
}

.pbc__bac-cell {
    border: 1px solid darkgray;
    transition: background-color 0.2s ease;
}

.pbc__y-axis {
    background-color: rgb(179,216,156);
    font-weight: bold;
}

.pbc__col--hover {
    background-color: rgba(157,195,194,0.4);
}

.pbc__row--hover {
    background-color: rgba(179,216,156,0.4);
}

.pbc__col--hover.pbc__row--hover {
    background-color: #fff;
    font-weight: bold;
}

.resources {
    margin-bottom: 1rem;
}

.resources__title {
    font-weight: bold;
}

.resources__details {
    font-size: .9rem;
    padding: 0 1rem;
}

/* 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;
}

.score__alert {
    background-color: rgba(255,0,0,.1);
    color: rgb(255,0,0);
    font-weight: bold;
}

#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;
    }

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

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

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

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

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

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

    .button + .button {
        margin: unset;
    }

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

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

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

    .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;
    }

    .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 {
    }

    .drink__column {
        margin-bottom: .5rem;
        margin-top: .5rem;
        width: 100%;
    }

    .ib-column {
        width: 100%;
    }

    .mobile__hide {
        display: none;
    }

    .mobile__show {
        display: block;
    }



}

@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;
    }

    /*----------------------------------------------------------------------------------*/
    html, body {
        height: auto;
        margin: 0;
        padding: 0;
    }

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

    .feedback-page {
        display: block !important;
        margin: auto;
        max-width: 7in;
        height: 10in;
        page-break-after: auto;
        overflow: hidden;
    }

    #body, .main-container, .page-content, .page-wrapper {
        margin: 0 !important;
        padding: 0 !important;
    }

    .feedback-page.browser__firefox, .feedback-page.browser__edge {
        min-height: 9in;
        max-height: 9.5in;
        margin: 0;
        padding: 0;
    }

}