/* Da je prikazovalni panel ravno znotraj obmocja TABa */
* {
  box-sizing: border-box;
}


.Vreme_panel {
	background-color: DeepSkyBlue;
	width: 100%;
	padding: 10px;
	border: 5px solid LightSkyBlue; 
	-webkit-border-top-left-radius: 20px;
	-webkit-border-bottom-left-radius: 20px;	
	-webkit-border-top-right-radius: 20px;	
	-webkit-border-bottom-right-radius: 20px;		
	-moz-border-top-left-radius: 20px;
	-moz-border-bottom-left-radius: 20px;	
	-moz-border-top-right-radius: 20px;		
	-moz-border-bottom-right-radius: 20px;	
}

/* Clear floats after image containers */
.Vreme_rowGauge::after {
  content: "";
  clear: both;
  display: table;
} 

/* Za okrogle slikece pri kameri */
.Vreme_columnGauge {
	float: left;
	width: 33.33%;
	padding: 5px;	
	position: relative;
	text-align: center;
	color: darkblue;
	max-width: 100%;
}

/* Text inside the circle */
.Vreme_Title {
    font-size: 1.8em;  /* Adjust the value as needed */
	display: inline-flex;
	line-height: 2.0;
}

.Vreme_GaugeLabel {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5em;  /* Adjust the value as needed */
    text-shadow: 2px 1px yellow;
    line-height: 0.5;
	display: inline-flex;
}

.Vreme_GaugeText {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 9em;  /* Adjust the value as needed */
    text-shadow: 2px 1px yellow;
    line-height: 0.5;
	display: inline-flex;
}

.Vreme_GaugeUnit {
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5em;  /* Adjust the value as needed */
    text-shadow: 2px 1px yellow;
    line-height: 0.5;
	display: inline-flex;
}


/* Media query for smaller screens */
@media only screen and (max-width: 600px) {
    .Vreme_Title {
        font-size: 1.2em; /* Adjust the value for smaller screens */
        line-height: 1.0;
    }

    .Vreme_GaugeLabel {
		top: 20%;
        font-size: 0.8em; /* Adjust the value for smaller screens */
        line-height: 1.0;
    }

    .Vreme_GaugeText {
		top: 50%;		
        font-size: 2.5em; /* Adjust the value for smaller screens */
        line-height: 0.5;
    }

    .Vreme_GaugeUnit {
        font-size: 0.8em; /* Adjust the value for smaller screens */
        line-height: 0.5;
    }
}