cvss-new.css

/* Improved CSS for CVSS */

.cvssjs i {
    width: 1em;
    height: 1em;
    display: inline-block;
    background: url("cvssicons.png") no-repeat center;
    background-size: cover;
    margin-right: 6px;
    margin: 2px;
    font-size: 40px;
}

.cvssjs a {
    color: #3A9BDC;
    text-decoration: none;
}

.cvssjs dl {
    display: inline-block;
    vertical-align: top;
    background-color: #424a40;
    margin: 2px;
    border-radius: 6px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
    transition: background-color 0.3s ease;
}
.cvssjs dt {
    color: #f1f1f1;
    padding: 5px;
    font-size: 70%;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.cvssjs dl:hover {
    background-color: #676a60;
}
.cvssjs dl:hover dt {
    color: #ffffff;
}

.cvssjs dd {
    margin: 0;
    padding: 0;
    text-align: left;
}

.cvssjs dd label,
#predef span {
    min-width: 7.5em;
    padding: 5px 4px;
    display: block;
    background-color: #f9f9f7;
    transition: background-color 0.3s ease;
}

.cvssjs dd:last-child label,
#predef span:last-child {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.cvssjs dd small {
    display: none;
}

.cvssjs dd:hover small {
    position: absolute;
    max-width: 220px;
    border: 1px solid #333;
    display: block;
    color: black;
    background-color: #FFFFC1;
    border-radius: 5px;
    padding: 6px;
    margin-top: 0.7em;
    margin-left: 5em;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    z-index: 1;
}

.cvssjs dd > input {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.cvssjs dd input:checked + label {
    background-color: rgb(250, 180, 93);
    transition: background-color 0.1s ease;
}

.cvssjs dd label:hover {
    background-color: rgb(250, 200, 103);
    transition: background-color 0.2s ease;
}

.cvssjs .severity {
    width: 5em;
    padding: 6px;
    border-radius: 4px;
    text-align: center;
    font-weight: bold;
    color: #ffffff;
    transition: background-color 0.1s ease;
}

.cvssjs .score {
    width: 1.5em;
}

.cvssjs .results {
    padding: 8px;
    background-color: #efefef;
    border-radius: 4px;
}

.cvssjs .copy-button {
    border: none;
    background: transparent;
    cursor: pointer;
    user-select: none;
}

.cvssjs .copy-button:before {
    content: " ";
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23000' d='M433.941 65.941l-51.882-51.882A48 48 0 0 0 348.118 0H176c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h224c26.51 0 48-21.49 48-48v-48h80c26.51 0 48-21.49 48-48V99.882a48 48 0 0 0-14.059-33.941zM266 464H54a6 6 0 0 1-6-6V150a6 6 0 0 1 6-6h74v224c0 26.51 21.49 48 48 48h96v42a6 6 0 0 1-6 6zm128-96H182a6 6 0 0 1-6-6V54a6 6 0 0 1 6-6h106v88c0 13.255 10.745 24 24 24h88v202a6 6 0 0 1-6 6zm6-256h-64V48h9.632c1.591 0 3.117.632 4.243 1.757l48.368 48.368a6 6 0 0 1 1.757 4.243V112z'%3E%3C/path%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.cvssjs .copy-button:hover:before {
    opacity: 0.7;
}