a, a:link {
    color: hsl(87, 100%, 11.8%);
    text-decoration: none;
    transition: all 200ms;
    cursor: pointer;
}

    a:hover {
        text-decoration: underline;
    }

    a:active {
        color: #333333;
    }

p {
    margin: 0.5em 0;
}

input, textarea, select {
    border: none;
    font-size: 1rem;
    padding: 0.5em;
    box-sizing: border-box;
}

    input[type="password"], input[type="text"], input[type="date"] {
        width: 17.5rem;
    }

    input[type="password"], input[type="text"], input[type="date"], textarea, select {
        background: #C0EC9F;
    }

        input[type="password"]:focus, input[type="text"]:focus, textarea:focus, select:focus {
            background: #88d629;
            -webkit-box-shadow: 0 0 8px #ffffff inset;
            -webkit-box-shadow: 0 0 8px rgba(255,255,255,0.8) inset;
            box-shadow: 0 0 8px #ffffff inset;
            box-shadow: 0 0 8px rgba(255,255,255,0.8) inset;
            outline: #5fb222 .25rem solid;
        }

    input[type="submit"], input[type="reset"], input[type="button"], button {
        padding: 0.3em 1em;
    }

    input[type="submit"], .submit {
        background-color: #74BD3E;
        border: 2px solid #74BD3E;
        font-family: 微软雅黑;
        font-weight: bold;
        font-size: 1rem;
        color: white;
        margin: 0 0.2em;
    }

        input[type="submit"]:hover, .submit:hover {
            background-color: #7dcb43;
            color: white;
        }

        input[type="submit"]:active, .submit:active {
            background-color: #88dd49;
        }

    input[type="button"],input[type="reset"], button, input.button {
        background-color: #ffffff;
        background-color: rgba(0,0,0,0);
        border: 2px solid #74BD3E;
        font-family: 微软雅黑;
        font-weight: bold;
        font-size: 1rem;
        color: #74BD3E;
        margin: 0 0.2em;
    }

        input[type="button"]:hover,input[type="reset"]:hover, button:hover, input.button:hover {
            background-color: #ffffff;
            background-color: rgba(0,0,0,0.1);
            color: #88dd49;
        }

        input[type="button"]:active,input[type="reset"]:active, button:active, input.button:active {
            background-color: #ffffff;
            background-color: rgba(0,0,0,0.2);
        }

    input[readonly], textarea[readonly], select[disabled] {
        background-color: #DCF8C8;
    }

        input[readonly]:focus, textarea[readonly]:focus, select[disabled]:focus {
            background-color: #DCF8C8;
        }

select {
    width: 17.5rem;
}

.clearfix {
    clear: both;
}

.table {
    border-collapse: collapse;
    width: 100%;
}

.grid, .grid td, .grid th {
    border: solid #72b322 1px;
    padding: 0 4px;
}

    .grid th {
        background: rgba(114,223,34,0.4);
    }

    .grid tr:nth-child(2n+1) td {
        background: rgba(114,223,34,0.2);
    }

.check {
    color: green;
}

.hiden, .hidden {
    display: none;
}

.uncheck, .refuse {
    color: darkred;
}

.fa-icon {
    width: 1em;
    height: 1em;
    padding: .25rem;
    text-align: center;
    border: 1px solid transparent;
    border-radius: 3px;
}

.fa:before {
    /*vertical-align: middle;*/
}

.fa:hover {
    border-color: hsla(87, 35%, 50%, 0.5);
}

a.fa:hover {
    text-decoration: none;
}

/* dialog */
.dialog-mask {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,.2);
}

.dialog {
    position: absolute;
    margin: 2em auto auto;
    border: 1px solid hsl(87, 35%, 50%);
    border-radius: .5em;
    min-width: 50em;
    max-width: 80em;
    left: 0;
    right: 0;
    background-color: white;
    padding: 1em;
    box-shadow: 0 .5em 1em #777;
    display: flex;
    flex-direction: column;
}

.dialog .dialog-title {
    display: flex;
    margin-bottom: 1em;
}

.dialog-title-text {
    margin: 0 auto 0 0;
}

.dialog-closer {
    width: 1rem;
    height: 1rem;
    cursor: pointer;
}

.dialog-title .btn {
    border: 1px solid transparent;
    border-radius: .25em;
    padding: .25em;
}

.dialog-title:hover .btn {
    border-color: #373;
}

.pagination {
    display: flex;
    flex-wrap: wrap;
}

@media all and (max-width: 768px) {
    #bottombar {
        font-size: 12px;
    }
}