/* Reset some default browser styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Set base font styles */
body {
    font-family: 'Outfit', Arial, sans-serif;
    font-size: 100%;
    line-height: 1.5;
    color: #333;
    background-color: #E6F4F1;
}

/* Set link styles */
a {
    color: #007BFF;
    text-decoration: none;
}

a:hover {
    color: #0056b3;
}

/* Set image styles */
img {
    max-width: 100%;
    height: auto;
}

fieldset {
    border: none;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

#content {
    margin: .8rem;
}

h1 {
    font-weight: 700;
    text-align: center;
    margin: 1rem;
    font-size: 2rem;
}

h1.section-heading {
    margin: 0px;
}

/* Common elements */

.submit-button {
    font-family: inherit;
    background-color: #2A7565;
    border: none;
    color: white;
    cursor: pointer;
    border-radius: .5rem;
    padding: .5rem 2rem;
}

.delete-icon {
    color: red;
    font-size: 1rem !important;
    padding-top: .2rem;
}

/* Navbar */

#navbar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

#navbar-links {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}

.navbar-link-item {
    margin: 0 .6rem;
}   

/* Message Banner */

#messages-banner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: .5rem;
    margin: .5rem;
    border-radius: .5rem;
    width: 100%;
}

.message {
    font-weight: 500;
    font-size: 1rem;
    padding: .5rem;
    border-radius: .5rem;
    margin-bottom: .3rem;
    width: 100%;
    text-align: center;
}

.message-standard {
    background-color: rgb(188, 220, 241);
}

.message-alert {
    background-color: #eccd19c2;
}

.message-maintenance {
    background-color: #ffcccc;
}

/* Submit (Add) Log Section */

#add-log-container {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: .5rem;
}

#manual-log-cards,
#log-preview,
#log-preview-text-tv
#log-preview-text-fm {
    display: none;
}

#quick-find-headings-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 .3rem 0;
}

#datetime-input-container {
    display: grid;
    grid-template-columns: 8rem 1fr 5fr;
    align-items: center;
    justify-content: start;
    gap: .5rem;
    padding: .3rem 0;
}

#datetime-picker {
    display: flex;
    justify-content: start;
    gap: 0.5rem;
}

#callsign-band-find-container {
    display: grid;
    grid-template-columns: 8rem 1fr 3fr 1fr;
    align-items: center;
    gap: .5rem;
    padding: .3rem 0;
}

#log-comment-container {
    display: grid;
    grid-template-columns: 8rem 5.75fr;
    align-items: center;
    gap: .5rem;
    padding: .3rem 0;
}

#log-comment-counter {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: .8rem;
}

.textarea-container {
    position: relative;
    display: inline-block;
}

#live-stale-toggle-switch {
    display: flex;
    justify-content: center;
    align-items: center;
}

#band-toggle-switch {
    align-items: center;
    display: flex;
    justify-content: center;
}

#settings-info-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    font-weight: 500;
    margin-top: .5rem;
}

#reporter-info-preview {
    display: flex;
    flex-direction: column;
}

#quick-find-log-container {
    padding: .5rem;
}

#propagation-mode {
    font-family: inherit;
    border: none;
    border-radius: .5rem;
    background: white;
    padding: .5rem;
}

#log-find-callsign-input {
    position: relative;
}

#add-log-submit-button {
    font-family: inherit;
    background-color: darkgray;
    border: none;
    color: white;
    cursor: pointer;
    border-radius: .5rem;
    padding: .5rem 2rem;
}

#log-find-callsign-input {
    display: flex;
    width: 100%;
}

#callsign-input {
    font-family: inherit;
    flex: 1;
    border: none;
    padding: .5rem;
    border-radius: .2rem 0 0 .2rem;
}

#callsign-search-button {
    padding: .5rem;
    border: none;
    border-radius: 0 .2rem .2rem 0;
    color: white;
    background-color: #2A7565;
    font-family: inherit;
    cursor: pointer;
}

.toggle-btn {
    font: inherit;
    background-color: lightgray;
    border: none;
    color: rgb(33, 51, 64);
    cursor: pointer;
    padding: 2px 8px;
    font-size: 0.75rem;
}

.toggle-btn.active {
    background-color: #2A7565;
    color: white;
}

#live-button {
    border-radius: .5rem 0 0 .5rem;
}

#stale-button {
    border-radius: 0 .5rem .5rem 0;
}

