:root {
  --error: #E54048;
  --notification: #BB151D;

  --white: #ffffff;
  --red: #E54048;
  --yellow: #FBBA5A;
  --green: #90B64F;
  --blue: #6ECCDA;
  --table-blue: #196BBD;

  --purple: #A140DC;
  --orange: #E9864F;

  --ultra-light-blue: #e2f5f8;
  --light-blue: #E2F5F8;
  --normal-blue: #6ECCDA;
  --dark-blue: #46828b;

  --ultra-light-grey: #F3F3F3;
  --light-grey: #DADADA;
  --normal-grey: #575757;
  --dark-grey: #141414;


  --primary-button-bg-color: #6ECCDA;
  --primary-button-bg-color-hover: #c5ebf0;
  --primary-button-bg-color-focus: #46828b;

  --primary-button-border-color: #6ECCDA;
  --primary-button-border-color-hover: #c5ebf0;
  --primary-button-border-color-focus: #46828b;

  --primary-button-text-color: #f3f3f3;
  --primary-button-text-color-hover: #46828b;
  --primary-button-text-color-focus: #f3f3f3;

  --secondary-button-bg-color: #fff;
  --secondary-button-bg-color-hover: #c5ebf0;
  --secondary-button-bg-color-focus: #c5ebf0;

  --secondary-button-border-color: #6ECCDA;
  --secondary-button-border-color-hover: #6ECCDA;
  --secondary-button-border-color-focus: #46828b;

  --secondary-button-text-color: #6ECCDA;
  --secondary-button-text-color-hover: #6ECCDA;
  --secondary-button-text-color-focus: #46828b;

  --tertiary-button-bg-color: #fff;
  --tertiary-button-bg-color-hover: #fff;
  --tertiary-button-bg-color-focus: #fff;

  --tertiary-button-border-color: #fff;
  --tertiary-button-border-color-hover: #fff;
  --tertiary-button-border-color-focus: #fff;

  --tertiary-button-text-color: #6ECCDA;
  --tertiary-button-text-color-hover: #46828b;
  --tertiary-button-text-color-focus: #023F1E;


  --box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.10), 0px 3px 6px 0px rgba(0, 0, 0, 0.10), 0px 10px 10px 0px rgba(0, 0, 0, 0.09), 0px 24px 14px 0px rgba(0, 0, 0, 0.05), 0px 42px 17px 0px rgba(0, 0, 0, 0.01), 0px 66px 18px 0px rgba(0, 0, 0, 0.00);

  --font-size-xs: 11px;
  --font-size-s: 12px;
  --font-size-m: 13px;
  --font-size-l: 15px;
  --font-size-xl: 20px;

  --border: 1px solid #dadada;
  --border-focus: 1px solid #6ECCDA;

  --ultra-light-text: #b6b6b6;
  --light-text: #575757;
  --dark-text: #464C54;

  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
}

.d-inline .opis,
.d-inline .gif {
  display: inline-block;
  vertical-align: text-top;
}

.vp-grad {
  font-size: 28px;
  font-weight: bold;
  color: var(--dark-text);
}

.vremenska-datum {
  font-size: var(--font-size-s);
  font-weight: 400;
  color: #c1c1c1;
}


.temperatura {
  font-size: 48px;
  font-weight: bold;
  color: var(--dark-text);
}

.flex .satnica>* {
  width: 100%;
  text-align: center;
  font-size: var(--font-size-l) !important;
  font-weight: bold !important;
  color: var(--dark-text) !important;
}

.flex .satnica .temperatura {
  letter-spacing: 1px;
  margin-top: 1rem;
  margin-bottom: 0;
}

.flex .satnica {
  border-right: var(--border);
  font-size: var(--font-size-s);
  font-weight: bold;
  color: var(--dark-text);
}

.flex .satnica:last-child {
  border-right: none;
}

.satnica {
  width: 100%;
}

figure {
  margin: 0px 0px 0px 20px;
  width: 200px;
  display: inline-block;
  font-weight: 300;
}

.icon {
  width: 100px;
  height: 100px;
}

