/*
Theme Name: MyCoast
Template: Zephyr
Version: 1.0
Author: UpSolution
Theme URI: http://blueurchin.com/
Author URI: http://blueurchin.com/
*/

@import url("/blueurchin-media/fonts/mycoast-icons/style.css");

 /* fixing time boxes that were a bit too small */
 .gfield_time_hour>input[type=number], .gfield_time_minute>input[type=number] {
     max-width: 100px !important;
 }

 .vessel-stats {
     display: flex;
     flex-wrap: wrap;
     gap: 1rem;
     max-width: 1600px;
     margin: 1rem 0;
 }

 .vessel-stat-card {
     flex: 1 1 200px;
     padding: 1rem;
     background: #f5f5f5;
     max-width: 225px;
     border-radius: 4px;
     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 }

 .vessel-stat {
     font-weight: bold;
     margin-bottom: 0.5rem;
 }

 .vessel-total {
     color: #666;
 }
  
.search-result-busy {
    /* Gray out the div */
    filter: grayscale(100%);
    /* Diagonal striped effect */
    background-image: repeating-linear-gradient(
            45deg,
            rgba(0, 0, 0, 0.1),
            rgba(0, 0, 0, 0.1) 10px,
            transparent 10px,
            transparent 20px);
    /* Ensure the content inside is also affected, if necessary */
    color: rgba(0, 0, 0, 0.5);
}

.w-iconbox-icon {
    display: none;
}

.ed_button {
    /* https://github.com/pugwonk/kingtides/issues/1159 */
    width: auto !important;
}

/* GIS map stuff */
#report-map-L {
    height: 300px;
    width: 100%;
}
#report-map-OL {
    height: 300px;
    width: 100%;
}
/* End GIS map stuff */

/* Time line stuff */
#timeline-container {
    height: 300px;
    width: 100%;
}

#timeline-container img {
    height: 300px;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
}

.slidecontainer {
    width: 100%; /* Width of the outside container */
    display: flex;
    flex-direction: row;
}

@media screen and (max-width: 600px) {
  .slidecontainer {
    display: none;}
  #report-marius-loc{
    padding-left: 0px !important;}
  /* .l-subheader, .l-section{
    margin-left: .5em;
    margin-right: .5em; */
}

.time-slider-buttons{
  width: 100%; /* Width of the outside container */
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 4rem; 
}

.time-slider-button{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem; /* optional, but helps layout */
  background: none; /* optional, reset button styling */
  border: none;     /* optional */
}

.time-slider-button img {
  display: inline-block;
  width: 30px;
  height: 30px;
}

div.timeline-next-date{padding-top: 1em;
  padding-bottom: 1em;
}

#timeline-container img{border-radius: 4px;}

/* The slider itself  */
.slider {
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    width: 100%; /* Full-width */
    height: 25px; /* Specified height */
    background: #d3d3d3; /* Grey background */
    outline: none; /* Remove outline */
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
    opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: #04AA6D; /* Green background */
    cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: #04AA6D; /* Green background */
    cursor: pointer; /* Cursor on hover */
}

p#tlStartDate, p#tlEndDate {
    min-width: 250px;
    margin-top: 10px;
}

p#tlStartDate{
  text-align: right;
  margin-right: 30px;
}

p#tlEndDate{
  text-align: left;
  margin-left: 30px;
}

input#Pick {
  margin-right: 30px;
  margin-left: 30px;
}
/* End time line stuff */

/*Add your own styles here:*/

.live-container {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.live-toggle {
    flex-shrink: 0;
}

.livebar-bg {
    visibility: hidden;
    margin-left: 10px;
    background-color: #aaaaaa;
    width: 100%;
    height: 20px;
}

.livebar-bar {
    background-color: #2cbf9b;
    width: 50%;
    height: 100%;
}

.uppercase{
    text-transform: uppercase;
}

.white-hyperlink, a.white-hyperlink:link, a.white-hyperlink:visited{color: white !important;}

img.beach-junk-image {
    height: 30px;
    max-width: 30px;
    margin: 0 auto;
    display: block;
    padding-right: 10px
}

div.beach-junk-image-container {
    width: 30px;
    display: inline-block;
    vertical-align: middle;
}

img.map-legend {
    width: 32px;
}

/* map pins in legend */
.loclat, .loclon {
    display: none
}

/* hide lat/lon fields on Gravity Forms entires */
#notifymap td {
    vertical-align: text-top;
}

