/* Pre-generated Tailwind CSS */
*,:after,:before {
    box-sizing: border-box;
    border: 0 solid #e5e7eb
}
:after,:before {
    --tw-content: ""
}

html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    tab-size: 4;
    font-family: Inter, sans-serif;
    -webkit-font-feature-settings: normal;
    font-feature-settings: normal;
    font-variation-settings: normal
}
body {
    margin: 0;
    line-height: inherit;
}
hr {
    height: 0;
    color: inherit;
    border-top-width: 1px
}
abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}
h1,h2,h3,h4,h5,h6 {
    font-size: inherit;
    font-weight: inherit
}
a {
    color: inherit;
    text-decoration: inherit
}
b,strong {
    font-weight: bolder
}
code,kbd,pre,samp {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
    font-size: 1em
}
small {
    font-size: 80%
}
sub,sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}
sub {
    bottom: -.25em
}
sup {
    top: -.5em
}
table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse
}
button,input,optgroup,select,textarea {
    font-family: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    margin: 0;
    padding: 0
}
#prev-slide::before{
	  position: absolute;
  content: '';
  top: -100%;
  right: -125%;
  left: -50%;
  bottom: -80%;

  z-index: 40;
}
#next-slide::before{
	  position: absolute;
  content: '';
  top: -100%;
  right: -50%;
  left: -125%;
  bottom: -80%;

  z-index: 40;
}

.navidot::after{
		  position: relative;
			display: inline-block;
  content: '';
  top: -100%;
  left: -50%;
	width: 200%;
	height: 200%;

  z-index: 40;
}


button,select {
    text-transform: none
}
[type=button],[type=reset],[type=submit],button {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none
}
:-moz-focusring {
    outline: 1px dotted ButtonText
}
:-moz-ui-invalid {
    box-shadow: none
}
progress {
    vertical-align: baseline
}
::-webkit-inner-spin-button,::-webkit-outer-spin-button {
    height: auto
}
[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}
::-webkit-search-decoration {
    -webkit-appearance: none
}
::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}
summary {
    display: list-item
}
blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre {
    margin: 0
}
fieldset {
    margin: 0;
    padding: 0
}
legend {
    padding: 0
}
menu,ol,ul {
    list-style: none;
    margin: 0;
    padding: 0
}
textarea {
    resize: vertical
}
input::placeholder,textarea::placeholder {
    opacity: 1;
    color: #9ca3af
}
[role=button],button {
    cursor: pointer
}
:disabled {
    cursor: default
}
img,svg,video,canvas,audio,iframe,embed,object {
    display: block;
    vertical-align: middle
}
img,video {
    max-width: 100%;
    height: auto
}
[hidden] {
    display: none
}
*,:after,:before {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: #3b82f680;
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: 
}
@media (min-width:768px){
	.md\:h-1\/2 {
		height: 50%!important;
		}
			.md\:w-1\/2 {
		width: 70%!important;
		}
	.md\:h-64 {
	height: 64rem!important
	}
	.md\:max-w-4xl {
		width: 128rem!important
		}
	.md\:left-2 {
	left: 2rem!important;
	}
		.md\:right-2 {
	right: 2rem!important;
	}
		.md\:text-sm {
    font-size: 4rem!important;
    line-height: 6rem!important
}
		.md\:text-s {
    font-size: 4rem!important;
    line-height: 8rem!important
}
		.md\:text-m {
    font-size: 6rem!important;
    line-height: 6rem!important
}

.md\:text-xs {
    font-size: 3rem!important;
    line-height: 3rem!important
}
.md\:leading-tight {
    line-height: 1.5!important
}
        .md\:table-header-small th {
            font-size: 2.5rem!important;/* Smaller font size for table headers */
        }
		.md\:scale-3 {
				    --tw-scale-x: 3;
    --tw-scale-y: 3;
		}
		.rounded-lg {
    border-radius: 2rem!important;
}
.card {
	padding: 1rem!important;
	border-radius: 2rem!important;
	margin-bottom: 0.5rem!important;
	}
svg[class*="bi-thermometer"] {
	transform:scale(4) translate(0px,-1px)!important;
	}
	svg[class*="bi-sun"] {
	transform:scale(4)!important;
	}
	}
	
svg.bi-thermometer-low {
	transform: translate(0px,-1px);
	}
	