.satnica figure {
  width: 120px;
  margin: auto;
}


.d-inline i,
.d-inline .blocks {
  display: inline-block;
  vertical-align: text-top;
}

.d-inline .blocks {
  margin-left: 10px;
}

.opis-vazduh .blocks .info {
  font-family: "Roboto";
  font-weight: 400;
  font-size: var(--font-size-s);
  color: var(--dark-text);
  margin-bottom: 0;
}

.opis-vazduh .blocks .vrednost {
  font-family: "Roboto";
  font-weight: 500;
  font-size: var(--font-size-l);
  color: var(--dark-text);
  margin-bottom: 0;

}

.gif figure .icon {
  width: 160px;
  height: 160px;
}

.icon {
  width: 100px;
  height: 100px;
}

figure {
  display: inline-block;
  font-weight: 300;
}

.longRay {
  stroke: #ffdd1a;
  stroke-width: 3;
  stroke-dasharray: 10;
  stroke-dashoffset: 10;
  -webkit-animation: longRayAnimation 4s linear infinite;
  animation: longRayAnimation 4s linear infinite;
}

@keyframes longRayAnimation {
  from {
    stroke-dashoffset: 100;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes longRayAnimation {
  from {
    stroke-dashoffset: 100;
  }

  to {
    stroke-dashoffset: 0;
  }
}

.shortRay {
  stroke: #ffdd1a;
  stroke-width: 1.5;
  stroke-dasharray: 3;
  stroke-dashoffset: 1;
  -webkit-animation: shortRayAnimation 3s linear infinite;
  animation: shortRayAnimation 3s linear infinite;
}

@-webkit-keyframes shortRayAnimation {
  from {
    stroke-dashoffset: 20;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes shortRayAnimation {
  from {
    stroke-dashoffset: 20;
  }

  to {
    stroke-dashoffset: 0;
  }
}

.small-cloud {
  -webkit-animation: float 8s linear infinite;
  animation: float 8s linear infinite;
}

@-webkit-keyframes float {
  0% {
    -webkit-transform: translate(0px, 15px);
    opacity: 0.75;
  }

  25% {
    -webkit-transform: translate(15px, 0px);
    opacity: 1;
  }

  50% {
    -webkit-transform: translate(30px, 0px);
    opacity: 1;
  }

  75% {
    -webkit-transform: translate(25px, 0px);
    opacity: 1;
  }

  100% {
    -webkit-transform: translate(0px, 15px);
    opacity: 0.75;
  }
}

@keyframes float {
  0% {
    -ms-transform: translate(0px, 15px);
    transform: translate(0px, 15px);
    opacity: 0.75;
  }

  25% {
    -ms-transform: translate(15px, 0px);
    transform: translate(15px, 0px);
    opacity: 1;
  }

  50% {
    -ms-transform: translate(30px, 0px);
    transform: translate(30px, 0px);
    opacity: 1;
  }

  75% {
    -ms-transform: translate(25px, 0px);
    transform: translate(25px, 0px);
    opacity: 1;
  }

  100% {
    -ms-transform: translate(0px, 15px);
    transform: translate(0px, 15px);
    opacity: 0.75;
  }
}

.reverse-small-cloud {
  -webkit-animation: reverse-float 6s linear infinite;
  animation: reverse-float 6s linear infinite;
}

@-webkit-keyframes reverse-float {
  0% {
    -webkit-transform: translate(0px, -15px);
    opacity: 0.75;
  }

  25% {
    -webkit-transform: translate(-15px, 0px);
    opacity: 1;
  }

  50% {
    -webkit-transform: translate(-30px, 0px);
    opacity: 1;
  }

  75% {
    -webkit-transform: translate(-25px, 0px);
    opacity: 1;
  }

  100% {
    -webkit-transform: translate(0px, -15px);
    opacity: 0.75;
  }
}

@keyframes reverse-float {
  0% {
    -ms-transform: translate(0px, -15px);
    transform: translate(0px, -15px);
    opacity: 0.75;
  }

  25% {
    -ms-transform: translate(-15px, 0px);
    transform: translate(-15px, 0px);
    opacity: 1;
  }

  50% {
    -ms-transform: translate(-30px, 0px);
    transform: translate(-30px, 0px);
    opacity: 1;
  }

  75% {
    -ms-transform: translate(-25px, 0px);
    transform: translate(-25px, 0px);
    opacity: 1;
  }

  100% {
    -ms-transform: translate(0px, -15px);
    transform: translate(0px, -15px);
    opacity: 0.75;
  }
}

#drop1 {
  -webkit-animation: rain 1s linear infinite;
  animation: rain 1s linear infinite;
}

#drop3 {
  -webkit-animation: rain 1s linear infinite 0.5s;
  animation: rain 1s linear infinite 0.5s;
}

#drop2 {
  -webkit-animation: rain 2s linear infinite 1s;
  animation: rain 2s linear infinite 1s;
}

#drop4 {
  -webkit-animation: rain 2s linear infinite 0.8s;
  animation: rain 2s linear infinite 0.8s;
}