/* align notify map to top of cell */

.gform_next_button {background: orange !important;
    border: none !important;
    color: white !important;
    min-height: 45px !important;
    font-size: 1rem !important;
    line-height: 1 !important;
    border-radius: 5px !important;
}
.gform_previous_button {background: silver !important;
    font-size: 1rem !important;
    line-height: 1 !important;
    min-height: 45px !important;
    border: none !important;
    color: white !important;
    border-radius: 5px !important;
}
div.gform_page_footer input[type="submit"] {background: orange !important} 


/* End giant section of stuff Chris copy-pasted from Zephyr CSS to try and make buttons look nicer */

/* Stuff to replicate Woo's [hr] behaviour */
.woo-sc-hr {
    border-bottom: 1px solid #e6e6e6;
}

.woo-sc-hr, .woo-sc-divider {
    clear: both;
    display: block;
    margin-bottom: 20px;
    padding-top: 20px;
    width: 100%;
}

/* End woo [hr] stuff */

#storm-tools-button-box{
  margin-top: .25em
} 

/*Damage/No Damage background for report pages*/
#damage-header-box{
    position: absolute;
    bottom: 0px;
}

h5.damage, h5.removed {
    /* background-color: orange; */
    color: white;
    padding: .5rem;
    font-size: 1.0rem;
    text-align: center;
}

h5.nodamage {
    color: white;
    /* background-color: #a9cc53; */
    padding: .5rem;
    font-size: 1.0rem;
    text-align: center;
}

.damage, .removed {
    width: 200px;
    background: #ffb44d;
}

.nodamage {
    width: 200px;
    background-color: #a9cc53;
}

#report-marius-loc-and-map {
    display: flex;
    flex-direction: row;
    background: #478dc8;
    width: calc(100%);
    height: 400px;
    align-items:center;
    padding-left: 50px;
    position: relative;
    background-image: url(https://mycoast.org/blueurchin-media/misc-theme-img/background-topo.svg);
    background-repeat: no-repeat; 
    background-size: 50% auto;
}

#report-marius-loc {
    width: calc(100%*2/3);
    padding-top: 50px;
    padding-left: 10%;
}
#report-marius-loc a {
    text-decoration: underline;
    text-decoration-style: dashed;
    text-decoration-thickness: 1%;
}

.report-marius-loc-desc {
  color: white !important;
  margin: 2em 3em 2em 0em;
}
.report-marius-loc-button {
  float: right;
  margin-right: 3em;
}

#report-marius-loc h2 {
    color: white !important;
}

#report-marius-map {
    width: calc(100%*1/3);
    background: grey;
    height: 400px;
}

#marius-map-overlay {
    width: calc(100%);
    height : 400px;
    background: white;
    position: absolute;
    opacity: 0.05;
    top: 0px; 
    left: 0px;
    z-index: 99; 
}

#no-click-map{
  background: white;
  opacity: 0.05;
  z-index: 99; 
}

}
#report-main-content{
    display: flex;
    flex-direction: row;
    background: #478dc8;
    width: calc(100%);
}
#report-left-column{
    width: calc(100%*2/3);
    padding-top: 50px;
}

#report-sidebar{
    width: calc(100%*1/3);
    margin-left: 125px;
    padding-top: 50px;
    padding-right: 75px;
}

#report-marius-map .mapp-menu-toggle {
    display: none;
}

#report-marius-map .mapp-geolocate-control {
    display: none;
}

#report-marius-map .gmnoprint {
    display: none;
}

.report-images-and-weather {
    display: flex;
    flex-direction: row;
}

div.post-author-comment{
  background: #f9f9f9;
  border-radius: 4px;
  border-color: #f9f9f9
  border: solid;
  padding: 4em;
  color: #06253e;
  font-style: italic;
  margin-left: 1.5em;
  padding-top: 3em;
  padding-left: 3em;
  padding-right: 3em;
  margin-bottom: 3em; 
}

div.report-data-block{background: #F9F9F9;
    margin-bottom: 1em;
    padding: 2em;
}

.report-data-block p, .report-data-block li{
    margin-bottom: 0px;
    padding: 0px;
    font-size: .9em;
}

.report-data-block h5{
    color: #06253e;
    font-size: 1.1em;
    margin-bottom: 10px;
    font-weight: bold; 
}


