html {
    height: 100%;
}

html > body {
    height: calc(100% - 141px);
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 28px;
    color: #5f5f5f;
    background: #f1f1f1;
}

@font-face {
    font-family: 'Glyphicons Halflings';
    src: url("../fonts/glyphicons-halflings-regular.f4769f9bdb74.eot");
    src: url("../fonts/glyphicons-halflings-regular.f4769f9bdb74.eot?#iefix") format('embedded-opentype'), url("../fonts/glyphicons-halflings-regular.fa2772327f55.woff") format('woff'), url("../fonts/glyphicons-halflings-regular.e18bbf611f2a.ttf") format('truetype'), url("../fonts/glyphicons-halflings-regular.89889688147b.svg#glyphicons-halflingsregular") format('svg');
}

/* Color Palette */
.color-light-teal {
    color: #66CCCC;
}

.bg-light-teal {
    background-color: #66CCCC;
}

.color-medium-teal {
    color: #009999;
}

.bg-medium-teal {
    background-color: #009999;
}

.color-dark-teal {
    color: #336666;
}

.bg-dark-teal {
    background-color: #336666;
}

.color-black {
    color: #000;
}

.bg-black {
    background-color: #000;
}

.mdl-button--accent.mdl-button--accent.mdl-button--raised,
.mdl-button--accent.mdl-button--accent.mdl-button--fab,
.mdl-button--fab.mdl-button--colored {
    background-color: #66CCCC;
}

.mdl-button--accent.mdl-button--accent {
    color: #66CCCC;
}

/* Heading */
h4, h3, h2, .page-title, .section-title {
    font-family: Ubuntu, Helvetica, sans-serif;
}

/*MEDIA QUERIES*/

@media only screen and (max-width: 480px) {
    .site-update__connect-hs-card.mdl-card {
        width: 100%;
    }
}

@media only screen and (min-width: 992px) {
    button.download-data-button {
        margin-top: 18px;
        margin-bottom: 20px;
    }
}

@media only screen and (max-width: 767px) {
    #table-macro-extra tr:first-child {
        display: none;
    }

    #table-macro-extra {
        top: -1px;
    }
}

@media only screen and (max-width: 992px) {
    button.download-data-button {
        float: left;
        clear: left;
        margin-top: 0;
        margin-bottom: 20px;
    }

    .navbar-nav > li > a {
        line-height: 35px !important;
        height: initial;
    }
}

@media (max-width: 576px) {
    .buttons-toolbar .button-link, .buttons-toolbar form, .buttons-toolbar button {
        width: 100%;
    }
}

a {
    color: #336666;
}

a:hover {
    color: #000;
}

/*ICON COLORS*/
.icon-blue {
    color: rgb(31, 119, 180);
}

.icon-orange {
    color: rgb(255, 127, 14);;
}

.icon-green {
    color: rgb(44, 160, 44);
}

.icon-light-blue {
    color: rgb(23, 190, 207);
}

.icon-dark-blue {
    color: rgb(0, 53, 71);
}

.icon-medium-orange {
    color: rgb(237, 139, 22);;
}

.icon-teal {
    color: rgb(0, 94, 84);
}

.icon-brown-green {
    color: rgb(133, 128, 1);
}

.icon-bright-red {
    color: rgb(225, 82, 60);
}

.map-container {
    height: 410px;
}

.mapControlUI {
    background-color: #FFF;
    border: 2px solid #FFF;
    border-radius: 2px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
    -moz-box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
    margin: 10px;
    user-select: none;
}

.detail-map-container {
    margin-bottom: 30px;
    height: 440px;
}

.full-width-map-container {
    margin-top: 0;
    height: 450px;
    padding: 0;
    border-left: 0;
    border-right: 0;
}

.full-screen-map-container {
    margin-top: 0 !important;
    width: 100%;
}

#map {
    height: 100%;
    border: 1px solid #DDD;
}

div.map-info {
    margin: 5px;
    left: 0 !important;
    box-shadow: rgba(0, 0, 0, 0.298039) 0 1px 4px -1px;
    background-color: rgba(255, 255, 255, .95);
    border-radius: 2px;
    font-size: 13px;
    padding: 7px 15px;
}

