.sizeInfo {
}

.sizeInfo__limited {
    background-color: var(--colors-bg-statuses-error-subdedube-secondary) !important;
    color: var(--colors-icon-statuses-error-primary) !important;
}

.card-model, .card-model * {
    box-sizing: border-box;
}

.card-model {
    display: flex;
    flex-direction: column;
    gap: 0px;
    align-items: flex-start;
    justify-content: flex-start;
    flex: 1;
    height: 313px;
    min-width: 300px;
    max-width: 300px;
    position: relative;
}

.card-model-default {
    background: var(--states-card-model-default);
    border-radius: var(--numbers-roundness-m, 12px);
    padding: var(--numbers-gaps-xs, 8px);
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: stretch;
    flex: 1;
    position: relative;
}

.card-model .preview {
    border-radius: var(--roundness-m, 12px);
    align-self: center;
    flex-shrink: 0;
    max-height: 141px;
    position: relative;
    object-fit: cover;
    height: fit-content;
    min-height: 141px;
    cursor: pointer;
    width: auto; /* Ensure the image fills the width */
    overflow: hidden; /* Hide parts of the image that exceed the container */
    object-position: center; /* Center the image vertically */
}

body[data-archivist='true'] .card-model .preview {
    width: auto;
}

.card-model img.preview[src$="./img/noimage.svg"] {
    object-fit: unset;
}

.card-model .description {
    display: flex;
    flex-direction: column;
    gap: var(--gaps-m, 12px);
    align-items: flex-start;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    height: 136px;
    position: relative;
}

.card-model .title {
    display: flex;
    flex-direction: column;
    gap: var(--gaps-xxs, 4px);
    align-items: flex-start;
    justify-content: flex-start;
    align-self: stretch;
    flex: 1;
    position: relative;
    color: var(--states-card-title);
}

.card-model .card-title {
    text-align: left;
    font-family: var(--h-h4-font-family, 'Muller-Bold', sans-serif);
    font-size: var(--h-h4-font-size, 20px);
    line-height: var(--h-h4-line-height, 130%);
    font-weight: var(--h-h4-font-weight, 700);
    position: relative;
    align-self: stretch;
    height: 52px;
}

.card-model .tag-add {
    display: flex;
    flex-direction: row;
    gap: 0px;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
}

.actions-container {
    display: flex;
    flex-direction: row;
    gap: var(--gaps-xs, 8px);
    align-items: flex-start;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
}

.actions {
    display: flex;
    flex-direction: row;
    gap: var(--gaps-xxs, 4px);
    align-items: flex-start;
    justify-content: flex-start;
    flex: 1;
    position: relative;
}

.button-model-download {
    border-radius: 4px;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    position: relative;
    overflow: hidden;
}

.button-icon-tretiery-default {
    padding: 12px;
    position: absolute;
    right: 0%;
    left: 0%;
    width: 100%;
    bottom: 0%;
    top: 0%;
    height: 100%;
    overflow: hidden;
}

.download {
    width: 16px;
    height: 16px;
    position: absolute;
    left: calc(50% - 8px);
    top: calc(50% - 8px);
    overflow: visible;
}

.button-model-copy-path {
    border-radius: 4px;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    position: relative;
    overflow: hidden;
}

.copy {
    width: 16px;
    height: 16px;
    position: absolute;
    left: calc(50% - 8px);
    top: calc(50% - 8px);
    overflow: visible;
}

.button-model-open-folder {
    border-radius: 4px;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    position: relative;
    overflow: hidden;
}

.folder {
    width: 16px;
    height: 16px;
    position: absolute;
    left: calc(50% - 8px);
    top: calc(50% - 8px);
    overflow: visible;
}

.actions-admin {
    display: flex;
    flex-direction: row;
    gap: var(--gaps-xxs, 4px);
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
}

.button-model-delete {
    border-radius: 4px;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    position: relative;
    overflow: hidden;
}

.trash {
    width: 16px;
    height: 16px;
    position: absolute;
    left: calc(50% - 8px);
    top: calc(50% - 8px);
    overflow: visible;
}

.card-model:hover {
}

    .card-model:hover .card-model-default {
        background-color: var(--colors-card-model-default-hover);
    }

    .card-model:hover .card-title {
        color: var(--states-card-title-hover);
    }

    .card-model:hover path {
        fill: var(--colors-path-fill-hover);
    }

.card-model:active {
}

    .card-model:active .card-model-default {
        background-color: var(--colors-bg-accent-primary);
    }

    .card-model:active .card-title {
        color: var(--states-card-title-active);
    }

    .card-model:active path {
        fill: var(--colors-path-fill-hover);
    }

.card-model .exclamation {
    margin-top:-2px;
}

.card-model .exclamation svg {
    width: 24px;
    height: 24px;
}

.exclamation path {
    fill: var(--colors-icon-statuses-error-secondary) !important;
}

.exclamation:hover path {
    fill: var(--colors-icon-statuses-error-primary) !important;
}