div.report-images {
    /* This will be twice as big as the small item. */
    -webkit-flex: 3 0 0;
    flex: 3 0 0;
    margin: 0px 11px 0px 0px;
    padding: 8px;
    padding-right: 2%;
}

#report-weather {
    -webkit-flex: 1 0 0;
    flex: 1 0 0;
    /* margin: 7px;
    padding: 8px; */
    /* padding-right: 2%; */
}

.report-damage {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
}

div.damage-box {
    width: 33.3%;
    margin: 0px 11px 11px 0px;
    padding: 18px;
    border-style: solid;
    border-color: #f9f9f9;
    border-radius: 7px;
    text-align: left;
}

div.damage-box-empty {
    border: none
}

.report-field-container-horiz {
    flex-direction: row;
}

.report-field-container-vert {
    flex-direction: column;
}

.report-field-container {
    display: flex;
    background-color: #fafafa;
    margin: 10px;
}

.report-field-label {
    font: normal normal bold 15px/21px Roboto;
    flex: 1 1 0px;
    color: #06253E;
}

.report-field-value {
    font: normal normal normal 15px/21px Roboto;
    flex: 1 1 0px;
    letter-spacing: -0.45px;
    color: #06253E;
}

.report-field-value-list {
    list-style-image: url("/blueurchin-media/report-bullet.svg");
}

.adminbuttons-post-status {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 15px;
    margin-left: 10px;
    line-height: 1.2em;
    max-width: 200px;
}

div[class*="search-result-visibility-section-"] label {
font-size: .8em !important;
}

.adminbuttons-buttons {
    display: flex;
    flex-direction: row;
    gap: 4px;
    flex-wrap: wrap;
    font-size: .7em;
    }

/* Too narrow to support two columns */
@media all and (max-width: 640px) {

    .report-images-and-weather, .report-damage, div.damage-box, #page {
        -webkit-flex-flow: column;
        flex-direction: column;
    }

    .report-images-and-weather > .report-images, .report-images-and-weather > #report-weather {
        /* Return them to document order */
        -webkit-order: 0;
        order: 0;
    }

    div.damage-box {
        width: 100%;
    }

    .report-images-and-weather > #report-weather > div#map {
        min-height: 50px;
    }
    #report-marius-map{display: none}
    #report-marius-loc {width: 100%;}
    #report-left-column, #report-sidebar, #report-weather {width: 100%;
        padding: 0px; margin: 0px; margin-top: 2em; 
    }
    .download-button{display: none}    

}

.w-btn i {
    position: relative !important;
}

/* Making SCs menu fit */
a.w-nav-anchor {
    padding-right: 10px !important;
    padding-left: 10px !important;
}

h3 {
    text-align: center
}

/* Counter on front page */
h6.w-counter-title {
    color: white;
    font-size: 2.5em;
}

.front-page-text {
    font-size: 1.5em;
    line-height: 1.2em;
}

/* Removing large gaps between VC sections */
.l-section.height_medium {
    padding-top: 0px;
    padding-bottom: 0px;
}

/* Tweak to make you make mycoast go header space reasonably */

div.l-section-h.i-cf {
    padding-bottom: 10px !important;
    padding-top: 20px !important;
}

/* Making header visible under menu in mobile */
@media all and (max-width: 640px) {
    main#page-content {
      padding-top: 0px;
  }
    .l-section.height_medium{
      padding-top: 35px;
    }
}

img.icon_in_search {
    height: 18px;
}

/* Cleaning up search/reports pages */
td.report-photos {
    width: 100px;
}

.stateadmin-approve, .search-results td {
    border-bottom: 0 !important;
}

p.report-notes {
    padding-left: 15px !important;
    font-style: italic !important;
}

/* Hide as-yet-unused "add photo" buttons */
.hideme {
    display: none
}

/* Hide search box on wpDataTables tables */
#table_1_filter, #table_2_filter, #table_3_filter {
    display: none;
}

/* Hide author and date for KT Recaps: */
div.w-blog-post-meta {
    display: none;
}

/*King Tide Recap Table*/
table.kt-recap {
    font-size: 1em;
}

table.kt-recap tbody tr th[class="no"], table.kt-recap tbody tr td[class="no"], table.kt-recap tbody tr th[class="n"], table.kt-recap tbody tr td[class="n"] {
    background: silver !important;
}

