.sqreem.changelog .sq.modal [name=content] {
    padding: 4mm 7mm;
    max-width: 45%;
    min-width: 80mm;
    box-shadow: 1px 1px 10px 1px black;
}

.sqreem.changelog button[name=close] { display: none }

.sqreem.changelog .appname,
.sqreem.changelog .appversion,
.sqreem.changelog .date {
    font-weight: bold
}

.sqreem.changelog [name=logs] {
    margin-top: 5mm
}

.sqreem.changelog .logentry {
    margin-bottom: 5px;
    font-size: 3.5mm;
}

.sqreem.changelog .logentry > span:first-child {
    display: inline-block;
    text-transform: uppercase;
    text-align: center;
    font-size: 2.5mm;
    font-weight: bold;
    border: 1px solid gray;
    border-radius: 5px;
    color: white;
    padding: 1mm;
    width: 12mm;
    margin-right: 2mm
}

.sqreem.changelog .logentry > span:not(:first-child) {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 18mm);
}

.sqreem.changelog .logentry > span.add {
    border-color: #4141a9;
    background-color: #3c5ed1;
    color: white
}

.sqreem.changelog .logentry > span.update {
    background-color: #c2752f;
}

.sqreem.changelog .logentry > span.fix {
    background-color: #0d8c13;
}

.sqreem.changelog .logentry > span.security {
    background-color: #e3c92b;
    color: black;
}

.sqreem.changelog div[name=content] [template=footer] {
    text-align: center
}

.sqreem.changelog div[name=content] [template=footer] button {
    background-color: transparent;
    border: 1px solid gray;
    border-radius: 5px;
    padding: 2mm 5mm
}

.sqreem.changelog div[name=content] [template=footer] button:hover {
    box-shadow: 1px 1px 1px 0px black;
}