@-webkit-keyframes rain {
  0% {
    opacity: 1;
  }

  25% {
    -webkit-transform: translateY(5px);
    opacity: 1;
  }

  50% {
    -webkit-transform: translateY(15px);
    opacity: 1;
  }

  75% {
    -webkit-transform: translateY(25px);
    opacity: 0.75;
  }

  100% {
    -webkit-transform: translateY(35px);
    opacity: 0;
  }
}

@keyframes rain {
  0% {
    opacity: 1;
  }

  25% {
    -ms-transform: translateY(5px);
    transform: translateY(5px);
    opacity: 1;
  }

  50% {
    -ms-transform: translateY(15px);
    transform: translateY(15px);
    opacity: 1;
  }

  75% {
    -ms-transform: translateY(25px);
    transform: translateY(25px);
    opacity: 0.75;
  }

  100% {
    -ms-transform: translateY(35px);
    transform: translateY(35px);
    opacity: 0;
  }
}

#rainDrizzle {
  stroke: lightblue;
  stroke-width: 1;
  stroke-dasharray: 3;
  stroke-dashoffset: 1;
  -webkit-animation: drizzle 5s linear infinite;
  animation: drizzle 5s linear infinite;
}

@-webkit-keyframes drizzle {
  from {
    stroke-dashoffset: 40;
  }

  to {
    stroke-dashoffset: 10;
  }
}

@keyframes drizzle {
  from {
    stroke-dashoffset: 40;
  }

  to {
    stroke-dashoffset: 10;
  }
}

.lighting {
  animation-duration: 2.5s;
}

#snowFlake {
  fill: none;
  stroke: #c1c1c1;
  stroke-width: 0.6;
}

#snowFlake1 {
  -webkit-animation: snow 4s linear infinite;
  animation: snow 4s linear infinite;
}

#snowFlake2 {
  -webkit-animation: snow 3s linear infinite 0.8s;
  animation: snow 3s linear infinite 0.8s;
}

#snowFlake3 {
  -webkit-animation: snow 5s linear infinite 0.5s;
  animation: snow 5s linear infinite 0.5s;
}

#snowFlake4 {
  -webkit-animation: snow 6s linear infinite 1s;
  animation: snow 6s linear infinite 1s;
}

#snowFlake5 {
  -webkit-animation: snow 4s linear infinite 0.6s;
  animation: snow 4s linear infinite 0.6s;
}

@-webkit-keyframes snow {
  0% {
    -webkit-transform: translate(5px, 0px);
    opacity: 1;
  }

  25% {
    -webkit-transform: translate(0px, 10px);
    opacity: 1;
  }

  50% {
    -webkit-transform: translate(7px, 20px);
    opacity: 1;
  }

  75% {
    -webkit-transform: translate(0px, 30px);
    opacity: 0.75;
  }

  100% {
    -webkit-transform: translate(10px, 40px);
    opacity: 0.5;
  }
}