.control-row {
    clear: both;
}

.content {
    padding: 0 25px;
}

div.separator {
    border-top: 1px solid #e5e5e5;
    width: calc(100% - 30px);
    margin: 0 auto;
    clear: both;
}

.form-fieldset legend {
    border-bottom: none;
    padding: 7px 2px 4px 2px;
    margin: 20px auto;
    width: 100%;
}

.form-field:not(.required-field) label.control-label::after {
    content: "(optional)";
    margin-left: 5px;
    font-weight: 400;
    font-size: 12px;
}

.form-field.before, .form-field:after {
    content: " ";
    display: table;
}

.form-field:after {
    clear: both;
}

.vertical-alignment-helper {
    display: table;
    height: 100%;
    width: 100%;
}

.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
}

.modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width: inherit;
    height: inherit;
    /* To center horizontally */
    margin: 0 auto;
}

#result-dialog .modal-content, #code-output-modal .modal-content {
    max-width: 600px;
}

.result-d-container {
    padding: 0 24px 0;
}

.modal-header h4 {
    margin: 0;
}

.modal-header {
    padding: 15px;
    border-bottom: 1px solid #e5e5e5;
    background-color: #f6f7f9;
    color: #000;
    border-radius: 4px;
}

.select2-results__option[aria-disabled="true"] {
    display: none !important;
}

.new-affiliation-button {
    margin-top: -5px;
    display: none;
}

div.action-affiliation-fields label.control-label {
    text-align: left;
    margin-bottom: 5px;
}

div.form-field {
    padding-bottom: 15px;
}

.inline {
    display: inline-block;
}

td[data-behavior="delete"] input {
    display: none;
}

tr.deleted-row {
    display: none;
}

#new-result-button {
    vertical-align: baseline;
    margin-left: 10px;
    padding: 4px 10px;
}

div.registration-data {
    margin-top: 2px;
    margin-bottom: 20px;
    overflow: auto;
}

div.registration-data i, div.registration-data .material-icons {
    width: 10px;
    margin-right: 10px;
    text-align: center;
}

div.registration-data .material-icons {
    font-size: 17px;
    margin-left: -2px;
    margin-right: 12px;
    vertical-align: middle;
}

div.registration-data > table tr td:first-child {
    white-space: nowrap;
}

table.shade-first-col tr td:first-child {
    background: #c2c2c21a;
}

div.registration-field {
    padding: .7em 1em;
}

div.registration-field span.control-label {
    text-align: right;
    font-weight: 700;
}

#id_hours_threshold {
    display: inline-block;
    width: 80px;
}

.plot_box {
    float: left;
    width: 100%;
    margin-bottom: 30px;
    border-radius: 2px;
    overflow: visible;
}

.plot_box .variable-title {
    font-weight: 500;
    margin: 0;
}

.plot_box .mdl-card__supporting-text {
    color: rgba(0, 0, 0, 0.8);
}

svg.stale {
    background-color: #ffefef;
}

svg.not-stale {
    background-color: #ebffe8;
}

.last-observation {
    font-weight: bold;
    display: block;
}

.plot_box .mdl-card__actions {
    background: #66CCCC;
}

.white-shadow {
    text-shadow: 0 1px 0 #fff;
}

.text-black {
    color: rgb(34, 34, 34);
}

.help-icon {
    font-size: 18px;
    line-height: 0;
    vertical-align: sub;
    cursor: default;
}

.button-link:hover {
    text-decoration: none;
}

.buttons-toolbar .button-link, .buttons-toolbar button {
    margin-bottom: 15px;
}

.buttons-toolbar {
    margin-top: -30px;
}

.table-trigger {
    cursor: pointer;
}

.table-trigger.disabled, .download-trigger.disabled, .tsa-trigger.disabled {
    pointer-events: none;
    color: #3b8a8a;
}

.measurements-table {
    max-height: 350px;
    overflow: auto;
}

.measurements-table .mdl-data-table tbody tr:hover {
    background-color: initial;
}

table.sensors td:not([data-behavior]), table.macroinvertebrate td:not([data-behavior]){
    white-space: normal;
}