table.kt-recap tbody tr th[class="yes"], table.kt-recap tbody tr td[class="yes"], table.kt-recap tbody tr th[class="y"], table.kt-recap tbody tr td[class="y"] {
    background: orange !important;
}

table.kt-recap thead tr th:first-child, table.kt-recap tbody tr td:first-child {
    width: 12em;
    min-width: 12em;
    max-width: 12em;
    word-break: break-all;
}

.kt-recap-box {
    border: 3px dashed #FBAB00;
    border-radius: 15px;
    padding-top: 15px;
    padding-bottom: 15px;
    background: white;
    margin-bottom: 15px;
}

.kt-recap-container {
    max-width: 1500px;
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
}

/* End of KT Recap Pages */

/* Frontier Post Cleanup */

fieldset.frontier-new-menu, fieldset.frontier-new-list {
    border-style: none;
    box-shadow: none
}

a#frontier-post-add-new-link {
    display: inline-block;
    padding: .327em 1em;
    color: white !important;
    text-align: center;
    border: none;
    text-decoration: none;
    font-size: .7em;
    font-weight: 700;
    /* Make inputs the same size as normal text */

    font-family: inherit;
    /* Make inputs use the correct typeface instead of the browser default */

    cursor: pointer;
    /* Inputs need pointers! */

    overflow: visible;
    width: auto;
    /* IE fix */

    line-height: 1.618em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    white-space: nowrap;
    background: #428bca;
    font-weight: 200;
    text-transform: uppercase;
    box-shadow: 0 0 0 0 #888888;
    -webkit-box-shadow: 0 0 0 0 #888888;
    -moz-box-shadow: 0 0 0 0 #888888;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-shadow: none;
    -webkit-appearance: caret;
    /* Remove input shadowing on iOS */

    -moz-appearance: caret;
    /* mobile firefox too! */
}

a#frontier-post-add-new-link:hover {
    border-top-color: #28597a;
    background: #28597a;
    color: #ccc;
}

a#frontier-post-add-new-link:active {
    border-top-color: #1b435e;
    background: #1b435e;
}

/*Facet Fixes*/
div.stateadmin-approve div.facetwp-template div.search-results table tbody tr td form table tbody tr td {
    font-size: .9em
}

div.fs-wrap {width: 270px !important;}

input.facetwp-date {
    width: 270px;
    margin-bottom: 20px;
    height: 40px;
}

.facetwp-facet.facetwp-type-fselect {
  margin-bottom: 15px;
}

div.search-results {
    font-size: 1em;
     display: flex;
     flex-direction: column;
 }
 
div.fs-label {
   margin-top: 11px;
   margin-bottom: 10px;
   margin-left: 4px;
 }
 
 .fs-label-wrap {
   border: 1px solid #e1e4e5;
   border-radius: 4px;
 }

 div.download-button{
     float: right;
     position: absolute;
     z-index: 95;
     top: -65px;
     right: 55px
 }

.search-result-location {
   font-size: 1.4em;
   margin-bottom: 0px;
 }

.admin-button{
    text-transform: capitalize;
    background-color: #478dc8;
    border: none !important;
    color: white !important;
    font-size: 1em;
    border-radius: 25px !important;
    height: 30px;
    padding-left: 1em;
    padding-right: 1em;
}

#main article.post-12233.page.type-page.status-publish.hentry section.entry div.fourcol-one.last {
    height: 175px;
    margin-bottom: 0px
}

/* Search page fixes */
#main article.post-12233.page.type-page.status-publish.hentry section.entry div.fourcol-one.last {
    height: 175px;
    margin-bottom: 0px
}

/* damage/nodamge tag for wpfacet*/
.damage-Y {
    background: orange;
    font-weight: bold;
    padding: 2px 9px;
    color: white;
    font-size: .7em;
    font-style: italic;
}

/* flag/noflag tag for wpfacet*/
.interesting-Y {
    background: orange;
    font-weight: bold;
    padding: 2px 9px;
    color: white;
    font-size: .7em;
    font-style: italic;
}

/* Search Results Photos */

 .search-result-photos{
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     width: 100%;
     margin-top: 10px;
     margin-bottom: 10px;
 }
 .search-result-single-image-wrapper {height: 115px;
     margin-right: 5px;
     margin-bottom: 5px;
 }
 .search-result-video-placeholder {
     padding: 10px;
 }
 img.search-result-single-image {
     width: auto;
     height: 100%;
     aspect-ratio: 1; /* will make width equal to height (500px container) */
     object-fit: cover;
     border-radius: 4px;
     border-style: solid;
     border: 0px; 
     }
 