#fm-button {
    border-radius: .5rem 0 0 .5rem;
}

#tv-button {
    border-radius: 0 .5rem .5rem 0;
}

#flatpickr-date-input,
#flatpickr-time-input {
    font-family: inherit;
    width: 100%;
    border: none;
    padding: .5rem;
    border-radius: .2rem;
}

#comment-input {
    font-family: inherit;
    width: 100%;
    border: none;
    resize: none;
    padding: .5rem;
    border-radius: .5rem;
}

#add-log-container > div:first-child {
    position: relative;
}

#add-log-container > div:first-child::after {
    content: "";
    position: absolute;
    height: 90%;
    right: -.5rem;
    top: 5%; /* to center the line vertically */
    border-right: .1rem solid #000; /* change color as needed */
}

.hidden-comment {
    display: none;
}

/* Manual Log Section */

#manual-log-link {
    font-weight: 500;
}

#manual-log-cards {
    display: none;
    align-items: center;
    gap: 1rem;
    margin: .5rem 0;
}

#manual-log-header {
    margin-right: 20px;
    width: 220px;
}

#manual-log-toggle-switch {
    margin-right: 20px;
    width: 180px;
}
#manual-log-header {
    display: flex;
    flex-direction: column;
    margin: 0 1rem .5rem;
}

.manual-log-card-field {
    display: flex;
    align-items: center; /* Aligns items vertically in the center */
    justify-content: space-between; /* Puts space between the label and the field */
    width: 100%; /* Ensures it takes up the full width */
}

.manual-log-card-field label {
    margin-right: .5rem; /* Adds some space between the label and the field */
}

.manual-log-form input,
.manual-log-form textarea,
.manual-log-form select {
    flex-grow: 1; /* Allows the field to grow and fill the available space */
    box-sizing: border-box; /* Includes padding and border in the element's total width */
}

.manual-input {
    font-family: inherit;
    border: none;
    padding: .3rem;
    margin: .3rem;
    border-radius: .2rem;
}

/* Preview Section */

#preview-log-readout {
    display: none;
    margin: .6rem;
    padding: .3rem;
}

/* Log & Dicussion Sections */

#container-log-discussion {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: .5rem;
    word-wrap: break-word;
}

.card-group {
    background-color: rgba(150, 174, 190, 0.5);
    margin-right: .6rem;
    border-radius: .5rem;
}

.log-card,
#add-log-container {
    border-radius: .5rem;
    padding: .1rem;
}

#add-log-container {
    background-color: rgba(150, 174, 190, 0.5);
    margin-bottom: .5rem;
}

li.log-card {
    list-style-type: none;
    margin: .3rem;
}

#log-reporter {
    margin-left: 0;
    font-weight: 700;
    font-size: 1rem;
}

#comment-reporter {
    padding: 0 .2rem;
}

.reporter-info {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.comment-text-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
}

.comment-text {
    flex-grow: 1;
    font-size: 1rem;
}

#comment-name-age {
    display: flex;
    align-items: center;
}

#comment-name {
    font-weight: 600;
    margin-right: .2rem;
}

#comment-id {
    font-size: .8rem;
}

#comment-age {
    font-size: .9rem;
    margin-left: .3rrem;
}

#log-box-grid, 
#comment-textarea {
    background-color: lightgray;
    border-radius: .5rem;
}
 
.comment-text {
    padding: 0 .5rem;
}

#comment-cards {
    margin: .5rem;
    padding: .5rem;
}

.comment-card {
    padding: .5rem;
}

#comment-legend {
    padding: 0 .5rem;
    font-weight: 700;
}

#comment-input {
    display: flex;
    gap: 0.5rem;
    padding: 0 0.5rem;
    margin-bottom: .5rem;
}

#comment-title-counter {
    display: flex;
    justify-content: space-between;
    margin-right: .5rem;
}

.char-counter {
    font-size: .8rem;
}

.comment {
    font-family: inherit;
    flex-grow: 1;
    height: 4rem;
    border: none;
    resize: vertical;
    padding: .5rem;
    border-radius: .5rem;
    box-sizing: border-box;
}

#comment-submit {
    background-color: #2A7565;
    border: none;
    color: white;
    cursor: pointer;
    border-radius: .5rem;
    padding: .5rem 1rem;
}

.log-text-id a {
    cursor: pointer;
    font-size: .6rem;
}

