.sn-current-box{
	font-size: .85rem;
	border: 1px solid #ccc;
	padding: 5px;
	margin: 5px 0;
	background-color: #f0faff;
	color : black;
	border-radius: 4px;
	}

.tide-box {
	font-size: .85rem;
	border: 1px solid #ccc;
	padding: 5px;
	margin: 5px 0;
	background-color: #fff7f2;
	color : black;
	border-radius: 4px;
	}

.sn-current-box table, .tide-box table {
    width: 100%;
    border-collapse: collapse;
}

.sn-current-box th, .sn-current-box td, .tide-box th, .tide-box td {
    padding: .2rem;
    text-align: left;
    border-bottom: 1px solid #ddd;
	 font-family: monospace;
}

.station-icon {
    font-size: 16px;
    margin-right: 8px;
    font-weight: bold;
    display: inline-block;
    vertical-align: middle;
}

.current-icon {
    color: #cc6600; /* Orange to match chart popup */
}

.tide-icon {
    color: #0066cc; /* Blue to match chart popup */
}


.current-row-slack {
	background-color: rgb(232, 238, 248);
}
.current-row-ebb {
	background-color: rgb(252, 238, 236);
}
.current-row-flood {
	background-color: rgb(253, 250, 244);
}

.tide-row-high {
	background-color: rgb(240, 248, 234);
}
.tide-row-low {
	background-color: rgb(243, 255, 255);
}

.sn-current-caption, .tide-caption {
	 font-weight: bold;
	 font-size: 1.1rem;
	 color: #222;
	 margin-bottom: 5px;
}

.current-table-container, .tide-table-container {
	 max-height: 200px;
	 overflow-y: auto;
}

.currents-table, .tides-table {
	 width: 100%;
}

.fetch-currents-btn {
    background-color: #1e88e5;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    margin: 10px 0;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.fetch-currents-btn:hover {
    background-color: #1565c0;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}


.fetch-tides-btn {
    background-color: #e5781e;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    margin: 10px 0;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.fetch-tides-btn:hover {
    background-color: #c07015;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.flx-row {
	display: flex;
	flex-direction: row;
	gap: .2rem;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}

.latlon {
	font-family: monospace;
	font-size: .9rem;
	color: #333;
}

.error{
	color: red;
}