.search_submitTime {
    font-style: italic
}

/* end of facet fixes */

/* Report page tweaks */

h3.report-date-time{
    color: #06253E;
    font-weight: bold;
    font-size: 1.2em;
    margin-left: 0px;
    padding-left: 0px;
    background: white;
}

/* div#map{marginborder-top: 2em} */

#riverine-overview p, #weather-info p, #tidal-info p, #report-weather p, #kyt-tidal-info p, .weather-credit-sidebar, #tidal-info p{
    margin-top: 1em;
    font-size: .7em;
    line-height: 1.1;
}

#weather-info p.data, #riverine-overview p.data, #tidal-info p.data{
    background: #F9F9F9;
    margin: .3em !important;
    padding-left: 1.5em;
    padding-top: .5em;
    padding-bottom: .5em;
    font-size: .7em;
}

#weather-info img.report-page-weather-icon{padding-left: 2em}

.report-date-time, .report-weather-overview-title, .report-tidal-overview-title, .report-riverine-overview-title, .search-report-filter-header{    /* margin-top: 20px; */
    text-align: left;
    background: #EFEFEF 0% 0% no-repeat padding-box;
    color: #06253E;
    padding-left: .5em;
    font-weight: bold;
    font: normal normal bold 1.2em Roboto;
    padding-top:0px;
}

.report-weather-icon {
    width: 100%;
    text-align: left;
    font-size: 2.5em;
    margin-bottom: 1em;
    margin-left: 25px;
}

.weather-credit-sidebar{
    margin-bottom: 2em !important;
    display: block;
}

.tidal-credit-sidebar, p#t-and-c-link{
    position: relative;
    bottom: 1.5em;
    margin-bottom: .5em;
    display: block;
    font-size: .7em;
}

p#kyt-t-and-c-link{
    position: relative;
    bottom: -1.25em;
    font-size: .7em;
}

p.station-used, p.gauge-used{font-size:.9em;
    line-height: 1.3em;
}


/* .tideTime, .tideTimeNear {position: relative;
    bottom: .5em;
} */

span.tideTime {background-color: grey;
    font-weight: bold;
    padding: .5em;
    color: white;
}

span.tideTimeNearish {background-color: #ffb44d;
    font-weight: bold;
    padding: .5em;
    color: white;
}

span.tideTimeNear {background-color: #cc33ff;
    font-weight: bold;
    padding: .5em;
    color: white;
}

/*Facet boxing*/
.search-results {
    display: block;
    margin-bottom: 9px  !important;
    background: #f9f9f9;
    border: 1px solid #f9f9f9;
    border-radius: 5px;
    padding: 25px;
}

/* Legend for beach heatmap */
#beach-heatmap-legend {
    font-family: Arial, sans-serif;
    background: RGBA(255, 255, 255, .7);
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-top: 5px;
    margin: 10px;
    border-radius: 3px;
}

/* The map in FacetWP searches */
#facet-map {
    margin-bottom: 30px;
}

.w-btn, .button, button[type="submit"]:not(.w-btn), input[type="submit"]{
     margin-bottom: .4em;   
     border-radius: 2em !important; 
    }

button.woo-sc-button.custom.small {
    margin-top: 5px
}

.labels {
    background-color: white;
    font-family: "Lucida Grande", "Arial", sans-serif;
    font-size: 10px;
    /*      font-weight: bold; */
    text-align: center;
    border: 2px solid silver;
    white-space: nowrap;
    padding: 5px;
    border-radius: 7px;
}

div.w-copyright {
    /* padding: 50px 150px; */
    /* padding-top: 4rem;*/
    padding-bottom: 3rem;
    margin-top: 30px; 
    background-color: #06253e;
    color: white;
    display: flex;
    flex-direction: column;
}

h6.counter-box-text {
    padding-top: 0;
    top: -20px;
    position: relative;
}

/*---Fixing JIG overriding menus----*/
div.jig-border {
    z-index: 95 !important;
}

.jig-overflow{
    border-radius: 4px;
}
.justified-image-grid{
  margin-bottom: 30px;
}

/*---adding vertical margin----*/
.jig-clearfix, .justified-image-grid-html{
  margin-top: 2em;
  margin-bottom: 3em;
}

