/*:root {
    --primary: #1c7bd4;
    --secondary: #28AF07;
    --danger: #c92918;
    --warning: #f2cd48;
    --dark: #34495e;
    --light: #fafafa;
    --text: #222;
    --medium-text: #343434;
    --light-text: #555;
    --border: #ddd;
    --spacing-xs: .15rem;
    --spacing-sm: 0.75rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.25rem;
    --spacing-xl: 2.5rem;
    --border-radius: 4px;
    --shadow: 0 2px 5px rgba(0,0,0,0.1);
    --transition: all 0.3s ease;
    --serif-font: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;*/ /*'Shippori Mincho', serif;*/
    /*--sans-serif-font: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
    --link-color: #0D6EFD;
    --link-hover-color: #0A58CA;
    --purple: #6B38B2;
}*/

.explain {
    font-size: .8rem;
    color: var(--medium-text);
    display: block;
}
.field-validation-error {
    color:var(--danger);
    text-transform:capitalize;
}

.hidden {
    display: none;
}

.error {
    color: var(--danger);
}

.dev-notes {
    margin: 1rem;
    padding: 1rem;
    border: 1px solid gray;
    color: gray;
}
    .dev-notes li {
        margin-left: 1rem;
    }

.hio-font-large {
    color: var(--light-text);
    font-size:2rem;
}
.hio-spacer-box {
    padding: .5rem 1rem;
    margin-bottom: 1rem;
}
.hio-dotted-box {
    padding: 1.5rem 1rem;
    margin-bottom: 1rem;
    border-radius: 6px;
    border: 1px dotted #6B38B2;
}
    .hio-dotted-box h6 {
        margin-bottom:0;
    }
.hio-filter-box {
    padding: .5rem 1rem;
    background-color: #f8f8f9;
    border: 1px solid #ddd;
    font-size: 0.875rem;
    /*background-color: #FFFFEE;*/
    /*border: 1px solid #e6cf07;*/
    border-radius: 3px;
    /*margin-bottom: 1rem;*/
    .form-control
    {
        display: inline-block;
    }

}
.hio-info-box {
    padding: 1.5rem 1rem;
    margin-bottom: 1rem;
    background-color: #fff;
    border: 1px dotted #ccc;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
    .hio-info-box dt {
        font-weight: 600;
    }
    .hio-info-box dd {
        margin-bottom:.25rem;
    }

    .hio-info-box h5 {
        font-size:1.3rem;
        font-weight:600;
        font-family: var(--sans-serif-font);
        margin-bottom:var(--spacing-xs);
    }

.hio-summary-box {
    background-color: #eef5ff;
    border-color: #e0ebfd;
    color: #000;
    padding: 1.5rem 1rem;
    border-radius: 6px;
}

.hio-special-box {
    border: 1px solid #EAEAEA;
    padding: 1.5rem 1rem;
    background-color: #f8f8ff;
    border-radius: 6px;
}

.hio-icon {
    display:inline-block;
}

.hio-form-group {
    margin-bottom: 1rem;
}

    .hio-form-group.button-row {
        display: flex;
        margin-top: var(--spacing-lg);
        gap: 1rem;
        justify-content: end;
        padding-top: 1rem;
        border-top: 1px solid #ccc;
    }
.hio-separator {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.hio-separator-dotted {
    margin-top: 1rem;
    margin-bottom: 1rem;
    margin-top: $hio-unit;
    margin-bottom: $hio-unit;
    border-bottom: 1px var(--purple) dotted;
}

.hide-if-small {
}

.show-if-small {
    display: none;
}

.hio-button-link {
    cursor: pointer;
    background-color: white;
    border: 0px;
    padding: .25rem;
    font-size: .8rem;
    color:var(--link-color);
}
    .hio-button-link:hover {
        text-decoration: underline;
        color: var(--link-hover-color);
    }

.alert.alert-danger {
    padding: 1rem;
    border: 1px solid var(--danger);
    color: var(--danger);
    margin-bottom:1rem;
    border-radius:5px;
}
.alert.alert-danger li {
    margin-left:1rem;
}

fieldset {
    padding: 1rem;
    border: 1px dotted #6B38B2;
    border-radius: 8px;
}
    fieldset legend {
        font-weight: 700;
        padding-inline: .5rem;
    }

dl dt {
    font-weight:500;
}
dl dd {
    font-size:.9rem;
    margin-bottom:.25rem;
}

.txt-bold {
    font-weight: 700;
}

.txt-main {
    font-size: .8rem;
}

.txt-sub {
    font-size: .75rem;
}

.txt-light {
    color: var(--light-text);
}
.txt-description {
    font-size: 0.875rem;
    color: var(--light-text);
    margin-bottom: var(--spacing-md);
}


.txt-hide {
    display: none;
}


#subscriptionSelectForm .selected-level label {
    color: #333;
    display: block;
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid #c0c0c0;
    border-radius:4px;
    cursor: pointer;
    margin-top: 1rem;
}

#subscriptionSelectForm .selected-level input {
    display: none;
}

#subscriptionSelectForm .selected-level label:has(input:checked) {
    color: #3b82f6;
    border: 1px solid #3b82f6;
    background-color: #eff6ff;
}

#subscriptionSelectForm .selected-level label:hover {
    color: #3b82f6;
    border: 1px solid #3b82f6;
}

.hio-stats-box {

    .stats-row {
        display: flex;
        gap: 1rem;
        margin-bottom:1rem;
        flex-wrap:wrap;
        .stats-item {
            display: flex;
            flex:1;
            flex-direction:column;
            background-color: #f1f1f1;
            color: #333;
            padding: .5rem 1.25rem;
            border-radius: 8px;
            align-items:center;
            justify-content:center;
            min-width:150px;
            max-width:220px;
            .stats-label {
                font-weight: 500;
                font-size:.9rem;
            }
            .stats-value {
                font-size:2.5rem;
                font-weight: 600;
            }
        }
    }
}

.item-details-table {
    display:flex;
    flex-direction:column;
    padding: 1rem;
    background-color: #fafafa;
    border-radius: 4px;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    font-size: 0.875rem;
    .item-row
    {
        display: grid;
        grid-template-columns: .40fr 1fr;
        justify-content: space-between;
        align-items:flex-start;
        @media(max-width:1100px) {

            display:flex;
            flex-direction:column;
            margin-bottom:.5rem;
        }
        .item-row-label
        {
            font-weight: 600;
            color: #333;
            white-space:nowrap;
        }

        .item-row-value {
            color: #333;
        }
    }
}