.gallery-card {
    position: relative;
    display: inline-block;
    padding: 0px;
    margin: 0.6vw;
    border-radius: 20px;
    width: 25vw;
    height: fit-content;
}
.gallery-card:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.05);
}

.validate-agree {
    background-color: #78c9ab;
}

.validate-disagree {
    background-color: #eb734d;
}

.validate-unsure {
    background-color: #fbd78b;
}

/*
We make sure that the image holder is positioned relatively so that the validation menu can be positioned absolutely
with respect to the image holder. This allows the validation menu to be placed over the actual image (like an overlay).
*/
.image-holder {
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.gallery-card:hover:after {
    opacity: 1;
}

.static-gallery-image {
    width: 100%;
    height: auto;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

#gallery-validation-button-holder {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 11.5%;
    z-index: 2;
}

#gallery-card-agree-button {
    width: 33%;
    border-right: 1px solid #dcdbdb;
    background-color: #78c9ab;
    color: #2d2a3f;
}

#gallery-card-disagree-button {
    width: 34%;
    background-color: #eb734d;
    color: #2d2a3f;
}

#gallery-card-unsure-button {
    border-left: 1px solid #dcdbdb;
    width: 33%;
    background-color: #fbd78b;
    color: #2d2a3f;
}

.card-header {
    padding: 5px 5px 3px 7px;
    font-family: 'raleway-bold', sans-serif;
    font-size: 1vw;
}

.card-info {
    padding-bottom: 0.5vw;
    padding-left: 0.5vw;
    padding-right: 0.5vw;
    font-size: 0.9vw;
    font-family: 'raleway-regular', sans-serif;
    color: #2d2a3f;
    border-width: 0 1px 1px 1px;
    border-color: #dcdbdb;
    border-style: solid;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    cursor: default;
}
.gallery-card:hover > .card-info {
    border-width: 0; /* Using a drop shadow on hover, and we don't need both the border and shadow. */
}

.card-data {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    font-size: .7vw;
    height: 2.5vh;
}

.card-severity {
    display: flex;
    align-items: center;
    width: 42%;
    height: 100%;
    flex-direction: row;
    padding-left: 7px;
}

.label-severity-header {
    padding-right: .25vw;
}

.label-severity-content {
    display: flex;
    flex-direction: row;
}

.no-severity-header {
    opacity: 60%;
}

.card-tags {
    display: flex;
    align-items: center;
    width: 39%;
    height: 100%;
    flex-direction: row;
    right: 0px;
}

.label-tags-header {
    padding-right: .25vw;
}

.label-tags-holder {
    display: flex;
    align-items: center;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}

.gallery-expanded-view-info-tags .label-tags-holder {
    align-items: start;
    overflow-y: auto;
}

.label-tags-content {
    text-overflow: ellipsis;
    width:fit-content;
    color: black;
}

.label-icon-gallery {
    --iconWidth: 1.1vw;
    width: var(--iconWidth);
    z-index: 1;
}

.card-validation-info {
    display: flex;
    align-items: center;
    width: 19%;
    height: 100%;
    flex-direction: row;
    padding-left: 5px;
}

.validation-info-content {
    display: flex;
    flex-direction: row;
}

.validation-section-content {
    display: flex;
    width: 50%;
    height: 100%;
    flex-direction: column;
    cursor: pointer;
    /* Prevent text selection. */
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.validation-info-count-container {
    position: relative;
    display: flex;
    flex-direction: row;
}

.validation-info-count {
    display: flex;
    width: 60%;
    height: 100%;
    flex-direction: column;
    justify-content: center;
}

.validation-info-image {
    width: 50%;
    margin: 2%;
}

/* The AI icon is positioned to partially overlap the thumps up/down icons. */
.ai-icon {
    position: absolute;
    top: -43%;
    left: -16%;
    height: 75%;
}

.ai-tooltip {
    width: 200px;
}

.validation-info-thumbs-down {
    margin-top: 5%;
}

.validation-button, .validation-button-selected {
    opacity: 0;
    font-size: 0.75vw;
    font-weight: bold;
    font-family: 'raleway-regular', sans-serif;
    background-color: white;
    border-style: none;
    color: #2d2a3f;
}

.gallery-card:hover .validation-button {
    opacity: 0.75;
}

.gallery-card:hover .validation-button-selected {
    opacity: 1;
    background-color: gray;
}

.expanded-view-background-card {
    opacity: 50%;
}

.expanded-view-no-severity {
    filter: opacity(0.2);
}

.expanded-view-severity-content {
    width: 100%;
}

.severity-circle {
    color: white;
    border: 1px solid #2d2a3f;
    width: 0.7vw;
    height: 0.7vw;
    border-radius: 50%;
    text-align: center;
    margin: 2px;
    font-size: 0.9vw;
}

.no-severity-circle {
    opacity: 40%;
}

#current-severity {
    border: 2px solid #2d2a3f;
    background-color: #2d2a3f;
    color: #2d2a3f;
}
.gallery-expanded-view-close {
    left: 0px;
    top: 10%;
    position: relative;
    font-size: 30px;
    cursor: pointer;
}