button.facetwp-map-filtering {
    font-family: Roboto, Arial, sans-serif;
    text-transform: capitalize;
    color: black;
    background-color: #ffb44d;
    position: absolute;
    top: 270px;
    margin-left: 80px;
    border: none !important;
    color: white !important;
    min-height: 25px !important;
    font-size: .75rem !important;
    line-height: .75 !important;
    border-radius: 25px !important;
    padding-left: 15px;
    padding-right: 15px;
}

button.facetwp-vessel-editing {
    font-family: Roboto, Arial, sans-serif;
    text-transform: capitalize;
    background-color: #478dc8;
    border: none !important;
    color: white !important;
    min-height: 25px !important;
    font-size: .75rem !important;
    line-height: .75 !important;
    border-radius: 25px !important;
    padding-left: .75em;
    padding-right: .75em;
}


/*Facet WP Tweaks*/

.image-facet-title{
    position: relative;
    bottom: 32px;
    color: white;
    padding-left: 5px;
    padding-top: 2px;
    padding-bottom: 1px;
    background: rgba(84, 84, 84, 0.73);
}

/* Flood stages */
.flood-action {
    color: black;
    background-color: #ffff00;
}

.flood-flood {
    color: black;
    background-color: #ff9900;
}

.flood-moderate {
    color: white;
    background-color: #ff0000;
}

.flood-major {
    color: black;
    background-color: #cc33ff;
}

.flood-popup-lineitem {
    width: 100%;
    margin: 0;
}

#map-legend {
    margin-top: 10px;
    display: flex;
    flex-display: row;
    justify-content: space-evenly;
}

.map-legend-item {
    display: flex;
    flex-display: row;
}

#map-legend img {
    width: 18px;
    margin-right: 5px;
}

/* /* Menu Fixes for update */
/* .w-nav.type_desktop .w-nav-anchor:not(.level_1) {
/*     background-color: #25282B;
    color: #BDBFC1; 
    }
    
.w-nav.type_desktop a:hover{
    color: #ff9900;
    }

.w-nav-anchor a:hover{
    color: #ff9900 !important;
} */

/* Tide Chart non- parts */
/* You might wonder why I can't just make tidechart a class. Well, it didn't work very well. */
#tidechart {margin-right: 4px; height: 10em; margin-bottom: 30px; position: relative; bottom: 1em;}
#tidechart .chart-legend {display: none} /* Failed to hide this using the normal calls */
#tidechart line {stroke: #e0e0e0} /* Tick lines on Y axis */
#tidechart .dot {fill: #ffb44d;}
#tidechart .y2-axis {display: none} /* Can't stop this coming up otherwise */
#tidechart path.area {stroke: #404040;}
#tidechart path.area {fill: url(#TideChartGradient);}
#tidechart .line-series path {stroke-width: 2px;}
#tidechart .axis path { stroke: none; }
#tidechart .axis line { stroke: none; }
#tidechart text { fill: #06253E; }

.tide-legend-blueline {
    font-weight: 700;
    color: #468dc8;
    background: none;
    margin-left: 3px;
}
.tide-legend-purpleline {
    font-weight: 700;
    color: #660066;
    background: none;
    margin-left: 3px;
}
.tide-legend-greyline {
    font-weight: 700;
    color: #808080;
    background: none;
    margin-left: 3px;
}
.tide-legend-redline {
    font-weight: 700;
    color: #f16c77;
    background: none;
}
.tide-legend-orangeblob {
    font-weight: 700;
    color: #FFB44D;
    background: none;
    margin-left: 3px;
}
.tide-othertext {font-size: 0.7em;}
.tide-summary-othertext {font-size: 1.1em;}

.tidechart-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* Know Your Tides Table styling */

.kyt-tide-table {
    height: 250px;
    overflow-y: auto;
    border: 1px solid #f2f4f5;
}

.kyt-tide-table thead th {
    position: sticky;
    top: 0;
    background: #f2f4f5;
}

p.scrollable-note{    display: block;
    line-height: 1.1;
    font-style: italic;
    font-size: .7em;
    margin-bottom: 5px;
}
h6.upcoming-tides{margin-bottom:2px}

/* End Tide Chart non-map parts */

/* Tide Chart map parts */

#tsmap {
    height: 500px;
}