.variable-name {
    font-size: 0.8em;
}

.variable-info {
    font-size: 0.8em;
}

.variable-info td {
    padding-right: 10px;
    padding-bottom: 3px;
    vertical-align: top
}

.variable-data {
    width: 100%;
}

.plot_box .variable-data span {
    line-height: 16px;
    padding: 0;
    margin-bottom: 3px;
}

.graph-container {
    border: 1px solid #DDD;
    height: 120px;
    margin-bottom: 5px;
}

.plot_box div p {
    text-align: center;
    line-height: 12px;
    padding: 2px 0 0 0;
}

.plot_box div p + p {
    font-weight: bold;
    font-size: 1.5em;
}

.plot_box a {
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
}

.axis path,
.axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}

.plot_box .x.axis path {
    display: none;
}

.line {
    fill: none;
    stroke-width: 2px;
}

table.data-values {
    display: none;
    margin-top: 0 !important;
}

table.no-hover tr:hover {
  background-color: initial !important;
}

.btn-copy-uuid {
    position: absolute;
    right: 6px;
    top: 6px;
}

span.map-help {
    float: right;
    font-size: .96em;
    font-weight: 600;
}

.page-content span.form-message.error {
    font-weight: 600;
}

.has-error .control-label, .has-error .form-control {
    color: rgb(232, 0, 0);
}

.user-fields .has-error .control-label {
    color: inherit;
}

.form-message.error {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

.form-message.success {
    color: #155724;
    background-color: #d4edda;
}

.sampling-feature-fields .help-icon, .location-fields .help-icon {
    float: right;
    margin-top: 10px;
}

div.form-group.sampling-feature-fields {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

div.form-field[data-field="site_type"] {
    -webkit-box-ordinal-group: 0;
    -moz-box-ordinal-group: 0;
    -ms-flex-order: 0;
    -webkit-order: 0;
    order: 0;
}

.select2-selection__rendered {
    font-family: Roboto, Helvetica, Arial, sans-serif;
}

span.select2-selection__clear {
    font-size: 1.4em;
    line-height: 1.1em;
}

span.name-dropdown {
    margin-top: 16px;
    margin-left: 10px;
}

span.name-dropdown .select2-dropdown {
    border-color: rgb(170, 170, 170);
    border-top: .1em dashed rgb(170, 170, 170);
    border-radius: 2px 2px 4px 4px;
}

ul.errorlist {
    margin: 0;
    list-style: none;
    padding: 0;
    color: rgb(232, 0, 0);
}

ul.errorlist li {
    font-size: small;
    font-style: italic;
    line-height: 1.5;
}

.organization-fields, .organization-fields .form-field {
    padding-left: 15px;
}

.btn-log-in {
    width: 100px;
}

#wrapper {
    margin-top: 81px;
    min-height: calc(100% - 300px);
}

/*NAV BAR STYLING*/
.navbar-expand-md .navbar-nav .nav-link {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
}

.navbar-dark {
    min-height: 81px;
    border-bottom: 1px solid #000;
    margin-bottom: 0;
    border-radius: 0;
    padding: 0 20px;
    background-color: #222;
}

.navbar-nav > li > a {
    line-height: 70px !important;
    height: 80px;
    border-bottom: 3px solid transparent;
    -webkit-transition: all 0.2s; /* Safari */
    transition: all 0.2s;
}

.navbar-nav > li > a.user-info {
    pointer-events: none;
}

.navbar-nav > li > a:hover {
    border-bottom: 3px solid #66cbcb;
}

.navbar-header {
    min-height: 80px;
}

/*FOOTER STYLING*/
footer {
    background-color: #353535;
    color: #FFF;
    min-height: 300px;
    padding: 60px 0;
    overflow: hidden;
}

footer h5 {
    line-height: 20px;
    font-size: 14px;
}

footer a, .panel-login a {
    color: #66CCCC;
    font-weight: 500;
}

footer a:hover, .panel-login a:hover {
    color: #b8e9e6;
}

footer a:hover, #banner a:hover {
    text-decoration: none;
}

.footer-section-title {
    margin-bottom: 20px;
}

