/******************************************************************************
 *
 * CodeMeter License Portal
 * box_grid.css
 *
 * box grids for License Portal
 *
 * (c) 2024 - 2026: WIBU-SYSTEMS AG
 * info@wibu.com
 *
 *************************************************************************** */

span.default {
    mask-image: url("icons/default.svg");
    -webkit-mask-image: url("icons/default.svg");
}

span.computer {
    mask-image: url("icons/local.svg");
    -webkit-mask-image: url("icons/local.svg");
}

span.remote {
    mask-image: url("icons/remote.svg");
    -webkit-mask-image: url("icons/remote.svg");
}

span.cloud {
    mask-image: url("icons/cloud.svg");
    -webkit-mask-image: url("icons/cloud.svg");
}

span.expert {
    mask-image: url("icons/expert.svg");
    -webkit-mask-image: url("icons/expert.svg");
}

span.cmact {
    mask-image: url("cmcontainer/CmActLicense.svg");
    -webkit-mask-image: url("cmcontainer/CmActLicense.svg");
}

span.cmdongle {
    mask-image: url("cmcontainer/CmDongle.svg");
    -webkit-mask-image: url("cmcontainer/CmDongle.svg");
}

span.cmcloud {
    mask-image: url("cmcontainer/CmCloudContainer.svg");
    -webkit-mask-image: url("cmcontainer/CmCloudContainer.svg");
}

span.upload-rac {
    mask-image: url("icons/file-check.svg");
    -webkit-mask-image: url("icons/file-check.svg");
}

span.download-lif {
    mask-image: url("icons/file-question.svg");
    -webkit-mask-image: url("icons/file-question.svg");
}

span.list-container {
    mask-image: url("icons/list-container.svg");
    -webkit-mask-image: url("icons/list-container.svg");
}

span.enter-serial {
    mask-image: url("icons/enter-serial.svg");
    -webkit-mask-image: url("icons/enter-serial.svg");
}

span.cloud-another {
    mask-image: url("icons/cloud-another.svg");
    -webkit-mask-image: url("icons/cloud-another.svg");
}

.box-grid {
    display: grid;
    grid-template-columns: repeat(4, calc((var(--min-width-column) - 3 * var(--main-padding)) / 4));
    gap: var(--main-padding);
    align-items: stretch;
}

.box-link {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
    cursor: pointer;
}

.box img {
    height: 48px;
}

.box {
    flex: 1 1 auto;
    box-sizing: border-box;
    background: var(--white);
    border: 1px solid var(--background-color);
    border-radius: var(--border-radius);
    padding: var(--main-padding);
    min-height: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
}

.box-link:hover .box,
.box-link:focus .box {
    background: var(--table-background-color-hover);
    border-color: var(--border-color);
}

.box-icon {
    width: 48px;
    height: 48px;
    background-color: var(--primary-color-100);
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}

.box-headline {
    font-size: 130%;
    font-weight: bold;
    text-align: center;
}

.box-description {
    margin-top: var(--main-padding);
    color: var(--grey-100);
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    text-align: center;
}

.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--main-padding);
    padding: 0;
}

.top-bar-left {
    display: flex;
}

.top-bar-title {
    font-size: 130%;
    margin-left: var(--main-padding);
    margin-top: 4px;
    font-weight: bold;
}

.top-bar-right {
    flex: 0 1 800px;
    margin-top: 0;
}

.step-progress {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--main-padding);
    align-items: baseline;
}

.step-item {
    text-align: center;
    margin: 0;
    padding: 0;
}

.step-line {
    height: 14px;
    border-radius: var(--border-radius);
    background: var(--grey-200);
    margin-bottom: calc(var(--main-padding) / 2);
}

.step-label {
    font-size: 130%;
    color: var(--grey-100);
    text-align: center;
    margin-top: 0;
}

.step-item.active .step-line {
    background: var(--primary-color-100);
}

.step-item.active .step-label {
    color: var(--primary-color-100);
    font-weight: bold;
}

.step-item.done .step-line {
    background: var(--primary-color-200);
}

.step-item.done .step-label {
    color: var(--primary-color-200);
}

hr.ruler {
     border: 0;
     border-top: 1px solid #e0e0e0;
     margin: calc(var(--main-padding) * 2) 0;
}