#pac-input {
    background-color: #fff;
    font-family: Roboto;
    font-size: 15px;
    font-weight: 300;
    margin-left: 12px;
    padding: 0 11px 0 13px;
    text-overflow: ellipsis;
    width: 323px;
    margin-top: 7px;
}

#pac-input:focus {
    border-color: #4d90fe;
}

span.cur-station {font-weight: bold;
    text-transform: uppercase;
}
.mllw-desc, .kyt-tidal-info {
    display: block;
    line-height: 1.1;
    font-style: italic;
    font-size: .7em;
    margin-top: 1em;
}
#tideapp {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.tideapp-column {
    flex: 1 1 0px;
    margin: 10px;
    min-width: 300px;
}

/* End Tide Chart map parts */

.hourly-tides-table {
    font-size: .7em;
}
h1.title-location{font-size:3em;
    text-align: left;
    color: white;
    margin-bottom: 0px;
    margin-top: 0px;
    padding: 0px;
}
@media screen and (max-width: 500px){
  h1.title-location{font-size:2em;
      text-align: left;
      color: white;
      margin-bottom: 0px;
      margin-top: 0px;
      padding: 0px;
  }
  #report-marius-loc{
    padding-top: 0px;
  }
}
h4.byline, h4.byline a:link {color: white;
    font-size: 1.25rem;
    padding-top: 0px;
}

.stormtools-button{position: relative;
    top: -.4em;
}

body .gform_wrapper_22 .gform_body .gform_fields .gfield .ginput_container_fileupload .gform_button_select_files {color: red; background: orange; border: orange}
#gfield_upload_rules_87_22 {display: none;
}
#footer-logos-flexbox{
    display: flex;
    justify-content: center;
}
#footer-logos{
    border-radius: 7px;
    background: white;
    margin-top: 1em;
    max-width: 600px;
    display: flex;
    justify-content: center;
    padding: 1em;
}
/* Making photoswipe link to report bigger font */
div.pswp__caption__center a:link, .navigation-div a:visited {font-size: 2em !important;}

#report-admin{background: #f9f9f9;
    padding: 5em;
    border-radius: 4px;
    padding-bottom: 10em;
    max-width: 1500px;
    min-width: 800px;
}

#report-admin h3, #reply-title h3{
    font-size: 2.5em;
    text-align: left;
    color: #06253e;
}

#report-adminbox{
    display: flex;
    justify-content: left;
    background: #f9f9f9;
}

#report-reassigns{
    display: flex;
    justify-content: left;
}

.report-all {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
}
.report-inner-container{
  max-width: 1600px;
}

.location-page-photos-header{margin-top: 1.5em;
  margin-bottom: 1.5em;
}

.egc-found {background: #f16c77;
  border-radius: 7px;
  border: 1pm;
  color: white;
  font-weight: bold;
  padding-left: .5em;
  padding-right: .5em;
  padding-top: .1em;
  width: 265px; 
  font-size: .8em;
  margin-left: .75em;
  
}