footer .license-logo {
    margin-bottom: 3px;
    margin-right: 9px;
    margin-top: 2px;
}

footer .separator {
    border-top: 1px solid #505050;
    margin: 30px 0;
}


/*GENERAL STYLING*/

.follow-checkbox {
    display: block;
    width: auto;
}

.follow-checkbox .mdl-checkbox__label {
    display: block;
    font-size: 20px;
}

.page-header .page-title {
    margin-top: 10px;
}

.my-sites-action:hover {
    text-decoration: none;
}

#btn-delete-site, #btn-del-leaf-exp {
    background-color: #d9534f;
    border-color: #d43f3a;
}

.mdl-button-danger:not([disabled]) {
    background-color: #d9534f;
    color: #FFF;
}

#btn-confirm-delete-experiment:not([disabled]) {
    background: #d9534f;
    color: #FFF;
}

.center-icon {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 2px;
}

.menu-order li > i {
    margin-right: 10px;
}

.menu-order li > i {
    color: #66cccc;
}

.menu-order li > i {
    opacity: 0;
}

.menu-order li.active > i {
    opacity: 1;
}

.menu-order li.active {
    font-weight: bold;
    pointer-events: none;
}

.result-uuid {
    border-bottom: 0 !important;
}

.site-tokens .material-icons {
    font-size: 14px;
}

.site-tokens {
    margin-bottom: 20px;
}

.mdl-modal-content {
    background-color: #FFF;
    border: 0;
}

.mdl-modal-content .mdl-dialog__actions {
    padding: 0 24px 24px 24px;
}

@media (min-width: 576px) {
    .mdl-modal-content {
        max-width: 500px;
        margin: 30px auto;
    }
}

.site-tokens .input-group-copy .input-group-addon:first-child {
    width: 186px;
    text-align: left;
}

.full-width {
    width: 100%;
}

.mdl-data-table td:last-of-type {
    white-space: normal;
}

.mdl-data-table__header {
    background-color: #f4f4f4;
}

table.macroinv tr.taxon, table.macroinv tr.taxon a {
    font-weight: bold;
}

.mdl-data-table-no-hover tbody tr:hover {
    background-color: initial;
}

.mdl-data-table__cell--icon {
    padding: 0 !important;
    font-size: 16px;
    text-align: center !important;
}

.mdl-button--raised {
    background: rgba(255, 255, 255, 0.2);
}

/*Remove browser's outline from mdl components since they are already styled*/
*[class^="mdl-"]:focus { outline: none; }

span.table-trigger, span.tsa-trigger, span.download-trigger {
    margin-left: 20px !important;
    margin-top: 6px;
    font-size: 18px;
}

.listing-table tr td {
    padding-bottom: 20px;
}

.listing-table tr td:first-child {
    padding-right: 30px;
}

.listing-table .material-icons {
    font-size: 14px;
}

hr {
    border-top: 1px solid #dedede;
}

.ribbon-content .page-title {
    margin: -40px 0 40px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #dedede;
    line-height: 1.5em;
    font-weight: normal;
    font-size: 22px;
}

.ribbon {
    width: 100%;
    height: 40vh;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.ribbon-green {
    background-color: #62843e;
}

.ribbon-dark {
    background-color: #494949;
}

.ribbon-lightblue {
    background-color: #048a8a;
}

.ribbon-content {
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding: 80px 4vw !important;
    margin-bottom: 80px;
    border-radius: 2px;
}

.ribbon-content:first-child {
     margin-top: -35vh;
}

.ribbon-container {
    padding: 0 15px;
}

.shadow {
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .2);
}

.text-shadow {
    text-shadow: 1px 1px #00000069;
}

.btn.sharp {
    border-radius: 0;
}

.card {
    border-radius: 2px;
    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, .14), 0 3px 3px -2px rgba(0, 0, 0, .2), 0 1px 8px 0 rgba(0, 0, 0, .12);
    margin-bottom: 50px;
}

.card h4 {
    font-size: 18px;
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    font-weight: 300;
}

.card h4, .card h3 {
    padding: 20px;
    margin: 0;
    line-height: 30px;
}