@keyframes snow {
  0% {
    -ms-transform: translate(5px, 0px);
    transform: translate(5px, 0px);
    opacity: 1;
  }

  25% {
    -ms-transform: translate(0px, 10px);
    transform: translate(0px, 10px);
    opacity: 1;
  }

  50% {
    -ms-transform: translate(7px, 20px);
    transform: translate(7px, 20px);
    opacity: 1;
  }

  75% {
    -ms-transform: translate(0px, 30px);
    transform: translate(0px, 30px);
    opacity: 0.75;
  }

  100% {
    -ms-transform: translate(10px, 40px);
    transform: translate(10px, 40px);
    opacity: 0.5;
  }
}

#ice1 {
  -webkit-animation: ice 1s linear infinite;
  animation: ice 1s linear infinite;
}

#ice3 {
  -webkit-animation: ice 1s linear infinite 0.5s;
  animation: ice 1s linear infinite 0.5s;
}

#ice2 {
  -webkit-animation: ice 2s linear infinite 1s;
  animation: ice 2s linear infinite 1s;
}

#ice4 {
  -webkit-animation: ice 2s linear infinite 0.8s;
  animation: ice 2s linear infinite 0.8s;
}

@-webkit-keyframes ice {
  0% {
    opacity: 1;
  }

  25% {
    -webkit-transform: translateY(5px);
    opacity: 1;
  }

  50% {
    -webkit-transform: translateY(15px);
    opacity: 1;
  }

  75% {
    -webkit-transform: translateY(25px);
    opacity: 0.75;
  }

  100% {
    -webkit-transform: translateY(35px);
    opacity: 0;
  }
}

@keyframes ice {
  0% {
    opacity: 1;
  }

  25% {
    -ms-transform: translateY(5px);
    transform: translateY(5px);
    opacity: 1;
  }

  50% {
    -ms-transform: translateY(15px);
    transform: translateY(15px);
    opacity: 1;
  }

  75% {
    -ms-transform: translateY(25px);
    transform: translateY(25px);
    opacity: 0.75;
  }

  100% {
    -ms-transform: translateY(35px);
    transform: translateY(35px);
    opacity: 0;
  }
}

#mist {
  fill: none;
  stroke: #333333;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: misty 5s linear infinite alternate;
}

@-webkit-keyframes misty {
  from {
    x: -10px;
  }

  to {
    x: 17px;
  }
}

@keyframes misty {
  from {
    x: -10px;
  }

  to {
    x: 17px;
  }
}

.stars {
  animation-duration: 3s;
}

.wind {
  fill: none;
  stroke: #333333;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
}

#wind1 {
  -webkit-animation: windy 2.5s linear forwards infinite 0.5s;
  animation: windy 2.5s linear forwards infinite 0.5s;
}

#wind2 {
  -webkit-animation: windy 2.8s linear forwards infinite 0.55s;
  animation: windy 2.8s linear forwards infinite 0.55s;
}

#wind3 {
  -webkit-animation: windy 3.5s linear forwards infinite 2s;
  animation: windy 3.5s linear forwards infinite 2s;
}

#wind4 {
  -webkit-animation: windy 3.5s linear forwards infinite 0.5s;
  animation: windy 3.5s linear forwards infinite 0.5s;
}

#wind5 {
  -webkit-animation: windy 4s linear forwards infinite 0.5s;
  animation: windy 4s linear forwards infinite 0.5s;
}

@-webkit-keyframes windy {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes windy {
  to {
    stroke-dashoffset: 0;
  }
}

#tornado {
  -webkit-animation: skewX 0.85s infinite linear alternate;
  animation: skewX 0.85s infinite linear alternate;
}

@-webkit-keyframes skewX {
  0% {
    -webkit-transform: skewX(20deg);
  }

  100% {
    -webkit-transform: skewX(-20deg);
  }
}

@keyframes skewX {
  0% {
    -ms-transform: skewX(20deg);
    transform: skewX(20deg);
  }

  100% {
    -ms-transform: skewX(-20deg);
    transform: skewX(-20deg);
  }
}


.sedmodnevna table {
  table-layout: fixed;
}

.sedmodnevna table tr td {
  padding: 15px 0px;
}

