html,
body,
body div,
span,
button,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    font-family: sans-serif;
    line-height: 1.5;
}

body.my-observations-wrapper {
    background-color: lightgrey;
}

.my-observations-wrapper header {
    border: 0;
    width: 100%;
    background-color: #041e49;
}

section.main {
    min-height: 667px;
    max-width: 800px;
    position: relative;
    margin: auto;
    padding: 20px;
    background-color: #fff;
}

section.main.full-width {
    max-width: none;
}

.cacheWarning {
    /*font: 14px sans-serif;*/
    font-size: .875rem;
    font-weight: bold;
    color: #4c78c1;
    text-align: center;
    padding-bottom: 16px;
}

.cacheWarning img {
    vertical-align: bottom;
}

.submissionsContainer {
    position: relative;
    top: 0;
    left: 0;
    height: auto;
}

.loadMore,
.nosubs {
    position: relative;
    height: auto;
    background-color: #c5dbff;
    text-align: center;
    padding: 10px;
    cursor: pointer;
}

.nosubs {
    background-color: #d6e6ff;
}

.loadMore span,
.nosubs span {
    /*font: 1em sans-serif;*/
    color: #2b5aa7;
    pointer-events: none;
}

.PhotoRow,
.submissions_template {
    position: relative;
    margin: 0 0 32px 0;
    top: 0;
    left: 0;
    height: auto;
}

.submissions_template {
    display: none;
}

.PhotoContainer {
    position: absolute;
    top: 0;
    left: 0;
    height: 200px;
    width: 4000px;
}

.Photos {
    position: relative;
    top: 0;
    left: 0;
    height: auto;
    width: auto;
    display: inline-block;
}

.PhotoWrapper {
    position: relative;
    height: 234px;
    width: auto;
    overflow: hidden;
    display: none;
}

.photoStatusOverlay {
    width: 200px;
    text-align: center;
    position: absolute;
    color: rgb(133, 161, 199);
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    /* IE 9 */
    -webkit-transform: translateX(-50%) translateY(-50%);
    /* Safari and Chrome */
}

.photoLabelContent {
    position: relative;
    text-align: center;
    height: auto;
    width: inherit;
    margin-top: 10px;
    /* portlet override */
}

.photoLabelContent span {
    position: relative;
    font-size: .75rem;
    color: #7192c9;
}

.submissionTitleBold {
    color: #ffffff;
    text-shadow: none;
}

.submissionTitleReg {
    color: #c5dbff;
    text-shadow: none;
}

.photoMetaWrapperTop {
    border-bottom: 1px solid #ffffff;
    padding: 0px 0px .5rem;
    line-height: 1.5;
}

.photoMetaWrapperMid {
    border-bottom: 1px solid #ffffff;
    line-height: 1.5;
    padding: .5rem 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.photoMetaWrapperMid:last-child {
    border-bottom: none;
}

.photoMetaWrapperMid span {
    width: 48%;
}

.photoMetaWrapperMid span:first-child {
    font-weight: 600;
}

.photoMetaWrapperMid span:last-child {
    text-align: left;
}

.photoMetaWrapperBottom {
    padding: .5rem 0px 0px;
    line-height: 1.5;
}

.photoContent {
    position: relative;
    height: auto;
    width: auto;
    overflow: hidden;
    padding: 0 1rem;
    background-color: #e5f0ff;
}

.showOnMapContainer {
    position: relative;
    height: 40px;
    /* portlet override */
    width: auto;
    overflow: hidden;
    margin-top: 1rem;
    padding: .25rem .75rem .25rem 0;
    top: 0px;
    cursor: pointer;
}

.showOnMapContainer span {
    text-shadow: none;
    color: #4c78c1;
    margin-left: .25rem;
}

#user-message {
    font-size: 1rem;
    border-top: 2px solid #e8e7e7;
    border-bottom: 2px solid #e8e7e7;
    color: #2f5c96;
    font-weight: 400;
}

.submissionTitle {
    position: relative;
    height: auto;
    width: auto;
    overflow: hidden;
    background-color: #2f5c96;
    margin-bottom: .5rem;
    padding: .75rem;
    color: #ffffff;
    font-size: 1.125rem;
    font-weight: 600;
}