.gallery-expanded-view {
    display: flex;
    height: 90vh;
    position: relative;
    border-radius: 20px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.3);
    flex-direction: column;
    align-items: center;
    width: 52vw;
    right: 3vw;
    font-family: 'raleway-regular', sans-serif;
    font-size: 18px;
    justify-self: end;
}

.label-timestamp, .pano-timestamp {
    color: #2d2a3f;
}

.label-timestamp {
    display: flex;
}

#gsv-info-button {
    width: 0.9vw;
    height: 0.9vw;
    margin-left: 5px;
    margin-top: 2px;
}

.expanded-view-severity-header,
.expanded-view-tag-header,
.expanded-view-temporary-header,
.expanded-view-description-header {
    font-weight: bold;
    color: #2d2a3f;
}

.expanded-view-temporary-body, .expanded-view-description-body {
    color: #888787;
}

.expanded-view-description-body {
    overflow: auto;
}

.gallery-expanded-view-header {
    width: 100%;
    height: 100%;
    margin-top: 15px;
    font-family: 'raleway-bold', sans-serif;
    font-size: 1.5vw;
    color: #2d2a3f;
}

.gallery-expanded-view-pano {
    width: 100%;
    height: 63%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-bottom: 4.75%;
}

.actual-pano {
    border: 6px solid transparent;
    border-radius: 5px;
    background-color: transparent;
}

.gallery-expanded-view-pano-display {
    position: relative;
    z-index: 10;
    width: 90%;
    height: 100%;
}

.gallery-expanded-view-pano-paging {
    height: 30px;
    width: 50px;
    color: black;
    text-align: center;
    font-size: 50px;
    cursor: pointer;
    border: 0;
    padding: 0;
    background-color: transparent;
}

.gallery-expanded-view-pano-paging:disabled {
    color: lightgray;
}

.gallery-expanded-view-info {
    display: flex;
    padding-bottom: 1%;
    height: 24%;
    /* Full width of modal minus 50px for prev arrow and 50px for next arrow, plus a few extra for the pano border. */
    width: calc(100% - 105px);
    flex-wrap: wrap;
    font-size: 0.85vw;
    overflow: hidden;
}

.gallery-expanded-view-info-timestamps {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 15%;
    font-size: .8vw;
    padding-bottom: 0.9%;
    padding-top: 0.1%;
}

.gallery-expanded-view-info-severity {
    width: 20%;
    height: 40%;
    display: flex;
    flex-direction: column;
}

.gallery-expanded-view-info-validation {
    width: 15%;
    height: 40%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 0px 10px 0px 5px;
}

.gallery-expanded-view-info-tags {
    width: 65%;
    /* This ensures the height has to be a minimum of 5.5vw, which fits two rows of tags. */
    height: max(40%, 5.5vw);
    padding-bottom: 2%;
    display: flex;
    flex-direction: column;
}

.gallery-expanded-view-info-temporary {
    width: 35%;
    /* Reduce the 45% by however much the tags container's height was adjusted. */
    height: calc(45% - (max(40%, 5.5vw) - 40%));
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.gallery-expanded-view-info-description {
    width: 65%;
    /* Reduce the 45% by however much the tags container's height was adjusted. */
    height: calc(45% - (max(40%, 5.5vw) - 40%));
    display: flex;
    flex-direction: column;
}

.gallery-expanded-view-pano:hover .expanded-view-validation-button {
    opacity: 0.6;
}

.expanded-view-validation-button, .expanded-view-validation-button-selected {
    opacity: 0;
    font-size: 1.25vw;
    font-weight: bold;
    font-family: 'raleway-regular', sans-serif;
    background-color: white;
    border-style: none;
    color: #2d2a3f;
}

.gallery-expanded-view-pano:hover .expanded-view-validation-button-selected {
    opacity: 1;
    background-color: gray;
}

.expanded-view-top-holder {
    display: flex;
    align-content: space-between;
    margin-bottom: 5px;
    /* Full width of modal minus 50px for prev arrow and 50px for next arrow, plus a few extra for the pano border. */
    width: calc(100% - 105px);
}

.expanded-view-severity-circle {
    width: 1.5vw;
    height: 1.5vw;
    margin: 2px;
}

#expanded-view-current-severity {
    border: 2px solid black;
    padding: 0px;
    background-color: black;
    color:white;
}
.gallery-filter {
    cursor: pointer;
}

