/* =========================================================
   Form and search styles
   ========================================================= */


/* Search form area */
.search {
    background: var(--white);
    width: 75%;
}


/* Form fields */
input,
textarea,
select {
    font-family: "Libre Baskerville", serif;
    font-size: 14px;

    padding: 10px;

    display: inline-block;

    border: 1px solid var(--black);

    box-sizing: border-box;

    width: 100%;
}


/* Quick search input */
.quicksearch {
    border-radius: 5px 0 0 5px;

    padding: 10px;

    vertical-align: middle;
}


/* Remove Firefox button padding */
.submit::-moz-focus-inner {
    border: 0;
}


/* Search submit button */
.submit {
    font-family: FontAwesome, "Helvetica Neue", Helvetica, Arial, sans-serif;

    position: relative;

    width: 45px;

    font-size: 14px;

    left: -5px;

    background-color: #636263;

    color: #d6d3d7;

    border: 1px solid var(--black);

    border-radius: 0 5px 5px 0;

    display: inline-block;

    padding: 10px;
    padding-bottom: 13px;

    cursor: pointer;
}


/* Search button hover */
.submit:hover {
    background-color: var(--black);
    color: blueviolet;
}


/* Search section */
.topsearch {
    grid-area: topsearch;

    text-align: right;
}


/* Search layout */
.topsearch {
    display: flex;

    gap: 10px;

    align-items: center;

    flex-wrap: wrap;
}


/* Individual search box */
.key-search {
    float: left;

    padding-left: 10px;
}


/* Search input size */
.key-search input {
    width: 120px;
}


/* Admin forms */
.admin-form {
    max-width: 600px;

    margin: auto;
}


/* Form submit button */
.form-submit {
    background-color: var(--light-purple);

    color: var(--black);

    border: 1px solid var(--black);

    border-radius: 5px;

    width: 100%;

    cursor: pointer;
}


/* Form button hover */
.form-submit:hover {
    background-color: var(--hover-peach);
}


/* Larger forms */
.big-form {
    max-width: 1000px;

    margin: auto;
}