/* Page Loading */

.loading-box {
    background: #f1f2f3;
    width: 101vw;
    display: flex;
    height: 100vh;
    align-items: center;
    justify-content: center;
    top: -14vh;
    left: -9vw;
    position: absolute;
    z-index: 10;
}

.map-box .loading-box {
    top: 0;
    left: 0;
}

.loading-box img {
    max-width: 100px !important;
}

.visible-box {
    display: none;
}

#swan-data-box {
    margin-top: 6rem;
    overflow-x: scroll;
}

#swan-data-box,
#public-swan-sightings-box,
#add-swan-obs-box,
#add-swan-form-box,
#add-wetland-form-box {
    color: #3f3f3f !important;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 1rem;
}

#public-swan-sightings-box,
#add-swan-obs-box,
#add-swan-form-box,
#add-wetland-form-box {
    background-color: #f0f0f0;
    max-width: 800px;
    margin-top: 6rem;
    padding: 2rem 4rem;
}

#swan-data-box td,
#public-swan-sightings-box td,
#add-swan-obs-box td,
#add-swan-form-box td,
#add-wetland-form-box td {
    color: #423c3c !important;
    font-size: 14px !important;
    border: 1px solid hsla(0, 0%, 50%, .502);
    line-height: 1.5;
    padding: 15px;
    vertical-align: top;
}

#swan-data-box th,
#public-swan-sightings-box th,
#add-swan-obs-box th,
#add-swan-form-box th,
#add-wetland-form-box th {
    font-size: 16px !important;
}

#swan-data-box .sorting_desc {
    font-weight: bold;
}

#swan-data-box label {
    display: flex;
    align-items: center;
}

#swan-data-box h1, #swan-data-box h2 {
    font-size: 35px;
    font-weight: bold;
}

#swan-obs-table td,
#swan-obs-table th {
    border: 1px solid hsla(0, 0%, 50%, .502);
    line-height: 1.5;
    padding: 15px;
    vertical-align: top;
}

.delete-button {
    background-color: #df4759 !important;
    display: inline-block;
    color: white;
    border-radius: 3px;
    font-size: 1rem;
    font-weight: 400;
    padding: .5rem 1rem;
    text-align: center;
    transition: all .3s;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    white-space: nowrap;
}

.cancel-button {
    background-color: #044581 !important;
    display: inline-block;
    color: white;
    border-radius: 3px;
    font-size: 1rem;
    font-weight: 400;
    padding: .5rem 1rem;
    text-align: center;
    transition: all .3s;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    white-space: nowrap;
}

div#swan-obs-table_filter {
    margin-bottom: 10px;
}

div#swan-obs-table_length label select,
div#swans-table_length label select,
div#wetlands-table_length select {
    margin: 10px;
}

/* Forms */

div#frm_form_12_container,
div#frm_form_13_container,
div#frm_form_14_container,
div#frm_form_15_container,
div#frm_form_16_container {
    background: #f0f0f0;
    padding: 42px;
    margin-top: 42px;
    max-width: 800px;
    margin: 42px auto;
}

div#frm_form_12_container .frm_dropzone .dz-column,
div#frm_form_13_container .frm_dropzone .dz-column,
div#frm_form_14_container .frm_dropzone .dz-column,
div#frm_form_15_container .frm_dropzone .dz-column,
div#frm_form_16_container .frm_dropzone .dz-column {
    padding-right: 38px;
}

div#frm_form_12_container .frm_button_submit,
div#frm_form_13_container .frm_button_submit,
div#frm_form_14_container .frm_button_submit,
div#frm_form_15_container .frm_button_submit,
div#frm_form_16_container .frm_button_submit {
    min-width: 110px !important;
    height: 42px !important;
    color: white !important;
    border: none !important;
    background-color: #03447b !important;
    font-size: 17px !important;
}

div#frm_form_12_container .frm_dropzone .dz-progress,
div#frm_form_12_container .frm_dropzone .dz-upload,
div#frm_form_13_container .frm_dropzone .dz-progress,
div#frm_form_13_container .frm_dropzone .dz-upload,
div#frm_form_14_container .frm_dropzone .dz-progress,
div#frm_form_14_container .frm_dropzone .dz-upload,
div#frm_form_15_container .frm_dropzone .dz-progress,
div#frm_form_15_container .frm_dropzone .dz-upload,
div#frm_form_16_container .frm_dropzone .dz-progress,
div#frm_form_16_container .frm_dropzone .dz-upload {
    background: #0e6dbd !important;
}

.ui-datepicker .ui-datepicker-title {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-top: 8px !important;
}

.ui-datepicker .ui-widget-header,
.ui-datepicker .ui-datepicker-header {
    background: #03447b !important;
    background-color: #03447b !important;
    border-radius: 5px 5px 0 0 !important;
}

