.roboto-thin {font-family: "Roboto", sans-serif; font-weight: 100; font-style: normal}
.roboto-light {font-family: "Roboto", sans-serif; font-weight: 300; font-style: normal}
.roboto-regular {font-family: "Roboto", sans-serif; font-weight: 400; font-style: normal}
.roboto-medium {font-family: "Roboto", sans-serif; font-weight: 500; font-style: normal}
.roboto-bold {font-family: "Roboto", sans-serif; font-weight: 700; font-style: normal}
.roboto-black {font-family: "Roboto", sans-serif; font-weight: 900; font-style: normal}
.roboto-thin-italic {font-family: "Roboto", sans-serif; font-weight: 100; font-style: italic}
.roboto-light-italic {font-family: "Roboto", sans-serif; font-weight: 300; font-style: italic}
.roboto-regular-italic {font-family: "Roboto", sans-serif; font-weight: 400; font-style: italic}
.roboto-medium-italic {font-family: "Roboto", sans-serif; font-weight: 500; font-style: italic}
.roboto-bold-italic {font-family: "Roboto", sans-serif; font-weight: 700; font-style: italic}
.roboto-black-italic {font-family: "Roboto", sans-serif; font-weight: 900; font-style: italic}

body {max-width: 1300px; margin: auto; font-family: "Roboto", sans-serif;}
.forecast-selection {padding: 20px}
.select-outlet {}
.select-outlet select {display: block; padding: 5px 20px 5px 20px; margin-bottom: 20px; border-radius: 5px}
.select-outlet button {padding: 10px; margin-left: 10px; border-radius: 5px}
.forecast-button {display: inline}
.forecast-button a {background: #666; border: none; color: #fff; padding: 10px 20px 10px 20px; border-radius: 5px; text-decoration: none}
.forecast-table {width: 100%; overflow-x: scroll; margin: 20px 0px}
table {border: 1px solid #666}
table tr {}
table tr:first-child {font-weight: bold; text-align: center; color: #fff; background: #6955d5}
table tr td {min-width: 100px}
.section {width: 100%}
.left {width: 60%; float: left; overflow-x: scroll}
.right {width: 35%; float: right; margin-left: 10px}
.forecast-chart {padding: 0px}
.forecast-chart img {width: 100%; height: auto}
.ai-chat {}
.ai-chat input {padding: 10px; width: 80%; border: 1px solid #999; border-radius: 5px}
.ai-chat button {padding: 10px; margin-left: 10px; border-radius: 5px}
#response {white-space: pre-wrap; word-wrap: break-word; padding: 10px; background-color: #f8f8f8; border: 1px solid #ddd; border-radius: 4px; margin-top: 10px}
footer {display: inline-block; width: 100%}

@media (max-width: 480px) {
	.forecast-button {display: inline-flex; margin-bottom: 10px}
	.section {padding: 0px 5px 0px 5px}
	.left {width: 100%}
	.right {width: 100%}
}