#opendata-search {
    width         : 40rem;
    max-width     : 98%;
    margin        : 2em auto;
    border        : 2px solid #3758a1;
    border-radius : 1em;
    padding       : .5em 1em;
    box-sizing    : border-box;
}

#opendata-search > form > div {
    display       : flex;
    flex-flow     : row nowrap;
    margin-bottom : .5em;
    align-items   : center;
}

#opendata-search > form > .buttons-panel {
    align-items : center;
}

#opendata-search label {
    flex : 0 0 15em;
}

#opendata-search label.not-required {
    opacity : .4;
}

#opendata-search .select2, #opendata-search input, #opendata-search textarea {
    flex-grow : 1;
    width     : 100%;
    overflow  : hidden;
}

#opendata-search .opendata-search-hint {
    display    : block;
    text-align : center;
}

#select2-opendata-search-qualification-results,
#select2-opendata-search-education-base-results {
    max-height : 400px;
}

#api-description {
    width     : 40rem;
    margin    : 0 auto 1rem;
    max-width : 98%;
}

#api-description > div {
    margin-bottom : 1rem;
}

#api-description .api-method {
    display          : inline-block;
    color            : white;
    background-color : #3758a1;
    margin-right     : .5rem;
    padding          : .1em .5em;
    border-radius    : .2em;
}

#api-description .api-url {
    display     : inline-block;
    font-weight : bold;
}

#api-description .api-param {
    margin-left : 1rem;
}

#api-description .api-param-name {
    display     : inline-block;
    font-weight : bold;
    color       : #f1bd44;
    width       : 2rem;
}

#api-description .api-param-description {
    display : inline-block;
}

#api-description .api-param-values {
    margin-left : 2.25rem;
}

#api-description .api-example {
    display    : inline-block;
    color      : green;
    margin-top : 1rem;
}

#opendata-university-staff {
    display : none;
    width   : 95%;
    margin  : 0 auto;
}

#opendata-university-staff-search {
    text-align : center;
}

#opendata-university-staff-search input {
    width     : 20em;
    max-width : 100%;
}

@media only screen and (max-width : 40em) {
    #opendata-search {
        width  : 98%;
        margin : 0 auto;
    }

    #opendata-search > form > div {
        flex-direction : column;
        align-items    : flex-start;
    }

    #opendata-search label {
        flex-basis : auto !important;
    }
}