.ui-datepicker .ui-datepicker-title select.ui-datepicker-month,
.ui-datepicker .ui-datepicker-title select.ui-datepicker-year {
    color: black !important;
    width: 46% !important;
    height: 100px !important;
    margin: 2px 3px !important;
    padding-left: 10px !important;
}

div#frm_form_12_container .ui-datepicker td .ui-state-hover,
div#frm_form_13_container .ui-datepicker td .ui-state-hover,
div#frm_form_14_container .ui-datepicker td .ui-state-hover,
div#frm_form_15_container .ui-datepicker td .ui-state-hover,
div#frm_form_16_container .ui-datepicker td .ui-state-hover {
    background: #03447b !important;
    background-color: #03447b !important;
}

.frm_style_formidable-style.with_frm_style label.frm_primary_label,
.with_frm_style .frm_primary_label,
.with_frm_style .frm_top_container .frm_primary_label .with_frm_style .vertical_radio .frm_radio label,
.with_frm_style .frm_primary_label {
    color: #262626 !important;
}

.bc-form-description {
    padding: 42px;
    max-width: 884px;
    margin: 0 auto;
}

/* Data Tables */

div#swan-obs-table_wrapper,
div#swans-table_wrapper,
div#wetlands-table_wrapper {
    background-color: whitesmoke;
    padding: 35px;
    border: 1px solid #03447b;
    border-radius: 0 5px 5px 5px;
    margin-bottom: 64px;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    background: white;
}

.dataTables_wrapper tr.odd td {
    background-color: #f3f3f3;
}

#swans-table_wrapper,
#wetlands-table_wrapper {
    display: none;
}

.dataTables_filter input[type="search"],
select[name="swan-obs-table_length"],
select[name="swans-table_length"],
select[name="wetlands-table_length"] {
    background: white !important;
}

.bc-comments-col {
    min-width: 200px;
}


/* Swan Admin Dashboard */

div#swan-admin-nav-box {
    position: fixed;
    left: 0;
    top: 0px;
    width: 100vw;
    text-align: center;
    background-color: #f2f2f2;
    height: 84px;
    z-index: 100;
}

div#swan-admin-nav-box ul {
    list-style: none;
    display: flex;
    padding-left: 0;
    align-items: center;
    justify-content: space-evenly;
    max-width: 1042px;
    height: 100%;
    margin: 0 auto;
    opacity: 100% !important;
    color: #03447b;
    font-size: 16px;
}

div#swan-admin-nav-box ul li {
    cursor: pointer;
    margin-left: 0;
    transition: all .2s ease;
}

div#swan-admin-nav-box i {
    margin-right: 4px;
    color: #03447b;
    padding: 3px;
    border-radius: 2px;
}

div#swan-admin-nav-box li:hover {
    opacity: .9;
}

#public-swan-sightings-box,
#add-swan-form-box,
#add-wetland-form-box,
#add-swan-obs-box {
    transition: all .2s ease;
    display: none;
}

div#swan-obs-table_wrapper {
    overflow-x: scroll;
}


/* Utility Classes */
.bc-hidden {
    display: none;
}

.bc-img-modal {
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, .5);
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
}

.bc-img-modal img {
    max-height: 80%;
    width: auto;
}

.bc-post-title-box h1 {
    margin-top: 20px;
}

.bc-post-title-box button {
    margin-bottom: 20px;
    margin-right: 20px;
    background-color: #b27b3d;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 15px;
    width: 120px;
}

.bc-post-title-box button:hover {
    opacity: .8;
}

.bc-flex {
    display: flex;
}

.bc-active-nav-link {
    background-color: #03447b;
    color: white;
}

.bc-active-nav-link i {
    color: white !important;
}

/* Swan Tracker Map */

.swan-tracker-content-modal {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0 !important;
    left: 0 !important;
    background-color: rgba(0, 0, 0, .5);
    display: flex;
    opacity: 0;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    transition: all .3s ease;
}

.swan-tracker-welcome-msg-box {
    background: white;
    border-radius: 10px;
    height: 50vh;
    height: fit-content;
    min-height: 270px;
    text-align: center;
    align-items: center;
    justify-content: flex-start;
    display: flex;
    flex-direction: column;
    padding: 35px;
    position: relative;
    margin-top: -21vh;
}

.swan-tracker-welcome-msg-box h2 {
    border-bottom: 1px solid #cfcaca;
    padding-bottom: 20px;
}

.swan-tracker-welcome-msg-box .close {
    font-size: 34px !important;
    color: #000 !important;
    opacity: .5 !important;
    right: 21px;
    top: -2px;
    position: absolute;
    background: transparent;
    outline: none !important;
    border: none !important;
}

