/* Mobile View only */
@media screen and (max-width: 45em){

.addition{
float:left;
width:100%;
border:0px #ff00AA solid;
}

.addition .left{
float:left;
width:100%;
border:0px #ff0080 solid;
}

.addition .left .block{
float:left;
width:100%;
margin:0;
padding:0;
display:flex;
justify-content:center;
align-items:center;
flex-wrap:wrap;
}

.addition .left .block:first-of-type{
margin:0 0 .75rem 0;
}

.addition .right{
float:left;
width:100%;
border:0px #ff0080 solid;
}

.addition .right .block{
float:left;
width:100%;
margin:0;
padding:0;
border:0px #ff0080 solid;
display:flex;
justify-content:center;
align-items:center;
flex-wrap:wrap;
}

.addition .right .block:first-of-type{
margin:.25rem 0 .25rem 0;
}

.addition .icon-wrapper{
float:left;
width:auto;
margin:0 .75rem 0 0;
border:0px #ff00fe solid;
}

.addition .right .block .icon-wrapper{
float:left;
width:3.5rem;
margin:0;
border:0px #ff00fe solid;
}

.addition .icon{
display:block;
width:2.625rem;
height:2.625rem;
position:relative;
overflow:hidden;
}

.addition .icon.small{
display:flex;
justify-content:center;
width:2.625rem;
height:2.625rem;
overflow:hidden;
margin:0 auto;
border:0px #ff00fe solid;
}

.addition .text{
display:block;
width:100%;
text-align:center;
}

.addition .text p{
display:flex;
justify-content:center;
align-items:baseline;
width:100%;
min-height:1rem;
margin:.15rem 0 0 0;
padding:0;
font-size:var(--xxs-font-size);
line-height:.75rem;
font-weight:bold;
text-align:center;
color:var(--dark-font-color);
}

.addition .icon .info{
display:flex;
justify-content:flex-end;
align-items:center;
min-width:1rem;
height:1rem;
background:var(--base-background-color);
position:absolute;
top:-.15rem;
right:-.15rem;
border-radius:50%;
z-index:1;
}

.addition .icon .info p{
display:flex;
justify-content:center;
align-items:center;
width:100%;
height:100%;
margin:0;
padding:0;
font-size:.65rem;
font-weight:bold;
text-align:center;
color:var(--base-font-color);
}

}


/* Mobile View > Tablet only */
@media screen and (min-width: 45rem) and (max-width: 79.5rem){

.addition{
float:left;
width:100%;
border:0px #ff00AA solid;
}

.addition .left{
float:left;
width:49%;
border:0px #ff0080 solid;
}

.addition .left .block{
float:left;
margin:0;
padding:0;
width:100%;
border:#ff0000 0px solid;
}

.addition .left .block:first-of-type{
margin:0 0 .75rem 0;
}

.addition .right{
float:right;
width:49%;
border:0px #ff0080 solid;
}

.addition .right .block{
clear:both;
float:right;
display:block;
width:auto;
border:0px #ff0080 solid;
}

.addition .right .block:first-of-type{
margin:0 0 .25rem 0;
}

.addition .icon-wrapper{
float:left;
width:auto;
margin:0 .75rem 0 0;
border:0px #ff00fe solid;
}

.addition .right .block .icon-wrapper{
float:left;
width:3rem;
margin:0;
}

.addition .icon{
display:block;
width:2.625rem;
height:2.625rem;
position:relative;
overflow:hidden;
}

.addition .icon.small{
width:1.85rem;
height:1.85rem;
overflow:hidden;
display:flex;
justify-content:center;
margin:0 auto;
border:0px #ff00fe solid;
}

.addition .text{
display:block;
width:100%;
text-align:center;
}

.addition .text p{
display:flex;
justify-content:center;
align-items:baseline;
width:100%;
min-height:1rem;
margin:.15rem 0 0 0;
padding:0;
font-size:var(--xxs-font-size);
line-height:.75rem;
font-weight:bold;
text-align:center;
color:var(--dark-font-color);
}

.addition .icon .info{
display:flex;
justify-content:flex-end;
align-items:center;
min-width:1rem;
height:1rem;
background:var(--base-background-color);
position:absolute;
top:-.15rem;
right:-.15rem;
border-radius:50%;
z-index:1;
}

.addition .icon .info p{
display:flex;
justify-content:center;
align-items:center;
width:100%;
height:100%;
margin:0;
padding:0;
font-size:.65rem;
font-weight:bold;
text-align:center;
color:var(--base-font-color);
}

}



/* Desktop View */
@media screen and (min-width: 79.5rem){

.addition{
float:left;
width:100%;
border:0px #ff00AA solid;
position:relative;
}

.addition .label{
margin:0 0 0 .1rem;
padding:0;
}

.addition .value{
margin:0 .1rem 0 0;
padding:0;
}

.addition li:hover{
background:var(--middle-background-color);
}

.addition .left{
float:left;
width:49%;
border:0px #ff0080 solid;
position:absolute;
bottom:0;
left:0
}

.addition .left .block{
float:left;
margin:0;
padding:0;
width:100%;
border:#ff0000 1px solid;
}

.addition .left .block:first-of-type{
margin:0 0 .75rem 0;
}

.addition .right{
float:right;
width:49%;
border:1px #ff0080 solid;
position:absolute;
bottom:0;
right:0
}

.addition .right .block{
clear:both;
float:right;
display:block;
width:auto;
border:0px #ff0080 solid;
}

.addition .right .block:first-of-type{
margin:0 0 .25rem 0;
}


.addition .icon-wrapper{
float:left;
width:auto;
margin:0 .75rem 0 0;
border:0px #ff00fe solid;
}

.addition .right .block .icon-wrapper{
float:left;
width:3rem;
margin:0;
}

.addition .icon{
display:block;
width:2.625rem;
height:2.625rem;
position:relative;
overflow:hidden;
}

.addition .icon.small{
width:1.85rem;
height:1.85rem;
overflow:hidden;
display:flex;
justify-content:center;
margin:0 auto;
border:0px #ff00fe solid;
}

.addition .text{
display:block;
width:100%;
text-align:center;
}

.addition .text p{
display:flex;
justify-content:center;
align-items:baseline;
width:100%;
min-height:1rem;
margin:.15rem 0 0 0;
padding:0;
font-size:var(--xxs-font-size);
line-height:.75rem;
font-weight:bold;
text-align:center;
color:var(--dark-font-color);
}

.addition .icon .info{
display:flex;
justify-content:flex-end;
align-items:center;
min-width:1rem;
height:1rem;
background:var(--base-background-color);
position:absolute;
top:-.15rem;
right:-.15rem;
border-radius:50%;
z-index:1;
}

.addition .icon .info p{
display:flex;
justify-content:center;
align-items:center;
width:100%;
height:100%;
margin:0;
padding:0;
font-size:.65rem;
font-weight:bold;
text-align:center;
color:var(--base-font-color);
}

}