Template:Infobox place/infobox.css

/* Infobox styling */

.portable-infobox {
    width: 100%;
    margin: auto;
      box-shadow: -4px 4px 8px 0px rgba(0, 0, 0, 0.2);
    margin-bottom: 25px;
    border-radius:15px;
}
@media all and ( min-width: 720px ) {
  .portable-infobox { 
  width: 33%; 
  float: right; 
   box-shadow: -4px 4px 8px 0px rgba(0, 0, 0, 0.2);
    margin-bottom: 25px; 
    margin-left:5%;
    margin-right:0;
  	border-radius:15px;}
}

.portable-infobox .pi-title {
   font-size: 21px;
   width: 100%;
   padding:25%;
   box-sizing: border-box;
   text-align: center;
   font-weight: bold;
   background-color: #4698b9;
   color: #f6f5f3;
   margin-right: 0px;
    margin-left:0px;
    margin-bottom:10px;
       border-bottom:4px solid #b1d3e1;
       border-radius:15px 15px 0 0;

}

.portable-infobox.pi-background {
   background-color: #ecf4f7;
}

.portable-infobox .pi-secondary-background {
   background-color: #b1d3e1;
   background-color: #4698b9;
   border-bottom:4px solid #b1d3e1;
width: 100%;
   padding:25%;
   box-sizing: border-box;
   margin-bottom: 5px
}

.portable-infobox .pi-border-color {
   border-color: #b1d3e1;
   border-width:2px;
}

.portable-infobox .pi-header {
	color:white;
	font-weight: bold;
}

.portable-infobox .pi-item-spacing {
   padding: 10px 20px;
}

.portable-infobox .pi-data-label {
   flex-basis: 165px;
}

.pi-image-thumbnail{
width: 100%;
height: auto;
}

/*Specific labels*/
.pi-item[data-source=caption] {
text-align: center;
font-weight: bold;
font-size: 12px;
border:none;
padding: 0px 25px;

}

.pi-item[data-source=attribution]{
text-align: center;
font-style: italic;
font-size: 10px;
padding: 0px 25px;

}

/* place infobox dark mode*/
html.skin-citizen-dark .pi-background {
background:#397288;
}

html.skin-citizen-dark .pi-secondary-background {
background: #2d5f74;
border-bottom: 4px solid #234c5c;
}

html.skin-citizen-dark .pi-title {
background: #234c5c; 
border-bottom: 4px solid #2d5f74;
}

html.skin-citizen-dark   .portable-infobox { 
box-shadow: -4px 4px 8px 0px rgba(225, 225, 225, 0.1);

}

html.skin-citizen-dark .portable-infobox .pi-border-color {
    border-color: #234c5c;
}

html.skin-citizen-dark .pi-data-label.pi-secondary-font {
	color:white;
}

html.skin-citizen-dark .pi-data-value.pi-font {
	color:white;
}

html.skin-citizen-dark .pi-data-value.pi-font a {
	color:white;
	text-decoration-line: underline;
}