.card h3 {
    font-size: 24px;
}

.site-card .mdl-card__supporting-text {
    color: #252525;
    width: 100%;
}

.site-card .mdl-card__title-text {
    -webkit-align-self: start;
    -ms-flex-item-align: start;
    align-self: start;
}

.site-card .mdl-card__title-text a {
    color: #FFF;
    font-weight: 400;
    text-overflow: ellipsis;
    overflow: hidden;
}

#followedSites .site-card .mdl-card__title, .mySites .site-card .mdl-card__title {
    padding-right: 60px;
    background-color: #66CCCC;
    color: #FFF;
}

.site-card .mdl-card__menu {
    color: #FFF;
}

.mdl-menu li a {
    color: initial;
    text-decoration: none;
    font-weight: normal;
}

.site-card {
    margin-top: 20px;
    width: auto;
    height: 100%;
}

.flex {
    display: flex;
}

.mdl-dialog__title {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-size: 1.5rem;
}

.site {
    flex-shrink: 0;
}

i.material-icons.site-card-icon {
    margin-right: 8px;
    max-width: 24px;
}

.page-title, .section-title {
    color: #336666;
    font-size: 22px;
    font-weight: 400;
}

.section-subtitle {
    margin-top: -30px;
    margin-bottom: 30px;
}

#new-result-button, #new-leaf-pack-btn, #new-streamwatch-btn {
    margin-left: 10px;
    margin-bottom: -10px;
    vertical-align: sub;
}

label[for='id_hours_threshold']::after{
    display: none;
}

/*LOGIN STYLING*/

.panel {
    padding: 15px;
    border-radius: 4px;
}

.panel .panel-heading {
    margin: -15px;
    margin-bottom: 15px;
}

.panel-login {
    background: rgba(0, 0, 0, 0.63);
    color: #FFF;
    border: 1px solid #252525;
    margin-bottom: 60px;
}

.panel-login > .panel-heading {
    color: #FFF;
    border: none;
    background-color: #353535;
}

.panel-login > .panel-heading .panel-title {
    margin: 0;
    padding: 15px;
}

a.accent {
    color: #5aafaf;
}

a.accent:hover {
    color: #7befef;
}

/*SIGNUP STYLING*/
.register-title {
    color: #FFF;
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently supported by Chrome and Opera */
}

#code-output {
    height: auto;
    font-size: 12px;
}

table.site-table thead {
    border-top: 6px solid #90a877;
}

table.site-table thead th {
    font-weight: 500;
    font-size: 16px;
}

table.site-table i {
    margin-right: 10px;
}

label.checkbox-label {
    color: #FFF !important;
}

#agreement-icon {
    margin-left: 18px;
}

/*PROFILE STYLING*/
#profile-banner {
    height: 35vh;
    margin: -80px -4vw 40px -4vw;
    padding-right: 4vw;
    padding-left: 4vw;
    display: flex;
    color: #FFF;
}

#profile-banner h3 {
    align-self: flex-end;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
}

.profile-name > i {
    font-size: 84px;
    display: block;
}

#btn-edit-profile {
    margin-top: -68px;
}

#btn-cancel-profile-edit, #btn-update-user {
    margin-top: -60px;
}

#btn-cancel-profile-edit {
    right: 145px;
    background-color: #ffffff;
}

#profile-details-table tr td:first-child {
    padding-right: 24px;
}

.alert-error {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

.alert-light {
    border: 1px solid #DDD;
}

/*TRANSITIONS*/
.mdl-button--trans {
    -webkit-transition: all 300ms;
    -moz-transition: all 300ms;
    -ms-transition: all 300ms;
    -o-transition: all 300ms;
    transition: all 300ms;
    transform: scale(0);
}

.fab-trans {
    transform: scale(1);
}

/*MARKERS TABLE*/

.site-field {
    padding-bottom: 3px;
}

.marker-info tr:not(.site-link) {
    border-bottom: 1px solid #DDD;
}

.marker-info th, .marker-info td {
    padding: 6px;
}

.marker-info td {
    max-width: 150px;
}

.marker-info th {
    display: inline-block;
}

.site-link {
    margin-top: 20px;
    display: block;
}

.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
}