#comment-logref-tip {
    font-size: .8rem;
    margin: 0 .5rem;
    font-style: italic;
}

.textbox-input {
    position: relative;
    box-sizing: border-box; /* Include padding and border in element's total width and height */
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
}

#load-more-button {
    font-size: .8rem;
    font-family: inherit;
    background-color: #2A7565;
    color: white;
    border: none;
    border-radius: .3rem;
    padding: .3rem;
    cursor: pointer;
}

/* Recent DX Logs Section */

.log-box-grid {
    display: grid;
    grid-template-columns: 1.2fr 2fr 4fr;
}

#box-channel {
    border-top-left-radius: .5rem;
    border-bottom-left-radius: .5rem;
    background-color: #b8c4c2;
    margin-right: 0;
}

#box-callsign {
    background-color: rgba(150, 174, 190, 0.5);
    margin: 0;
    padding: 0;
}

#box-comment {
    background-color: rgba(217, 217, 217);
    border-top-right-radius: .5rem;
    border-bottom-right-radius: .5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#log-tooltip {
    background-color: rgba(33, 51, 64, 1);
    font-size: .9rem;
    color: white;
    padding: 0 .5rem;
    text-align: right;
    border-bottom-right-radius: .5rem;
}

#mode-band-row {
    display: grid;
    grid-template-columns: 2.8fr 1.2fr;
}

#log-mgmt-box {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin: .2rem;
}

#log-mgmt-box span {
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Aligns child <i> to the bottom */
    font-size: .9rem;
}

.log-text-mode {
    border-top-left-radius: .5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 0 .2rem;
}

#Es-mode {
    background-color: rgba(224, 78, 73, 1);
    color: white;
}

#Tr-mode {
    background-color: rgba(4, 90, 255, 1);
    color: white;
}

#Ms-mode {
    background-color: rgba(42, 117, 101, 1);
    color: white;
}

#Au-mode {
    background-color: rgb(160, 70, 180);
    color: white;
}

#F2-mode {
    background-color: rgb(110, 38, 14, 1);
    color: white;
}

#Local-mode {
    background-color: rgb(190, 190, 190);
    color: black;
}

#Other-mode {
    background-color: rgb(190, 190, 190);
    color: black;
}

.log-text-band {
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 0 .2rem;
}

#fm-band {
    background-color: rgba(102, 26, 102, 1);
}

#tv-band {
    background-color: rgb(100, 100, 100);
}

#wx-band {
    background-color: rgb(135, 49, 235);
}

.log-text-ch {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    font-weight: 700;
    text-align: center;
}

#box-callsign {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#log-text-callsign {
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
}

#log-text-location {
    font-weight: 700;
    text-align: center;
}

/* Pagination Footer */

#pagination-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-right: 0.6rem;
    font-size: 1.2rem;
}

#records-form {
    display: flex;
    align-items: center;
}

#records-form select {
    margin-left: .5rem;
}

/* Settings Page */

.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
    border-radius: .3rem;
}

.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
    border-radius: .3rem;
}

.settings-container {
    margin: .5rem;
}

.settings-button {
    margin-top: .5rem;
}

.card-body {
    border: .1rem solid darkgray;
    border-radius: .5rem;
    padding: .2rem
}

.location-cards {
    display: flex;
    justify-content: flex-start;
    gap: .5rem;
}

#location-edit-delete {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: .5rem;
}

#location-delete-link {
    color: red;
}

/* Footer */

footer {
    text-align: left;
    margin-top: 0.6rem;
}

/* Archive pages */

.archive-section {
    margin: .5rem;
    padding: .5rem;
    border-radius: .5rem;
}

#old-archives-section {
    background-color: rgba(175, 186, 194, 0.4);
}

#archive-container {
    padding: .3rem;
}

.archive-month {
    margin: .3rem;
}

/* About page */

#about-container {
    margin: 1%;
    padding: .5rem;
    justify-content: center;
}

/* Media Query */

