/* Typography Classes */
/* Body */
body .bold, body .bold * {
    font-weight: var(--typography-body-bold-font-weight);
    font-size: var(--typography-body-bold-font-size);
    line-height: var(--typography-body-bold-line-height);
}

body .semibold, body .semibold *{
    font-weight: var(--typography-body-semibold-font-weight);
    font-size: var(--typography-body-semibold-font-size);
    line-height: var(--typography-body-semibold-line-height);
}

body *, body .regular, body .regular * {
    font-weight: var(--typography-body-regular-font-weight);
    font-size: var(--typography-body-regular-font-size);
    line-height: var(--typography-body-regular-line-height);
}

/* Body Small */
body .small-bold, body .small-bold * {
    font-weight: var(--typography-body-small-bold-font-weight);
    font-size: var(--typography-body-small-bold-font-size);
    line-height: var(--typography-body-small-bold-line-height);
    letter-spacing: var(--typography-body-small-bold-letter-spacing);
}

body .small, body .small * {
    font-weight: var(--typography-body-small-regular-font-weight);
    font-size: var(--typography-body-small-regular-font-size);
    line-height: var(--typography-body-small-regular-line-height);
    letter-spacing: var(--typography-body-small-regular-letter-spacing);
}

body .small-allcaps, body .small-allcaps * {
    font-weight: var(--typography-body-small-allcaps-font-weight);
    font-size: var(--typography-body-small-allcaps-font-size);
    line-height: var(--typography-body-small-allcaps-line-height);
    text-transform: uppercase;
    letter-spacing: var(--typography-body-small-allcaps-letter-spacing);
}


/* Heading 1 */
h1.bold {
    font-weight: var(--typography-h1-bold-font-weight);
    font-size: var(--typography-h1-bold-font-size);
    line-height: var(--typography-h1-bold-line-height);
}

h1, h1.regular {
    font-weight: var(--typography-h1-regular-font-weight);
    font-size: var(--typography-h1-regular-font-size);
    line-height: var(--typography-h1-regular-line-height);
}

/* Heading 2 */
h2.bold {
    font-weight: var(--typography-h2-bold-font-weight);
    font-size: var(--typography-h2-bold-font-size);
    line-height: var(--typography-h2-bold-line-height);
}

h2, h2.semibold {
    font-weight: var(--typography-h2-semibold-font-weight);
    font-size: var(--typography-h2-semibold-font-size);
    line-height: var(--typography-h2-semibold-line-height);
}

h2, h2.regular {
    font-weight: var(--typography-h2-regular-font-weight);
    font-size: var(--typography-h2-regular-font-size);
    line-height: var(--typography-h2-regular-line-height);
}

/* Heading 3 */
h3.bold {
    font-weight: var(--typography-h3-bold-font-weight);
    font-size: var(--typography-h3-bold-font-size);
    line-height: var(--typography-h3-bold-line-height);
}

h3, h3.semibold {
    font-weight: var(--typography-h3-semibold-font-weight);
    font-size: var(--typography-h3-semibold-font-size);
    line-height: var(--typography-h3-semibold-line-height);
}

h3, h3.regular {
    font-weight: var(--typography-h3-regular-font-weight);
    font-size: var(--typography-h3-regular-font-size);
    line-height: var(--typography-h3-regular-line-height);
}


/* Caption */
.caption-bold {
    font-weight: var(--typography-caption-bold-font-weight);
    font-size: var(--typography-caption-bold-font-size);
    line-height: var(--typography-caption-bold-line-height);
}

.caption-regular {
    font-weight: var(--typography-caption-regular-font-weight);
    font-size: var(--typography-caption-regular-font-size);
    line-height: var(--typography-caption-regular-line-height);
}

.caption-allcaps {
    font-weight: var(--typography-caption-allcaps-font-weight);
    font-size: var(--typography-caption-allcaps-font-size);
    line-height: var(--typography-caption-allcaps-line-height);
    text-transform: uppercase;
}

a {
    color: var(--color-cip-green-600);
    text-decoration: none;
}

/* Link */
a, .link-regular {
    font-weight: var(--typography-link-regular-font-weight);
    font-size: var(--typography-link-regular-font-size);
    line-height: var(--typography-link-regular-line-height);
    text-decoration: underline;
}

a.small, .link-regular-small {
    font-weight: var(--typography-link-regular-small-font-weight);
    font-size: var(--typography-link-regular-small-font-size);
    line-height: var(--typography-link-regular-small-line-height);
    text-decoration: underline;
}