/* highlight text css */
.highlight-pink {
/* padding-left: .15em;
border-radius: .25em 0 .25em 0;
background-image: linear-gradient(
  -100deg,
  rgba(241, 108, 119, 0.2),
  rgba(241, 108, 119, 0.7) 95%,
  rgba(241, 108, 119, 0.1)
); */
  padding-left: .2em;
  padding-right: .2em;
  border-radius: .2em 0 .2em 0;
  background-image: linear-gradient(to right, #ffb44d, #E94057cc, #f16c77);
  color: white;
}

/* Styling beach cleanup years buttons */

.beach-years-list{

}
.beach-years-list li{
  float: left;
  list-style: none;
  text-align: center;
  background-color: #707070;
  margin-right: .75em;
  width: 6em;
  line-height: 3em;
  margin-left: 0px
}

.beach-years-list li a{
text-decoration: none;
color: #FFFFFF;
display: block;
font-weight: bold;
}

.beach-years-list li a:hover{
  text-decoration: none;
  font-weight: bold;
  color: #FFFFFF;
  background-color: #ffb44d;
}

.beach-years-list-selected{
  background-color: #478dc8 !important; 
}

.beach-report-breakdown {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 75px;
}
div.beach-report-leaderboard{
    flex-grow: 1;
}
div.beach-report-breakdown-items{
    flex-grow: 1;
}

.adminbuttons-originaltype{
  text-align: left;
  font-style: italic;
}

.w-comments-title{display: none}

/*  Gravity forms upload button 2024-05-01  */
  input::file-selector-button {
    font-weight: bold !important;
    border: thin solid #478dc8;
    border-radius: 50px;
    background: #478dc8;
    padding-right: 2em;
    padding-left: 2em;
    color: white !important; 
    font-size: .95em;
  }
  
  /* Can form */
  
  .page-id-166619 :root{
      --blue:#4580BA;
      --light-orange: #FFC572;
      --box-height: 40px;
  }
  .page-id-166619 html, body, label, #page-content, .gform_wrapper{
      
      font-family: 'Roboto';
      font-size: 18px !important;
  }
  .page-id-166619 .l-canvas{
      background-color: #4580BA; !important;
      color: white !important;
  }
  .page-id-166619 #page-content{
      background-color: #4580BA; !important;
      max-width: 1200px !important;
      margin: 0 auto !important;
  }
  .page-id-166619 h1{
      color: #FFC572; !important;
  }
  .page-id-166619 .gform_page_fields{
      color: white;
  }
  .page-id-166619 input::file-selector-button{
      background-color: #FFC572 !important;
      color: #4580BA; !important;
  }
  .page-id-166619 .gf_step{
      font-size: 23px !important;
  }
  .page-id-166619 .gf_step_active{
      color: white !important;
  }
  .page-id-166619 .gf_step_pending{
      color: white !important;
  }
  .page-id-166619 .gf_step:hover{
      color: #FFC572; !important;
  }
  .page-id-166619 .gfield-choice-input{
      color: white !important;
      background: white !important;
  }
  /* input type text */
  .page-id-166619 input[type="text"], input[type="number"], textarea, select{
      background-color: white !important;
      color: #4580BA; !important;
      /* placeholder opactiy 0.5 */
      
  }
  .page-id-166619 input[type="text"]::placeholder{
      opacity: 0.5 !important;
  }
  .page-id-166619 input[type="file"]{
      padding: 0 !important;
      border: none !important;
  }
  .page-id-166619 #gform_next_button_92_27{
      background-color: #FFC572; !important;
      color: white !important;
      min-width:300px;
  }
  .page-id-166619 li.gfield{
      margin: 21px 0 !important;
  }
  .page-id-166619 .gfield_time_hour, .gfield_time_minute, .gfield_time_ampm  {
      margin-top: 0 !important;
  }
  /* input checkbox checked */
  .page-id-166619 input[type="checkbox"]:checked{
      background-color: #FFC572; !important;
      color: #4580BA; !important;
  }
div.no-images-message{padding-top: 3em;}

button.vessel-edit-delete-buttons {
background: #ffb44d;
margin-right: .5em;
color: white;
border-radius: 5em;
padding-left: .75em;
padding-right: .75em;
font-size: .75em;
}

.branford-box {
    display: flex;
    flex-direction: row;
}

.branford-seal {
    padding-right: 30px;
}
.legend {
  margin: 20px;
  font-family: Arial, sans-serif;
}

.svg-legend {
  display: flex; /* This makes the images display in a row */
  gap: 10px; /* Adds space between the images */
  align-items: center; /* Aligns items vertically if they differ in height */
}

.svg-legend img {
  display: block; /* Ensures no extra space around the images */
  height: 40px; /* Optional: Set a uniform size for all images */
}

/* Structuring videos on report pages */
.videos-container {
    display: flex;
    flex-wrap: wrap; /* Allows wrapping if too many videos */
    gap: 20px; /* Adds spacing between videos */
    justify-content: center; /* Centers videos */
    align-items: center; /* Aligns them nicely */
    padding: 20px; /* Adds some padding around */
}

.report-page-videos {
    flex: 1 1 300px; /* Allows videos to be flexible, but not smaller than 300px */
    max-width: 400px; /* Prevents videos from getting too large */
}

video {
    width: 100%; /* Makes the video fill its container */
    height: auto; /* Keeps aspect ratio */
    border-radius: 8px; /* Optional: Rounds corners */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Optional: Adds a subtle shadow */
}

/*adding styling for the new menubar reports pending for state leads*/
div.need-approval-menubar{
  font-size: .8em;
  border-radius: 5px;
  padding: .2em;
  padding-left: 1em;
  padding-right: 1em;
  background: #f06c76;
  font-weight: bold; 
  color: white;
  margin-top: .5em;
}