svg.bi-thermometer-high {
	transform: translate(0px,-1px);
	}
	
.absolute {
    position: absolute
}
.relative {
    position: relative
}
.bottom-1 {
    bottom: .25rem
		}
.bottom-2 {
	bottom: .5rem
}
.left-0 {
    left: 0px
}
.left-1 {
    left: .25rem
}
.left-2 {
    left: .5rem
}
.right-0 {
    right: 0
}
.right-1 {
    right: .25rem
}
.top-1\/2 {
    top: 50%
}
.left-1\/2 {
    left: 50%
}
.mx-auto {
    margin-left: auto;
    margin-right: auto
}
.mb-1 {
    margin-bottom: .25rem
}
.mb-2 {
    margin-bottom: .5rem
}
.mt-0 {
    margin-top: 0
}
.mt-1 {
    margin-top: .25rem
}
.mt-2 {
    margin-top: .5rem
}
.box-border {
    box-sizing: border-box
}
.flex {
    display: flex
}
.h-30 {
	  width: 7.5rem
		}
.h-20 {
	height: 5rem
	}
.h-10 {
    height: 2.5rem
}
.h-6 {
    height: 1.5rem
}
.h-3 {
		height: 0.75rem
		}
.h-64 {
    height: 16rem
}
.h-auto {
    height: auto
}
.w-1\/3 {
    width: 33.333333%
}
.w-2\/3 {
    width: 66.666666%
}
.w-30 {
	  width: 7.5rem
		}
.w-20 {
	  width: 5rem
		}
.w-10 {
    width: 2.5rem
}
.w-6 {
    width: 1.5rem
}
.w-3 {
	width: 0.75rem
	}