a.caption, .link-caption {
    font-weight: var(--typography-link-caption-font-weight);
    font-size: var(--typography-link-caption-font-size);
    line-height: var(--typography-link-caption-line-height);
    text-decoration: underline;
}
/* Text colors */
.text-accent-primary { color: var(--text-accent-primary); }
.text-accent-primary-hover { color: var(--text-accent-primary-hover); }
.text-accent-primary-disabled { color: var(--text-accent-primary-disabled); }
.text-accent-primary-highlight { color: var(--text-accent-primary-highlight); }
.text-accent-primary-highlight-disabled { color: var(--text-accent-primary-highlight-disabled); }
.text-accent-primary-secondary { color: var(--text-accent-primary-secondary); }
.text-neutral-primary { color: var(--text-neutral-primary); }
.text-neutral-primary-hover { color: var(--text-neutral-primary-hover); }
.text-neutral-secondary { color: var(--text-neutral-secondary); }
.text-neutral-tertiary { color: var(--text-neutral-tertiary); }
.text-neutral-disabled { color: var(--text-neutral-disabled); }
.text-neutral-disabled-light { color: var(--text-neutral-disabled-light); }
.text-neutral-white { color: var(--text-neutral-white); }

/* ELEMENTS */
/* element colors */
.error, .danger,
.error.card, .danger.card {
    background-color: var(--danger-bg);
    border-color: var(--danger-text-hover);
}

.warning{

}

.info{

}

.success{

}

.passive{

}

.chip {
    border-radius: var(--chip-border-radius) !important;
    border-width: var(--chip-border-width) !important;
    margin: var(--chip-margin);
    padding: var(--chip-padding);
}
/*page header*/
.page-title-text {
    color: var(--text-neutral-primary);
}

/* card */
.card {
    margin: var(--card-margin);
    padding: var(--card-padding);
    border-style: solid;
    border-width: var(--card-border-width);
    border-radius: var(--card-border-radius);
    box-shadow: none;
    border-width: 1px;
    border-color: var(--color-grey-50);
}

/* button */
button, .button {
    padding: var(--button-padding);
    border-width: var(--button-border-width);
    border-style: solid;
    border-radius: var(--button-border-radius);
    cursor: pointer;
    box-shadow: none !important;
}

button *, .button *, button *, .button *{
    text-transform: none;
}

    button.primary, .button-primary,
    .title-paper button.primary, .title-paper .button-primary {
        height: 40px;
        border: none !important;
        text-wrap: nowrap;
        color: var(--color-accent-green-25);
        background-color: var(--color-cip-green-600);
    }

        button.primary:hover, .button-primary:hover {
            background-color: var(--bg-neutral-accent-primary-hover);
        }

        button.primary:disabled, .button-primary:disabled {
            border: none !important;
            color: var(--color-accent-green-25) !important;
            background-color: var(--color-accent-green-100);
        }

    button.secondary, .button-secondary,
    .title-paper button.secondary, .title-paper .button-secondary {
        height: 40px;
        text-wrap: nowrap;
        color: var(--color-cip-green-600);
        border-color: var(--color-cip-green-600);
    }

        button.secondary:hover, .button-secondary:hover {
            background-color: var(--color-accent-green-25);
            color: var(--bg-neutral-accent-primary-hover);
            border-color: var(--bg-neutral-accent-primary-hover);
        }

        button.secondary:disabled, .button-secondary:disabled {
            color: var(--color-accent-green-100) !important;
            border-color: var(--color-accent-green-100);
        }

/* chip */
.chip {
    padding: var(--chip-padding);
    border: var(--chip-border-width) solid var(--stroke-neutral);
    border-radius: var(--chip-border-radius);
}

.grow{
    flex-grow: 1 !important;
}

.no-grow {
    flex-grow: 0 !important;
}

.shrink {
    flex-shrink: 1 !important;
}

.no-shrink {
    flex-shrink: 0 !important;
}

.no-border {
    border: none !important;
}

.no-background {
    background: none !important;
}

/* grid toolbar */
.grid-filter-dropdown,
.grid-filter-text {
    margin: 0 !important;
}

    .grid-filter-text .mud-input-control-input-container .mud-input fieldset,
    .grid-filter-dropdown .mud-input-control-input-container .mud-input fieldset {
        border-radius: var(--button-border-radius);
        border-color: var(--color-grey-50);
    }

    .grid-filter-text:has(.mud-input.mud-input-outlined:focus-within) .mud-input-control-input-container .mud-input fieldset,
    .grid-filter-dropdown:has(.mud-input.mud-input-outlined:focus-within) .mud-input-control-input-container .mud-input fieldset {
        border-color: var(--text-accent-primary);
        color: var(--text-neutral-primary);
    }

    .grid-filter-text .mud-input-control-input-container .mud-input,
    .grid-filter-dropdown .mud-input-control-input-container .mud-input {
        background-color: var(--color-grey-25);
    }

    .grid-filter-text:has(.mud-input.mud-input-outlined:focus-within) .mud-input-control-input-container .mud-input,
    .grid-filter-dropdown:has(.mud-input.mud-input-outlined:focus-within) .mud-input-control-input-container .mud-input {
        color: var(--text-neutral-primary);
        background-color: var(--bg-neutral-element);
    }