/*Collapse indicator*/
[data-toggle='collapse'][aria-expanded='false'] i.icon-arrow {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    transition: all 0.3s;
}

[data-toggle='collapse']:not([aria-expanded='false']) i.icon-arrow {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    transition: all 0.3s;
}

.site-update__connect-hs-card.mdl-card {
    width: 396px;
}

.site-update__connect-hs-card > .mdl-card__title > img {
    width: 100%;
    height: auto;
}

.site-update__connect-hs-card > .mdl-card__menu {
    color: #fff;
}

div#followedSites .mdl-card tr:first-child, div.mySites .mdl-card tr:first-child {
    color: #66CCCC;
}

div.mySites .mdl-card__title,
div#followedSites .mdl-card__title {
    height: 48px !important; /* important! to override the all powerful mdl css*/
    padding: 14px !important;
}

div.mySites .mdl-card__title > .mdl-card__title-text,
div#followedSites .mdl-card__title > .mdl-card__title-text {
    font-size: 18px;
    max-width: calc(100% - 32px);
}

div.mySites .mdl-card__menu,
div#followedSites .mdl-card__menu {
    top: 8px !important;  /* centers the material design icon */
}

.login-page-headline {
    background-color: rgba(0, 0, 0, 0.54);
}

.login-page-headline p {
    margin-bottom: 32px;
}

.form-leafpack input[type="number"] {
    width: 100px;
}

.form-streamwatch .field-table input[type="number"] {
    width: 100%;
}

.form-streamwatch .num-input .num-field label {
    width: 100%;
}

.field-table div.form-field {
    padding-bottom: 2px;
    padding-left: 5px;
    padding-right: 5px;

}

.form-leafpack .fa {
    margin-right: 4px;
}

.form-leafpack .mdl-card__supporting-text.default-font {
    color: initial;
}

.form-leafpack .step-row {
    border-left: 3px solid #66CCCC;
    margin-left: 20px;
    padding-left: 20px;
    padding-bottom: 40px;
}

.form-leafpack .std-row {
    margin-left: 20px;
    padding-left: 20px;
    padding-bottom: 40px;
}

.form-leafpack .step-icon {
    font-size: 48px;
    color: #048a8a;
}

.form-leafpack #id_types {
    margin: 0;
    padding: 0;
}

.form-leafpack #id_types .mdl-list__item {
    padding: 10px;
    min-height: initial;
}

.list-leafpack-types li {
    display: inline-block;
}

.macroinvertebrate-card {
    min-height: initial;
    border: 1px solid #DDD;
}

.macroinvertebrate-card .mdl-card__title {
    padding: 8px;
}

.macroinvertebrate-card > .mdl-card__title:first-child {
    background-color: #F5F5F5;
}

.macroinvertebrate-card input[type="number"] {
    display: inline-block;
}

.macroinvertebrate-card label {
    margin-bottom: 0;
}

.indent-left {
    margin-left: 20px;
}

td.indent-left {
    padding-left: 48px !important;
}

td.label, p.label {
    color: rgba(0, 0, 0, .54);
    font-weight: 700;
}

td.block-label {
    color: #66CCCC;
    /* font-weight: 700; */
    font-style: italic;
    font-size: 15px
}

.form-leafpack .step-number {
    display: inline-block;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    background-color: #009999;
    color: #FFF;
    text-align: center;
    font-size: 28px;
    padding: 7px 2px 0 2px;
    margin-right: 13px;
    margin-bottom: 10px;
}

.no-data-icon {
    font-size: 46px;
    color: #DDD;
    margin-right: 24px;
}

/*Intentionally overriding bootstrap's*/
.text-muted {
    color: rgba(0, 0, 0, .54) !important;
}

.small, small {
    font-size: 85%;
}

.mdl-card.full-width .mdl-card__supporting-text, .mdl-card.full-width .mdl-card__title {
    width: 100%;
}

h6.title {
    color: #048a8a;
}

table.no-borders {
    border: 0;
}

table.no-borders td {
    border: 0;
}

.svg-container {
    border-radius: 4px;
    padding: 12px;
}

