body
{
   background-color: transparent;
   color: #000000;
   font-family: Arial;
   font-weight: normal;
   font-size: 16px;
   line-height: 1.1875;
   margin: 0;
   padding: 0;
}
a
{
   color: #0000FF;
   text-decoration: underline;
}
a:active
{
   color: #FF0000;
}
a:hover
{
   color: #0000FF;
   text-decoration: underline;
}
#Shape2
{
   border-width: 0;
   vertical-align: top;
}
#TextArt4
{
   border-width: 0;
   vertical-align: top;
}
#wb_Text2 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text2
{
   color: #002B87;
   font-family: "Segoe UI Emoji";
   font-weight: 400;
   font-size: 16px;
   line-height: 21.5px;
}
#wb_Text2 p, #wb_Text2 ul
{
   margin: 0;
   padding: 0;
}
#Button2
{
   border: 0px solid #0D6EFD;
   border-radius: 14px;
   background-color: #FF8A2A;
   background-image: none;
   color: #FFFFFF;
   cursor: pointer;
   font-family: Arial;
   font-weight: bold;
   font-style: normal;
   font-size: 16px;
   padding: 1px 6px 1px 6px;
   text-align: center;
   -webkit-appearance: none;
   margin: 0;
}
#Button2:focus
{
   outline: 0;
}
#Button2:hover
{
   background-color: #FF0000;
   transition: background-color 500ms linear 0ms;
}
#Shape4
{
   border-width: 0;
   vertical-align: top;
}
#TextArt13
{
   border-width: 0;
   vertical-align: top;
}
#TextArt2
{
   border-width: 0;
   vertical-align: top;
}
#wb_Image2
{
   vertical-align: top;
}
#Image2
{
   border: 0px solid #000000;
   border-radius: 0px;
   box-sizing: border-box;
   padding: 0;
   margin: 0;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
#Button1
{
   border: 0px solid #0D6EFD;
   border-radius: 14px;
   background-color: #FF8A2A;
   background-image: none;
   color: #FFFFFF;
   cursor: pointer;
   font-family: Arial;
   font-weight: bold;
   font-style: normal;
   font-size: 15px;
   padding: 1px 6px 1px 6px;
   text-align: center;
   -webkit-appearance: none;
   margin: 0;
}
#Button1:focus
{
   outline: 0;
}
#Button1:hover
{
   background-color: #FF0000;
   transition: background-color 500ms linear 0ms;
}
#Shape1
{
   border-width: 0;
   vertical-align: top;
}
#TextArt1
{
   border-width: 0;
   vertical-align: top;
}
#wb_Text1 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text1
{
   color: #002B87;
   font-family: "Trebuchet MS";
   font-weight: 400;
   font-size: 16px;
   line-height: 20px;
}
#wb_Text1 p, #wb_Text1 ul
{
   margin: 0;
   padding: 0;
}
#Button3
{
   border: 0px solid #0D6EFD;
   border-radius: 14px;
   background-color: #FF8A2A;
   background-image: none;
   color: #FFFFFF;
   cursor: pointer;
   font-family: Arial;
   font-weight: bold;
   font-style: normal;
   font-size: 16px;
   padding: 1px 6px 1px 6px;
   text-align: center;
   -webkit-appearance: none;
   margin: 0;
}
#Button3:focus
{
   outline: 0;
}
#Button3:hover
{
   background-color: #FF0000;
   transition: background-color 500ms linear 0ms;
}
/* 3-kleuren rand */
.ring1{
  width:390px;height:195px;border-radius:20px;
  background:#0963AD;padding:2px;box-sizing:border-box;display:inline-block;
}
.ring2{
  width:100%;height:100%;border-radius:18px;
  background:#ffffff;padding:2px;box-sizing:border-box;
}
.ring3{
  width:100%;height:100%;border-radius:16px;
  background:#FF0000;padding:2px;box-sizing:border-box;
}

/* Binnenkaart */
.ww{
  width:100%;height:100%;
  border-radius:14px;overflow:hidden;
  box-sizing:border-box;padding:8px 10px;
  background:#002B87;
  color:#fff;font-family:Arial,sans-serif;
}

/* TOPBAR */
.ww__topbar{
  display:flex;align-items:center;gap:10px;margin-bottom:6px;
  flex-wrap:nowrap;
}
.ww__title{
  font-size:15px;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  flex:1 1 auto;min-width:0;
}
.ww__change{
  font-size:12px;font-weight:600;
  color:#9cc6ff;
  text-decoration:underline;
  white-space:nowrap;
  flex:0 1 auto;min-width:0;
  cursor:pointer;
  transition:color .2s ease;
}
.ww__change:hover{
  color:#ffffff;
  text-decoration:none;
}

/* MAIN */
.ww__main{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
.ww__icon{width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:40px;}
.ww__temp{font-size:40px;font-weight:800;line-height:36px;letter-spacing:-1px;}
.ww__meta{flex:1;min-width:0;}
.ww__desc{font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ww__sub{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.9;}

/* HOURLY */
.ww__hourly{display:flex;gap:6px;margin:2px 0 8px 0;}
.ww__pill{
  flex:1;border-radius:10px;padding:5px 0 4px 0;text-align:center;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.15);
}
.ww__pillTime{font-size:11px;font-weight:800;margin-bottom:2px;opacity:.9;}
.ww__pillIcon{font-size:14px;margin-bottom:2px;}
.ww__pillTemp{font-size:11px;font-weight:900;}

/* NAV */
.ww__nav{display:flex;justify-content:center;gap:14px;margin-top:4px;}
.ww__btn{
  width:130px;text-align:center;
  background:rgba(255,255,255,0.15);
  color:#fff;border:1px solid rgba(255,255,255,0.2);
  padding:6px 0;border-radius:10px;
  font-size:12px;font-weight:800;cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
}
.ww__btn:hover{
  background:#FF0000;
  border-color:#FF0000;
  color:#ffffff;
}