@font-face {
    font-family: 'HeuvelGrotesk';
    /*src: url('/fonts/HeuvelGroteskDEMO-Medium-BF674fe9fb4d257.ttf') format('truetype');*/
    src: url('/fonts/Heuvel Grotesk-VF.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

html, body {
    height: 100%;
    margin: 0;
    font-family: "Instrument Sans", sans-serif;
    background-color: var(--surface-primary);
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 0;
    padding-right: 0;
    /* Rimuovi commento per far si che il contenuto tra header e footer si allunghi e non sia esattamente incastrato tra i due */
    /*    min-height: 100%;*/
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'HeuvelGrotesk', sans-serif;
    color: var(--text-heading);
}

.heading-title {
    font-family: 'HeuvelGrotesk', sans-serif !important;
    color: var(--text-heading);
}

p {
    color: var(--text-paragraph);
}

hr {
    color: var(--text-paragraph);
}

.main-box {
    padding: 3.5rem;
    display: flex;
    flex-direction: column;
}

.dashboard-box {
    background-color: white;
    padding: 1.25rem;
    border: var(--border);
    border-radius: var(--border-radius);
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); /* bootstrap shadow sm class */
    display: flex;
    flex-direction: column;
    gap: 0.4em;
}



a {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 400;
    transition: 0.5s ease;
}

.more-link {
    font-size: 0.76rem;
    text-decoration: underline !important;
}

.border-red {
    border: solid;
    border-color: red
}

.text-bg-primary-dimmed {
    color: var(--text-primary) !important;
    background-color: var(--primary-color-400-alpha) !important;
}

.smart-button {
    color: var(--primary-color-500);
    border: none;
    background-color: transparent;
    outline: none;
    padding: 0;
}

.no-bullets {
    list-style-type: none; /* Remove bullets */
    padding: 0; /* Remove padding */
    margin: 0; /* Remove margins */
}

.info-unavailable {
    color: #a1a1a1;
    font-style: italic;
}

.isPrimary {
    color: var(--primary-color-500)
}

.backgroundPrimary {
    background-color: var(--primary-color-500);
}

.isSecondary {
    color: var(--neutral-color-100)
}

.isLight {
    color: var(--neutral-color-100)
}

.backgroundBlueGray {
    background-color: var(--blueGray)
}

.backgroundDark {
    background-color: var(--dark-color-500);
}

.backgroundLight {
    background-color: var(--neutral-color-100);
}

.custom-tooltip {
    --bs-tooltip-bg: var(--primary-color-500);
}

/* ------------------------ end General ------------------------ */

/* ------------ Validation errors ------------ */

/* Style for new field (not form control) */
.field:has(.input-validation-error) .field-label {
    color: var(--text-danger) !important;
}

/* Styles for old fields (form control) */
.field-validation-error, label.error {
    color: var(--text-danger);
}

.input-validation-error, input.error {
    border: 2px solid var(--text-danger);
}

.input-validation-error, select.error {
    border: 2px solid var(--text-danger);
}

/* Styles for summary errors */
.validation-summary-errors ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.validation-summary-errors li {
    color: var(--text-danger);
    border-left: 2px solid var(--text-danger);
    border-radius: var(--border-radius);
    padding-left: 10px;
    padding-top: 3px;
    padding-bottom: 3px;
    background-color: var(--surface-danger);
    margin-bottom: 2px;
}

.validation-summary-valid {
    display: none;
}

/* ------------ end Validation errors ------------ */

/* ----- Custom HTML Tags -------*/
secondarylabel {
    color: var(--text-paragraph);
    font-size: 0.8rem;
}

aside {
    background-color: var(--light-color-400);
    padding: 1em;
}

/* ----- end Custom HTML Tags -------*/

/* -------------------------- Image upload preview -------------------------- */

.img-preview-container {
    padding-top: 100%;
    position: relative;
}

    .img-preview-container img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
    }

/* -------------------------- end Image upload preview -------------------------- */

/* -------------------------- Login partial -------------------------- */

.login-partial-dropdown img {
    width: 35px;
    height: 35px;
}

/* -------------------------- end Login partial -------------------------- */

/* -------------------------- Copy to clipboard -------------------------- */

.clipboard-tooltip {
    position: relative;
    display: inline-block;
}

    .clipboard-tooltip .tooltiptext {
        visibility: hidden;
        width: 140px;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px;
        position: absolute;
        z-index: 1;
        bottom: 150%;
        left: 50%;
        margin-left: -75px;
        opacity: 0;
        transition: opacity 0.3s;
    }

        .clipboard-tooltip .tooltiptext::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #555 transparent transparent transparent;
        }

    .clipboard-tooltip:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
    }

/* -------------------------- end Copy to clipboard -------------------------- */

/*Cookie consent banner*/

/*#cookieConsent {
    background: var(--light-color-400);
    color: #000000;
    padding: 1.5rem;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 200;
    margin: 0;
}*/

/* ------------------ Transcriptions ------------------ */

#transcriptionProposalPage {
    background-color: #000000;
}

#transcription-form .note-toolbar {
    background-color: var(--dark-color-500);
}

#transcription-form .note-btn-group button {
    background-color: #3b3a3a;
    color: var(--neutral-color-100);
}

#transcription-form .note-editor {
    border-color: var(--neutral-color-100);
    background-color: var(--dark-color-500);
    color: #fff;
}