table.mdl-data-table {
    white-space: normal;
}

table.mdl-data-table:not(.full-width) {
    max-width: 100%;
    overflow: auto;
    display: inline-block;
}

#legend-container table td {
    padding: 8px;
    height: initial;
}

#legend-container table td:first-child {
    padding: 0;
}

hr.dotted {
    border-top: 1px dotted #ccc;
}

.link-card {
    display: inline-block;
    margin-bottom: 1em;
}

.link-card, .link-card:hover {
    text-decoration: none;
    color: initial;
}

.link-card > div {
    padding: 16px 16px 4px 16px;
    min-height: initial;
    width: 330px;
    transition: all 0.2s;
}

.link-card .link-card-title {
    font-weight: 500;
    font-size: 13px;
    margin-top: 4px;
    margin-bottom: 6px;
}

.link-card > div:hover {
    background-color: #f5f5f5;
    box-shadow: 0 1px 3px 1px rgba(60, 64, 67, .2), 0 2px 8px 4px rgba(60, 64, 67, .1);
}

.link-card-icon {
    font-size: 44px;
    float: left;
    margin-right: 15px;
}

.img-branding {
    max-width: 200px;
    margin-top: -10px;
    justify-self: end;
    align-self: center;
}

#clipboard-snackbar {
    z-index: 1051; /* Above bootstrap's modal windows */
}

.grid {
    display: grid;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}

.follow-status {
    justify-self: end;
}

textarea[name="sensor_notes"] {
    height: 95px;
    min-height: 60px;
}

#upload-placeholder {
    position: absolute;
    right: 1em;
    top: 10px;
}

#btn-upload-file {
    margin-left: 10px;
    align-self: center;
}

div.file-preview {
    height: auto;
    padding: 1em;
}

div.file-preview .file-name {
    word-break: break-word;
}

#file-preview-default {
    align-self: center;
}

i.file-icon {
    font-size: 30px;
    color: #66cbcb;
    margin-right: 10px;
}

.mdl-button--file input {
    cursor: pointer;
    height: 100%;
    right: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 300px;
    z-index: 4;
}

.button--disabled {
    color: rgba(0, 0, 0, .26) !important;
    background-color: rgba(0, 0, 0, .12) !important;
    box-shadow: none !important;
    pointer-events: none !important;
    cursor: default !important;
}

/* Detail Page Styling */
.block-label {
    color: #66CCCC
}

/* StreamWatch Site Detail Summary Table */
.streamwatch-site-summary .mdl-data-table th{
    text-align: center;
}

.streamwatch-site-summary .mdl-data-table td{
    text-align: center;
}

.image-grid {
    display: grid;
    gap:15px;
    grid-template-columns: 45% 45%;
}

.site-photo {
    width: 100%;
}

.link {
    color: #336666 !important;
    font-weight: 600;
}

.password-button,
.password-button:hover {
    border: 1px solid #FFF;
    border-radius: 8px;
    background-color: #66CCCC;
    padding: 5px;
    text-decoration: none;
    color: #FFFFFF;
}

/* Hide dialog close button */
.no-title-close .ui-dialog-titlebar-close {
    display: none;
}

/* CSV Export Dialog styles */
.date-picker-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    width: 100%;
}

.date-picker-container label {
    flex: 0 0 auto;
    margin-right: 10px;
}

.date-picker-container input[type="date"] {
    flex: 0 1 auto;
    width: 200px;
    padding: 2px;    
    border: 1px solid #5f5f5f;
    border-radius: 8px;
    text-align: right;
}

/* Style dialog buttons */
.ui-dialog-buttonset button {
    border-radius: 9px !important;
    border: 1px solid #5f5f5f;
}

/* Style dialog title */
.ui-dialog-titlebar {
    background: #66CCCC !important;
    border: none !important;
    border-radius: 8px 8px 0 0 !important;
}

/* Style dialog content */
.ui-dialog {
    border-radius: 8px !important;
}

/* Style dialog title text */
.ui-dialog-title {
    font-weight: bold !important;
}

#csv-export-instructions span {
    font-size: small;
    font-style: italized;
}