td figure {
  display: block;
}


td figure .icon {
  width: 40px;
  height: 40px;
}

.sedmodnevna-tabela tr td figure {
  width: auto;
  max-width: 100px;
}


@media screen and (max-width: 1860px) {
  table {
    border: 0;
  }


  .vremenska-tabela table thead,
  .sedmodnevna-tabela table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }

  .vremenska-tabela table tr,
  .sedmodnevna-tabela table tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: .625em;
  }

  .vremenska-tabela table td,
  .sedmodnevna-tabela table td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: right;
  }
  .vremenska-tabela table td::before,
  .sedmodnevna-tabela table td::before{
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }

  .vremenska-tabela table td:last-child,
  .sedmodnevna-tabela table td:last-child {
    border-bottom: 0;
  }

}

@media screen and (max-width: 1024px) { 
  .tablet-full-width{
    -webkit-box-flex: 0;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .tablet-center {
    text-align: center;
  }
  .tablet-pl-0 {
    padding-left: 15px !important;
  }
  .tablet-mt-30 {
    margin-top: 30px;
  }
  .icon {
    width: 40px;
    height: 40px;
  }

}

td figure {
  width: 50px;
}

@media screen and (max-width:768px) {
  #kartice.flex  {
    flex-direction: column;
  }
  .mobile-center {
    text-align: center;
  }
  .flex .satnica > * {
    width: 100%;
    text-align: center;
    font-size: var(--font-size-l) !important;
    font-weight: bold !important;
    color: var(--dark-text) !important;
    text-align: center !important;
    margin-left: 0px !important;
    margin-bottom: 0;
  }
  .flex .satnica {
    border-bottom: var(--border);
    border-right: none;
  }
  .flex .satnica .temperatura {
    letter-spacing: 1px;
    margin-top: 0px;
    margin-bottom: 0;
  }
  .flex .satnica .hour {
    margin-top: 20px;
  }
  .mobile-mb-10 {
    margin-bottom: 10px;
  }
  .mobile-mt-0{
    margin-top: 0px;
  }
}


.meteo-alarm-footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  margin-bottom: 0 !important;
  padding: 0px;
  margin: auto;
    margin-bottom: auto;
  left: 0;
}

#meteo {
  padding: 40px;
  font-weight: bold;
}

.meteo-alarm-footer .closebtn {
  position: absolute;
  right: 20px;
  top: 10px;
  cursor: pointer;
}

.meteo-more {
  background-color: rgba(0, 0, 0, .1);
  border: none;
  text-align: center;
  padding: 5px;
}

.meteo-more a{
  text-decoration: none;
  font-size: 14px;
  font-weight: normal;
  color: var(--white);
}

.crveni {
   background-color: var(--red);
  color: white;
 }
.narandzasti {
   background-color: var(--orange);
  color: white;
 
}
.zuti {
 
  background-color: var(--yellow);
  color: white;
 
}

#meteo-opis-template {
  border-bottom: var(--border);
  margin-bottom: 10px;
}

.meteo-alarm .heading {
  display: inline-flex;
  align-content: center;
  align-items: center;
  vertical-align: middle;
}

.meteo-alarm .heading i {
margin-right: 10px;
}
 
.meteo-alarm .heading .naslov.crvena {
  color: var(--red);
  font-weight: 24px;
  font-weight: bold;
  margin-bottom: 10px;
  align-content: center;
  align-items: center;
  align-self: center;
  display: flex;
}

.meteo-alarm .heading .naslov.narandzasta {
  color: var(--orange);
  font-weight: 24px;
  font-weight: bold;
  margin-bottom: 10px;
  align-content: center;
  align-items: center;
  align-self: center;
  display: flex;
}

.meteo-alarm .heading .naslov.zuta {
  color: var(--yellow);
  font-weight: 24px;
  font-weight: bold;
  margin-bottom: 10px;
  align-content: center;
  align-items: center;
  align-self: center;
  display: flex;
}

span.red {
  color: var(--red);
}

span.orange {
  color: var(--orange);
}

span.yellow {
  color: var(--yellow);
}