.swan-tracker-welcome-msg-box .close:hover {
    background-color: transparent !important;
}

.swan-tracker-welcome-msg-box img {
    position: absolute;
    right: 15px;
    top: 10px;
}

/* .swan-sighting-photos-box {
    max-width: 420px;
} */

.map-box {
    /* height: calc(100vh - 119px); */
    height: 100vh;
    width: 100vw;
    text-align: center;
    overflow: hidden;
    margin-bottom: -20px;
    position: fixed;
    /* top: 119px; */
    top: 0;
    left: 0;
}

.map-filters {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 100;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #03447b;
    display: flex;
    align-items: center;
    justify-content: center;
}

.map-filters h2 {
    color: white;
    margin: 0 !important;
}

.map-filters form {
    background: #004f93;
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 15px;
    padding-bottom: 10px;
    grid-gap: 9rem;
}

.map-filters form div {
    min-width: 300px;
}

.map-filters select {
    margin-bottom: 0;
    height: 38px;
    border-radius: 3px;
    padding-left: 10px;
    font-size: 16px;
    color: #313131;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat white 100% 50%;
}

.bc-toggle-switch-box {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left;
    min-width: unset;
    display: flex;
    align-items: center;
    grid-gap: 1rem;
}

.bc-toggle-switch {
    width: 60px;
    height: 35px;
    position: relative;
    display: inline-block;
}

.bc-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #2196F3;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

#swan-tracker-map {
    /* height: calc(100vh - 219px); */
    width: 100vw;
    margin-top: 100px;
}

button.gm-ui-hover-effect {
    border-radius: 50px;
    width: 26px !important;
    height: 26px !important;
    top: 8px !important;
    right: 8px !important;
    opacity: .42 !important;
    background: rgba(132, 134, 136, 0.5) !important;
}

button.gm-ui-hover-effect:hover {
    opacity: .42 !important;
    opacity: 1 !important;
}

.swan-sighting-title {
    text-align: center;
    border-bottom: 1px solid #e1e1e1;
    width: 100% !important;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    font-weight: 300;
    font-size: 28px;
}

img[src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M19%206.41L17.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z%22/%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22/%3E%3C/svg%3E"] {
    content: url("/wp-content/plugins/swan-tracker/images/close-infowindow.png");
    margin: 6px !important;
}

.swan-tracker-content-box {
    height: 100vh;
    width: 100vw;
}

.view-swan-sighting-photo {
    max-width: 100% !important;
    width: 100%;
}

.gm-style-iw-d {
    text-align: left;
}

.gm-style-iw.gm-style-iw-c {
    background: rgb(255, 255, 255, .90) !important;
    border-radius: 10px;
}

.bc-photo-flexbox {
    display: flex;
    grid-gap: 10px;
    max-width: 840px;
    flex-direction: row;
    flex-wrap: wrap;
    padding-top: 5px;
}

.bc-photo-flexbox img {
    height: 100%;
    max-width: 48% !important;
    max-width: 100% !important;
}

.cards div h3 {
    font-size: 21px;
}

@media screen and (max-width: 992px) {
    form#filter-swan-sightings {
        display: flex;
        flex-direction: column;
        grid-gap: 10px;
        height: 200px;
        padding: 20px 4px;
    }

    .map-filters h2 {
        display: none;
        height: 0;
    }

    .map-filters form div {
        min-width: 90%;
    }

    .map-filters {
        position: absolute;
        top: 0;
    }

    .swan-tracker-welcome-msg-box {
        width: auto;
        max-width: 96vw;
    }

    #swan-tracker-map {
        height: calc(100vh - 200px);
        width: 100vw;
        margin-top: 200px;
    }

    .bc-photo-flexbox img {
        max-width: 100%;
    }

    div#swan-admin-nav-box li {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 4px;
    }

    div#swan-admin-nav-box {
        height: 200px !important;
        padding-bottom: 10px;
    }

    .cards {
        flex-direction: column;
    }

    .cards div {
        width: 100% !important;
        padding: 10px;

    }

    div#wetlands-table_wrapper,
    div#swans-table_wrapper {
        overflow-x: scroll;
    }

    /* Forms */
    div#frm_form_12_container,
    div#frm_form_13_container,
    div#frm_form_14_container,
    div#frm_form_15_container,
    div#frm_form_16_container {
        padding: 42px;
        padding: 21px;
    }
}

@media screen and (min-width: 993px) {
    .swan-tracker-welcome-msg-box {
        width: auto;
        max-width: 600px;
    }

    #swan-tracker-map {
        height: calc(100vh - 100px);
    }

    .gm-style-iw.gm-style-iw-c {
        padding: 25px !important;
    }
}