.memberHeader {
    position: relative;
    height: auto;
    width: auto;
    overflow: hidden;
    padding: 0;
}

.memberHeader .ui-select {
    margin-top: 1em;
    margin-bottom: 0;
}

.mhName {
    font-size: 1.25rem;
    font-weight: bold;
    color: #041e49;
}

.logoContainer {
    position: relative;
    height: 76px;
    width: auto;
    overflow: hidden;
    background-color: #041e49;
    max-width: 800px;
    margin: 0 auto;
}

.logoContainer img {
    position: absolute;
    -webkit-transform: translate(0px, -50%);
    -ms-transform: translate(0px, -50%);
    transform: translate(0px, -50%);
    top: 38px;
    left: 0;
    width: 100%;
    height: auto;
    max-width: 394px;
}

#loading_rotator {
    position: absolute;
    top: 0;
    left: calc(50% - 30px);
    width: 60px;
    height: 60px;
    overflow: hidden;
    /*display:none;*/
}

#loading_observations {
    position: absolute;
    top: calc(50% - 15px);
    left: calc(50% - 15px);
    width: 30px;
    height: 30px;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
}

#loading_observations img {
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
}

#loading_rotator img {
    top: 0;
    left: 0;
}

#rg1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#rg1 [role="radio"] {
    border: 2px solid transparent;
    border-radius: 5px;
    position: relative;
    padding: 0.125em;
    padding-left: 1.5em;
    padding-right: 0.5em;
    cursor: default;
    outline: none;
    width: 100%;
}

#rg1[role="radiogroup"] [role="radio"]::before,
#rg1[role="radiogroup"] [role="radio"]::after {
    top: 13px;
}

.carousel-item img {
    width: 100%;
    height: auto;
}

.carousel-control-next-icon {
    width: 40px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23FFF' viewBox='0 0 512 512'%3e%3cpath d='M396.394 255.607a28.207 28.207 0 0 0-8.272-19.111L160.901 9.275c-11.026-11.059-28.94-11.059-39.999 0-11.058 11.026-11.058 28.941 0 39.999l206.333 206.333L120.902 461.94c-11.058 11.058-11.058 28.973 0 39.999 11.059 11.059 28.972 11.059 39.999 0l227.221-227.221a28.196 28.196 0 0 0 8.272-19.111z'/%3e%3c/svg%3e");
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.5));
}

.carousel-control-prev-icon {
    width: 40px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23FFF' viewBox='0 0 512 512'%3e%3cpath d='M114.106 254.607c.22 6.936 2.972 13.811 8.272 19.11L349.6 500.938c11.026 11.058 28.94 11.058 39.999 0 11.058-11.026 11.058-28.94 0-39.999L183.266 254.606 389.599 48.273c11.058-11.059 11.058-28.973 0-39.999-11.058-11.059-28.973-11.059-39.999 0L122.379 235.495c-5.3 5.3-8.052 12.174-8.273 19.111z'/%3e%3c/svg%3e");
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.5));
}

label.picker-label {
    margin-top: 1rem;
    padding: 0.5rem 0.75rem 0.25rem 0;
    color: #56575a;
}

.carousel-indicators {
    bottom: 20px;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.5));
}

.carousel-caption {
    bottom: 10px;
}

.carousel-caption p {
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .5);
}

@media screen and (min-width: 576px) {
    #rg1 [role="radio"] {
        width: 46%;
    }
}

/* black gradient behind navigation arrows */
.carousel-control-next {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.2) 100%);
}

.carousel-control-prev {
    background-image: linear-gradient(to left, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.2) 100%);
}

.links {
    margin-bottom: 1rem;
}

.links a {
    margin-right: 1rem;
    text-decoration: none;
    color: #4c78c1;
    padding-bottom: 4px;
}

.links a.active {
    font-weight: bold;
    border-bottom: 2px solid #4c78c1;
}

.guest-accounts-iframe-container {
    height: calc(100vh - 220px);
    /* Adjust 220px based on header/other elements' height */
    width: 100%;
    margin-top: 1rem;
}

#additional-useful-info ul {
    list-style-type: none;
    padding-left: 0;
}

/* Hide tab links by default to prevent flashing on page load */
#measurements-link,
#accounts-link,
#guest-accounts-link {
    display: none;
}