.gallery-filter:disabled {
    cursor: default;
    opacity: 50%;
    pointer-events: none;
}

.severity-filter-image {
    background-color: white;
    width: 25px;
}

.severity-filter-image svg {
    fill: white;
    transition: fill 0.3s;
}

.severity-filter-image.severity-1.selected svg, .severity-filter-image.severity-1.highlight svg {
    fill: #f4db48;
}
.severity-filter-image.severity-2.selected svg, .severity-filter-image.severity-2.highlight svg {
    fill: #f1bc41;
}
.severity-filter-image.severity-3.selected svg, .severity-filter-image.severity-3.highlight svg {
    fill: #ee9d3a;
}
.severity-filter-image.severity-4.selected svg, .severity-filter-image.severity-4.highlight svg {
    fill: #eb7e32;
}
.severity-filter-image.severity-5.selected svg, .severity-filter-image.severity-5.highlight svg {
    fill: #e85f2b;
}

.severity-filter {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 30px;
}

#severity-select {
    display: flex;
    flex-direction: row;
    margin-left: -3px;
}

.gallery-filter-button, .gallery-tag {
    padding: 0px 5px;
    border-style: solid;
    border-width: 1px;
    border-radius: 5px;
    text-align: left;
    background-color: white;
    color: black;
    border-color: black;
    width: fit-content;
    white-space: nowrap;
    max-width: 98%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gallery-filter-button-selected {
    background-color: #76c9ab;
    color: white;
    border-color: #76c9ab;
}

.gallery-filter-button:hover {
    background-color: rgba(167,222,202,0.1);
    color: #40bd90;
    border-color: #40bd90;
    white-space: normal;
}

.gallery-filter-validation-button {
    display: block;
    margin: 4px 2px;
}

#clear-filters {
    background-color: transparent;
    border-color: transparent;
    cursor: pointer;
}

#clear-filters h6 {
    margin-top: 5px;
    color: darkgray;
}
#gallery {
    display: flex;
    overflow: hidden;
}

#card-filter {
    padding: 0 5px 5px 5px;
    width: inherit;
}

.filter-section-holder {
   padding-bottom: 30px;
}

#labels-not-found {
    display: none;
}

.paging {
    display: inline-block;
    font-size: 30px;
    background-color: white;
    border-radius: 5px;
    border-width: 1px;
    margin: 0 2px;
}

.paging:disabled {
    border-width: 0.2px;
    opacity: 50%;
}

#horizontal-line {
    border-bottom: 1px solid gray;
}

#filter-header {
    margin-bottom: 15px;
}

.filter-subheader {
    margin-bottom: 6px;
}

/* Note that the side bar is out of the "flow" of the grid container b/c it is fixed when we aren't loading anything. */
.sidebar {
    padding-left: 10px;
    min-height: calc(100vh - 610px);
    height: 100%;
    width: 239px;
    grid-row: 1/2;
}

#labels-not-found-text {
    position: absolute;
    width: 100%;
    text-align: center;
    padding-top: 20px;
}

.page-control {
    padding-bottom: 15px;
    display: flex;
    justify-content: center;
    margin: auto;
    width: 25%;
}

.gallery-footer {
    padding-top: 5px;
    padding-bottom: 10px;
    position: relative;
    width: 100%;
    min-height: 40px;
    text-align: center;
    color: #585c63;
    font-size: 12px;
    font-style: italic;
    line-height: 1.6em;
    font-family: raleway, sans-serif;
}

#footer-spacing {
    padding-top: 100px;
}

.grid-container {
    display: grid;
    grid-template-areas:
        'main gallery-modal'
        'paging gallery-modal';
    grid-gap: 2px;
    padding: 0 10px 10px 10px;
}

.cards {
    display: flex;
    flex-flow: row wrap;
    margin-left: 239px; /* Offset to compensate for the space taken up by the sidebar. */
}

/* There is no specific intended function for hover/click on labels on the gallery page.
We should allow the pointer events to pass through and behave the same way as they do on the background. */
.label-icon-gallery, .icon-outline {
    pointer-events: none;
}

.face-outline {
    stroke: #2D2A3F;
}

.facial-feature {
    fill: #2D2A3F;
}
.gallery-tag {
    display: inline-block;
    margin: 2px 2px;
}

.thumbnail-tag {
    cursor: default;
    font-weight: bold;
    padding: 1px 5px;
    color: #2d2a3f;
}

.not-added {
    background-color: white;
    font-size: .6vw;
    margin: 1px;
}

.additional-count {
    margin: 3px -2px;
    border-style: none;
    font-weight: bold;
    cursor: pointer;
    background-color: inherit;
}

#tags-header {
    display: none;
}

.additional-tag-popover {
    width: fit-content;
    max-width: 250px;
}

.additional-tag-popover-content {
    padding: 5px 10px;
}