#transcriptionModal .modal-content {
    color: #fff;
    background-color: var(--dark-color-500) !important;
}

/* ------------------ end Transcriptions ------------------ */

/* Solves UI bug when adding custom jquery validator in form */
#-error {
    display: none !important;
}
/* ------------ end Validation errors ------------ */

.spec-note {
    font-size: 0.7rem;
    color: var(--text-muted);
    max-width: 18rem;
    line-height: 1.5;
    margin: 0;
}

    .spec-note a {
        color: var(--text-primary);
        text-decoration: none;
    }

/*FORM FIELD*/

.field {
    border-radius: var(--border-radius);
    padding: .6rem 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    position: relative;
    background-color: var(--surface-secondary);
}

/* desktop */
@media (min-width: 768px) {

    .field.col-md-6:nth-child(odd) {
        border-right: var(--border);
    }
}

.field-full {
    border-right: none;
}

.field-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-primary);
    transition: color 0.12s;
}

.field:has(:is(input:not([type="checkbox"]), textarea):focus) {
    background: var(--surface-secondary);
}

    .field:has(:is(input:not([type="checkbox"]), textarea):focus) .field-label {
        color: var(--primary-color-500);
    }

.field input:not([type="checkbox"]),
.field select,
.field textarea {
    font-size: 0.85rem;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text-primary);
    font-weight: 600;
    resize: none;
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
}

    .field input::placeholder,
    .field textarea::placeholder {
        color: var(--text-field-placeholder);
        font-weight: 600;
    }

input[type="checkbox"] {
    border-radius: 50% !important;
    border: 1px solid var(--text-primary) !important;
}

    input[type="checkbox"]:checked {
        background-color: var(--text-primary) !important;
        border-radius: 50%;
    }

    input[type="checkbox"]:focus {
        border-color: var(--text-primary) !important;
        box-shadow: none !important;
    }

.field select {
    color: var(--neutral-color-400);
    cursor: pointer;
}

    .field select option {
        color: var(--neutral-color-900);
    }

.field textarea {
    min-height: 90px;
    line-height: 1.6;
}

.field-action {
    text-transform: uppercase;
    font-size: 0.62rem;
    cursor: pointer;
}

    .field-action:hover {
        color: var(--primary-color-500);
    }


/*END FORM FIELD*/

.kebab-case-container {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
}

    .kebab-case-container span {
        font-size: 0.72rem;
    }

    .kebab-case-container > hr {
        color: var(--neutral-color-400);
        flex: 1 1 auto;
    }

.hero-desc {
    max-width: 340px;
    font-size: 0.85rem;
    line-height: 1.7;
    color: var(--text-paragraph);
}

.search-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-paragraph);
}

.subtext {
    font-size: 0.76rem;
    color: var(--text-muted);
}

/* LINES */

.line-label {
    font-size: 0.64rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-heading);
}

.line-title {
    font-size: 2.4rem;
    font-weight: 500;
    color: var(--text-heading);
    letter-spacing: -0.01em;
    line-height: 1.3;
    transition: color 0.12s;
    margin: 0;
}

.line-desc {
    font-size: 0.72rem;
    color: var(--text-paragraph);
    line-height: 1.55;
    margin: 0.1rem 0 0;
}

.line-archive {
    font-size: 1rem;
    color: var(--text-muted);
}

.line-date {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.line-arrow {
    font-size: 0.82rem;
    color: var(--primary-color-500);
    opacity: 0;
    transition: opacity 0.12s;
}


/* END LINES */

.list-header {
    background-color: var(--surface-secondary);
}

.line-heading-label {
    text-transform: uppercase;
    color: var(--neutral-color-400);
    font-size: 0.72rem;
}

.section-title {
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-heading);
    margin: 0;
}

.bg-accent {
    background-color: var(--accent-color-300) !important;
}

.border-end-accent {
    border-right: 1px solid var(--accent-color-500) !important;
}

.border-bottom-accent {
    border-bottom: 1px solid var(--accent-color-500) !important;
}

.no-content {
    color: var(--text-paragraph);
    font-size: 0.76rem;
}

/*TRASCRIPTION*/

.tr-label-1 {
    font-size: 0.78rem;
}

.tr-label-2 {
    font-size: 0.62rem;
    color: var(--text-primary);
    text-transform: uppercase;
}

.tr-label-3 {
    font-size: 0.62rem;
    color: var(--text-muted);
}

.small-title-label {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.9rem;
    margin-bottom: 0.26rem;
}

.order-link {
    color: var(--text-paragraph) !important;
    font-size: 0.88rem;
}

    .order-link:hover {
        color: var(--text-primary) !important;
    }

.active-order-link {
    color: var(--text-primary);
}

.video-container {
    border-radius: var(--border-radius);
    overflow: hidden;
}

    .video-container video {
        display: block;
        width: 100%;
    }

.keyword-link {
    border: none;
    background-color: transparent;
    border-bottom: 2px solid var(--text-primary);
}

    .keyword-link:hover {
        background-color: var(--surface-hover);
    }

.info-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    line-height: 1 !important;
}

    .info-item a {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--text-heading);
        text-decoration: none;
        transition: color 0.12s;
    }

        .info-item a:hover {
            color: var(--primary-color-500);
        }

    .info-item span {
        font-size: 0.75rem;
        color: var(--text-paragraph);
    }

.level-of-detail {
    white-space: nowrap;
}

.max-heading {
    margin: 0;
    line-height: 0.9 !important;
}