.grid-filter-dropdown-item{
    padding: 0;
}

.grid-filter-dropdown-item,
.mud-primary-hover.grid-filter-dropdown-item {
    color: var(--text-neutral-primary) !important;
    background-color: unset !important;
    gap: 8px;
}

    .grid-filter-dropdown-item .mud-list-item-icon {
        min-width: 24px;
    }

.grid-filter-text:not(:has(.mud-input.mud-input-outlined:focus-within)) .mud-input-control-input-container .mud-input:hover,
.grid-filter-dropdown:not(:has(.mud-input.mud-input-outlined:focus-within)) .mud-input-control-input-container .mud-input:hover {
    border-color: var(--stroke-neutral-hover);
    background-color: var(--bg-surface-accent-subtle-hover);
}


.grid-filter-dropdown-popover {
    border: 1px solid var(--stroke-neutral);
    box-shadow: 0px 4px 8px var(--color-grey-t20);
}

.grid-filter-export{
    align-self: flex-end;
    justify-self: flex-end;
}

.mud-table-pagination .mud-table-pagination-actions button.mud-flip-x-rtl {
    border-radius: 4px;
    padding: 10px;
    margin:2px;
}

.mud-popover .mud-list .mud-list-item.mud-selected-item:not(:has(.mud-list-item-icon)),
.mud-popover .mud-list .mud-list-item.mud-selected-item.mud-primary-text:not(:has(.mud-list-item-icon)) {
    color: var(--color-cip-green-700) !important;
    background-color: var(--color-grey-50) !important;
}

/* FORM inputs */
form {
    color: var(--text-neutral-primary);
}

    form .mud-input {
        background-color: var(--color-grey-25);
        border-color: var(--color-grey-50);
    }

        form .mud-input-outlined-border legend{
            display: none;
        }

        form .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border,
        form .mud-input.mud-input-outlined:focus-within:hover .mud-input-outlined-border {
            border: 2px solid var(--text-accent-primary);
        }



            form .mud-input.mud-input-outlined:hover .mud-input-outlined-border {
                border: 1px solid var(--text-accent-primary);
            }

        form .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol {
            color: var(--text-neutral-primary);
        }


form .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined, 
form .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined 
{
        transform: translate(8px, 5px) scale(0.75) !important;
}


/* 
   ALERT AND CONFIRMATION DIALOGS 
*/
.system-dialog {
    color: var(--text-neutral-primary);
    width: 504px;
}

    .system-dialog .system-dialog-title {
    }

        .system-dialog .system-dialog-title  button.mud-button-root {
            border-radius: 4px;
        }

    .system-dialog .system-dialog-content {
    }

    .system-dialog .system-dialog-actions {
        padding: 16px;
    }

    .system-dialog .system-dialog-icon {
    }

    .system-dialog .system-dialog-message {
    }

    .system-dialog .system-dialog-background {
    }

/* SWITCH */
.switch-primary{

}

    .switch-primary .mud-switch-button { /* unchecked */
        color: var(--bg-neutral-element);
    }

    .switch-primary .mud-checked .mud-switch-button { /* checked */
        color: var(--color-accent-green-25);
    }

    .switch-primary:not(:has(.mud-checked)) .mud-switch-track { /* unchecked */
        background-color: var(--text-neutral-secondary);
        opacity: 1;
    }
    .switch-primary:has(.mud-checked) .mud-switch-track { /* checked */
        background-color: var(--color-cip-green-600);
        opacity: 1;
    }

/* USAGE INSTRUCTIONS */
.usage-instructions-title,
.usage-instructions {
    color: var(--text-neutral-primary);
}

.usage-instructions p {
    padding-bottom: 24px;
}

.usage-instructions a {
    display:block;
}



/* General MudBlazor overwrites */
/*
    The ripple animation in MudBlazor implemented by dynamically adding a span.mud-ripple-effect
    to elements with .mud-ripple class.
    The default css rules for the ripple effect are the following:

    .mud-ripple {
        position: relative;
        overflow: hidden
    }

    :not(.mud-ripple):has(>.mud-ripple-effect) {
        position: relative;
        overflow: hidden
    }

    .mud-ripple-effect {
        position: absolute;
        border-radius: 50%;
        background-color: var(--mud-ripple-color);
        opacity: 0;
        transform: scale(0);
        pointer-events: none
    }

    .mud-ripple-effect-expanding {
        opacity: var(--mud-ripple-opacity);
        transform: scale(1);
        transition: transform .5s cubic-bezier(0.4, 0, 0.2, 1),opacity .1s linear
    }

    .mud-ripple-effect-fading {
        opacity: 0;
        transition: opacity .4s linear
    }

    .mud-ripple-switch {
        position: absolute
    }
*/

.mud-ripple-effect {
    /* display: none !important; /* this rule completely disables the ripple effect */
    background-color: var(--color-green-200) !important;
}