@media (max-width: 800px) {

    #datetime-input-container {
        display: grid;
        grid-template-columns: 1fr 1fr 1.5fr 1.5fr;
        align-items: center;
        justify-content: start;
        gap: .5rem;
        padding: .3rem 0;
    }

    #log-comment-container {
        display: grid;
        grid-template-columns: 1fr 3fr;
        align-items: center;
        gap: .5rem;
        padding: .3rem 0;
    }

    #callsign-band-find-container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        align-items: center;
        gap: .5rem;
        padding: .3rem 0;
    }

    #container-log-discussion {
        display: grid;
        grid-template-columns: 1fr;
        gap: .5rem;
        word-wrap: break-word;
    }

    #add-log-container {
        padding: .2rem;
        width: 100%;
        box-sizing: border-box;
    }

    #add-log-container > div:first-child::after {
        display: none;
    }
}
/* Styles for Quick Find Toggle Button */
#toggle-quick-find {
    background-color: transparent;
    border: 1px solid #ccc;
    color: #333;
    cursor: pointer;
    padding: 0.2em 0.5em;
    font-size: 0.9em;
    margin-left: 10px;
    border-radius: 4px;
}

#toggle-quick-find:hover {
    background-color: #f0f0f0;
}

/* Styling for the heading to align button nicely */
#quick-find-headings-container h2 {
    display: flex;
    align-items: center;
}
/* Log Filter Toggle Switch */
#log-filter-toggle-switch {
    display: flex;
}

#log-filter-fm-button {
    border-radius: .5rem 0 0 .5rem;
}

#log-filter-all-button {
    border-radius: 0 .5rem .5rem 0;
}

#log-filter-tv-button {
    border-radius: 0 ;
}

#log-filter-wx-button {
    border-radius: 0 ;
}

#log-filter-toggle-switch .toggle-btn {
    margin: 0;
}
.edit-icon {
    color: #007BFF;
    font-size: 1rem !important;
    padding-top: .2rem;
    margin-right: .5rem;
}

.sticky-icon {
    color: #f0ad4e;
    font-size: 1rem !important;
    padding-top: .2rem;
}


.comment-text-container textarea.form-control {
    width: 100%;
    margin-bottom: .5rem;
}

#map-prop-filter-buttons .toggle-btn[data-prop="Tr"].active {
    background-color: blue;
    color: white;
}

#map-prop-filter-buttons .toggle-btn[data-prop="Es"].active {
    background-color: rgba(224, 78, 73, 1);
    color: white;
}

#map-prop-filter-buttons .toggle-btn[data-prop="Ms"].active {
    background-color: green;
    color: white;
}

#map-prop-filter-buttons .toggle-btn[data-prop="Au"].active {
    background-color: rgb(160, 70, 180);
    color: white;
}

#map-prop-filter-buttons .toggle-btn[data-prop="F2"].active {
    background-color: rgb(110, 38, 14);
    color: white;
}

#map-prop-filter-buttons .toggle-btn[data-prop="Local"].active {
    background-color: tan;
    color: black;
}

#map-prop-filter-buttons .toggle-btn[data-prop="Other"].active {
    background-color: tan;
    color: black;
}
#map-prop-filter-buttons,
#map-band-filter-buttons {
    display: flex;
}

#map-prop-filter-buttons .toggle-btn,
#map-band-filter-buttons .toggle-btn {
    margin: 0;
    border-radius: 0;
}

#map-prop-filter-buttons .toggle-btn:first-child,
#map-band-filter-buttons .toggle-btn:first-child {
    border-radius: .5rem 0 0 .5rem;
}

#map-prop-filter-buttons .toggle-btn:last-child,
#map-band-filter-buttons .toggle-btn:last-child {
    border-radius: 0 .5rem .5rem 0;
}
.log-callsign-link {
    color: #000070;
}
.log-user-link {
    color: #000070;
}


.Tr {
    color: blue;
}

.Es {
    color: rgba(224, 78, 73, 1);
}

.Au {
    color: rgb(160, 70, 180);;
}

.Ms {
    color: green;
}
.F2 {
    color: rgb(110, 38, 14);
}

.local {
    color: tan;
}

.other {
    color: tan;
}
#fullscreen-toggle {
    position: absolute;
    top: 80px;
    left: 10px;
    z-index: 400;
    background-color: white;
    border: 2px solid rgb(136, 169, 178);
    border-radius: 3px;
    cursor: pointer;
    padding: 3px;
}

#fullscreen-toggle:hover {
    background-color: #f4f4f4;
}

#map-wrapper.fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1000 !important;
    background-color: white !important;
}

#map-wrapper.fullscreen #map-container {
    height: 100% !important;
}
#auto-refresh-paused-banner {
    background-color: #ffffe0;
    text-align: center;
}