.w-full {
    width: 100%
}
.max-w-4xl {
    max-width: 128rem
}
.max-h-4xl {
    max-height: 64rem
}
.flex-shrink-0 {
    flex-shrink: 0
}
.-translate-x-1\/2 {
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.-translate-y-1\/2 {
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.transform {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.flex-col {
    flex-direction: column
}
.items-center {
    align-items: center
}
.justify-end {
    justify-content: flex-end
}
.justify-between {
    justify-content: space-between
}
.gap-2 {
    gap: .5rem
}
.space-x-2>:not([hidden])~:not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(1rem * var(--tw-space-x-reverse));
    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)))
}
.overflow-hidden {
    overflow: hidden
}
.overflow-x-auto {
    overflow-x: auto
}
.rounded-full {
    border-radius: 9999px
}
.rounded-lg {
    border-radius: .5rem
}
.border-b {
    border-bottom-width: 1px
}
.border-gray-200\/50 {
    border-color: #e5e7eb80
}
.bg-stone-300 {
    --tw-bg-opacity: 1;
    background-color: rgb(214 211 209/var(--tw-bg-opacity))
}
.bg-white\/5 {
    background-color: #ffffff0d
}
.bg-white\/20 {
    background-color: #ffffff34
}
.bg-white\/80 {
    background-color: #ffffffcc
}
.bg-gray-100\/80 {
    background-color: #f3f4f6cc
}
.bg-gray-300 {
    --tw-bg-opacity: 1;
    background-color: rgb(209 213 219/var(--tw-bg-opacity))
}
.p-1 {
    padding: .25rem
}
.p-2 {
    padding: .5rem
}
.pb-0 {
    padding-bottom: 0
}
.px-1 {
    padding-left: .25rem;
    padding-right: .25rem
}
.px-4 {
    padding-left: 1rem;
    padding-right: 1rem
}
.py-0 {
    padding-top: 0;
    padding-bottom: 0
}
.text-left {
    text-align: left
}
.text-right {
    text-align: right
}
.text-center {
    text-align: center
}
.text-sm {
    font-size: .875rem;
    line-height: 1.25rem
}
.text-xs {
    font-size: .75rem;
    line-height: 1rem
}
.font-bold {
    font-weight: 700
}
.font-semibold {
    font-weight: 600
}
.leading-tight {
    line-height: 1.4
}
.text-gray-800 {
    --tw-text-opacity: 1;
    color: rgb(31 41 55/var(--tw-text-opacity))
}
.whitespace-nowrap {
    white-space: nowrap
}
.shadow-md {
    --tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-lg {
    --tw-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.outline {
    outline-style: solid
}
.fill-none {
    fill: none
}
.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}
.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}
.duration-500 {
    transition-duration: .5s
}
.ease-in-out {
    transition-timing-function: cubic-bezier(.4, 0, .2, 1)
}
.backdrop-blur-sm {
    --tw-backdrop-blur: blur(4px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}
.backdrop-blur-xs {
    --tw-backdrop-blur: blur(2px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}
body {
    background-color: #f3f4f6;
    background-image: linear-gradient(to bottom, #e4030380, #ff8c0080, #ffed0080, #00802680, #004dff80, #75078780);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 100vh;
		margin: 0px auto;
}
object {
    width: 100%;
    height: 100%;
    pointer-events: none
}
.font-lcd {
    font-family: Share Tech Mono, monospace
}
.cat-container {
    position: relative;
    width: auto;
    height: auto;
    background-size: cover;
    background-position: center;
    /*border-radius: 50px;*/
    overflow: hidden;
}
.sweat-drop {
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: #add8e6b3;
    border-radius: 50% 50% 50% 0;
    transform: rotate(135deg);
    animation: drop 4s ease-out infinite;
    opacity: 0
}
@keyframes drop {
    0% {
        top: 22%;
        opacity: .75
    }
    80% {
        top: 60%;
        opacity: 0
    }
    to {
        top: 80%;
        opacity: 0
    }
}
.sweat-drop:nth-child(1) {
    left: 33%;
    animation-delay: 0s
}
.sweat-drop:nth-child(2) {
    left: 50%;
    animation-delay: .5s;
    animation-duration: 3.4s
}
.sweat-drop:nth-child(3) {
    left: 55%;
    animation-delay: 1s
}
.sweat-drop:nth-child(4) {
    left: 35%;
    animation-delay: 2s;
    animation-duration: 3.1s
}
.sweat-drop:nth-child(5) {
    left: 65%;
    animation-delay: 1.8s;
    animation-duration: 3.5s
}
.sweat-drop:nth-child(6) {
    left: 46%;
    animation-delay: .3s;
    animation-duration: 4s
}
.hover\:bg-white\/50:hover {
    background-color: #ffffff80
}
.focus\:outline-none:focus {
    outline: 2px solid transparent;
    outline-offset: 2px
}
.focus\:ring-2:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}
.focus\:ring-blue-500:focus {
    --tw-ring-color: #3b82f6
}
.sm\:p-6 {
    padding: 1.5rem
}
.lg\:p-8 {
    padding: 2rem
}
.bg-blue-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(59 130 246/var(--tw-bg-opacity))
}
/*
 * CSS definitions for the classes used in the wmo-image-container.
 * You can add these to your local tailwind-styles.css file.
 */

/* For the main container: <div id="wmo-image-container" class="relative w-30 h-30 ..."> */
.relative {
  position: relative;
}

/* Note: w-30 and h-30 are not standard Tailwind classes. 
   This assumes they correspond to 7.5rem (30 * 0.25rem). Adjust if needed. */
.w-30 {
  width: 7.5rem; 
}

.h-30 {
  height: 7.5rem;
}

.rounded-lg {
  border-radius: 0.5rem;
}

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

.mb-1 {
  margin-bottom: 0.25rem;
}

.shadow-md {
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.bg-stone-300 {
  background-color: rgb(214 211 209);
}


/* For the background image: <img id="wmo-png-bg" class="w-full h-full ..."> */
/*.w-full {
  width: 100%;
}*/

.h-full {
  height: 100%;
}

.object-cover {
  object-fit: cover;
}


/* For the SVG overlay: <img id="wmo-svg-overlay" class="absolute top-0 left-0 w-1/5 h-1/5"> */
.absolute {
  position: absolute;
}

.top-0 {
  top: 0px;
}

/*.left-0 {
  left: 0px;
}
*/
.w-1\/5 {
  width: 20%;
}

.h-1\/5 {
  height: 20%;
}
.w-2\/5 {
  width: 40%;
}

.h-2\/5 {
  height: 40%;
}
.w-3\/10 {
  width: 30%;
}

.h-3\/10 {
  height: 30%;
}
        /* --- @font-face rules for locally hosted fonts --- */
        @font-face {
          font-display: swap; 
          font-family: 'Share Tech Mono';
          font-style: normal;
          font-weight: 400;
          src: url('fonts/share-tech-mono-v15-latin-regular.woff2') format('woff2'); 
        }
        @font-face {
          font-display: swap; 
          font-family: 'Inter';
          font-style: normal;
          font-weight: 400;
          src: url('fonts/inter-v13-latin-regular.woff2') format('woff2'); 
        }
        @font-face {
          font-display: swap; 
          font-family: 'Inter';
          font-style: normal;
          font-weight: 500;
          src: url('fonts/inter-v13-latin-500.woff2') format('woff2'); 
        }
        @font-face {
          font-display: swap; 
          font-family: 'Inter';
          font-style: normal;
          font-weight: 600;
          src: url('fonts/inter-v13-latin-600.woff2') format('woff2'); 
        }
        @font-face {
          font-display: swap; 
          font-family: 'Inter';
          font-style: normal;
          font-weight: 700;
          src: url('fonts/inter-v13-latin-700.woff2') format('woff2'); 
        }

        /* --- General Styles --- */
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f3f4f6; /* Fallback color */
            background-image: linear-gradient(to bottom, 
                rgba(228, 3, 3, 0.5), 
                rgba(255, 140, 0, 0.5), 
                rgba(255, 237, 0, 0.5), 
                rgba(0, 128, 38, 0.5), 
                rgba(0, 77, 255, 0.5), 
                rgba(117, 7, 135, 0.5)
            );
            background-attachment: fixed;
            background-size: cover;
            background-repeat: no-repeat;
            min-height: 100vh;
        }
        
        object {
            width: 100%;
            height: 100%;
            pointer-events: none;
        }
        
        .font-lcd { font-family: 'Share Tech Mono', monospace; }

        .cat-container {
            position: relative;
            width: auto;
            height: auto;
						 padding: 0.1rem;
            background-size: cover;
            background-position: center;
            border-radius: 0.25rem;
            overflow: hidden;
        }

        .sweat-drop {
            position: absolute;
            width: 8px;
            height: 8px;
            background-color: rgba(173, 216, 230, 0.7);
            border-radius: 50% 50% 50% 0;
            transform: rotate(135deg);
            animation: drop 4s ease-out infinite;
            opacity: 0;
        }

        @keyframes drop {
            0% { top: 22%; opacity: 0.75; }
            80% { top: 60%; opacity: 0.1; }
            100% { top: 150%; opacity: 0; }
        }

        .sweat-drop:nth-child(1) { left: 33%; animation-delay: 0s; }
        .sweat-drop:nth-child(2) { left: 50%; animation-delay: 0.5s; animation-duration: 3.4s; }
        .sweat-drop:nth-child(3) { left: 55%; animation-delay: 1s; }
        .sweat-drop:nth-child(4) { left: 35%; animation-delay: 2s; animation-duration: 3.1s; }
        .sweat-drop:nth-child(5) { left: 65%; animation-delay: 1.8s; animation-duration: 3.5s; }
        .sweat-drop:nth-child(6) { left: 46%; animation-delay: 0.3s; animation-duration: 4s; }

        /* --- NEW LOCAL CSS FOR LAYOUT --- */
        .card-container {
					
            display: flex;
            gap: 0.25rem; /* Equivalent to space-x-2 */
            margin-bottom: 0.25rem; /* Equivalent to mb-2 */
        }
        .card {
					
					            align-items: center;
            background-color: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(4px);
            padding: 0.25rem;
            border-radius: 0.5rem; /* rounded-lg */
            box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); /* shadow-md */
        }
        .wmo-card {
            flex: 1 1 35%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
        .table-card {
            flex: 1 1 75%;
            padding-top: 0.25rem;
            overflow-x: auto;
        }
				
        .card-bottom {
					
					
            display: flex;
            gap: 0.25rem; /* Equivalent to space-x-2 */
            margin-top: 0.25rem;
        }
				        .forecast-card {
            flex: 1 1 75%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
						            background-color: rgba(255, 255, 255, 0.8);
        }
        .heatcat-card {
					            background-color: rgba(255, 255, 255, 0.8);
            flex: 1 1 50%;
            /*padding-top: 0.25rem;*/
            overflow-x: auto;
        }
				
				
				
        .table-header-small th {
            font-size: 0.6rem; /* Smaller font size for table headers */
        }
				
				
				
.slider-slide {
  flex-shrink: 0;
	    width: 100%
}