
.autofilled {
    text-decoration: underline;
}

.box {
    border: 2px solid #ff0000;
    border-top-width: $padding-big;
    margin: 0 0 $padding-big 0;
    max-width: $width-paragraph;
    overflow: hidden;
    padding: $padding-medium;

    &.notification {
        border-width: 2px;
        border-top-width: $padding-big;
        padding: $padding-medium;
    }
    &.small {
        display: inline-block;
    }

    h1 {
        font: bold $font-header-3;
        margin: 0 0 $padding-medium 0;
    }
    p {
        margin-bottom: 0;
    }
}

.dependent {
    border-left: 1px solid lightened($color-primary);
    padding-left: $padding-big;
}

.disabled {
    color: mix($color-neutral, $color-text-dark);
}

.error {
    border-color: #f00;
}
.expired {
    background: #fbb;
    color: #800;
}

.hidden {
    display: none;
}

.hint {
    font-style: italic;
    font-size: 0.8em;
    margin: $padding-medium 0;
}

.margin-none,
input[type=submit].margin-none
{
    margin: 0;
}

.notification {
    animation: 0.5s ease-out notification normal both,
        0.5s ease-in 2.5s notification reverse forwards;
    border: 1px solid $color-primary;
    margin: 0 0 $padding-big 0;
    max-height: 2em; // just something big but sensible
    overflow: hidden;
    padding: $padding-medium;

    &.box {
        animation: none;
        border-color: $color-primary;
        max-height: none;
    }
}
@keyframes notification {
    from {
        border-width: 0;
        margin-bottom: 0;
        max-height: 0;
        padding-bottom: 0;
        padding-top: 0;
    }
    to {
    }
}

.preview {
    background: lightened($color-neutral);
    border: $padding-small solid darkened($color-neutral);
    padding: $padding-big;
}

.warning {
    border-color: $color-accent;
}


/* fix some styles being overriden elsewhere */
section.preview {
    border-bottom: $padding-small solid darkened($color-neutral);
}
.side-nav nav li.hidden {
    display: none;
}