html, body { box-sizing:border-box; font-family:Arial,sans-serif; font-size:1em; background-color:#fafafa; padding: 0; margin: 0; }
pre { white-space: pre-wrap;word-wrap: break-word; }
a { color: #2980b9; text-decoration: none; }
a:hover { text-decoration: underline; }
table, .card { box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.2),0 1px 5px 0 rgba(0,0,0,0.12);background-color:white; margin-bottom:2em; padding: 1em 1.5em; }
table { width: 100%; }
tr th, tr td { border-bottom: 1px solid #eee; padding: 0.5em 1em; }
tr th { text-align: left; }
tr th a { color: black; }
button { cursor: pointer; }
thead tr th { border-bottom: 2px solid #eee; }
.btn-new, .btn-show, .btn-delete {
    background-color: gray; color: white;
    display: inline-block; padding: 0.6em 1em; text-decoration: none; margin: 0.15em;
    /*text-shadow: 1px 1px 0 #333;*/
    font-size: 1em;
    box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.2),0 1px 5px 0 rgba(0,0,0,0.12);
    border-radius: 2px;
    border: none;
}
.btn-new { font-weight: bold; }
.btn-new:hover, .btn-show:hover, .btn-delete:hover {
    box-shadow:0 2px 2px 0 rgba(0,0,0,0.24),0 3px 1px -2px rgba(0,0,0,0.3),0 1px 5px 0 rgba(0,0,0,0.22);
    text-decoration: none;
}
.btn-new:active, .btn-show:active, .btn-delete:active {
    box-shadow: none; ;
}
h2, h3 { font-weight: normal; padding:0; margin: 0; }
h2 { margin-bottom: 1em; }

.btn-new { background-color: rgb(33, 150, 243); }
.btn-show { background-color: rgb(139, 195, 74); }
.btn-delete { background-color: rgb(244, 67, 54); }

td.ok { background-color: rgba(153, 210, 62, 0.25); }
td.pending { background-color: rgba(232, 160, 0, 0.25); }
td.err { background-color: rgb(181, 60, 49); color: white; }
td.tools { text-align: right; padding-top: 0.1em; }

label { display: block; font-weight: bold; margin-bottom: 0.3em; }
input:not([type='checkbox']), select, textarea { display: block; width: 100%; margin-bottom: 0.3em; box-sizing:border-box; font-size: 1em;font-family:Arial,sans-serif; background-color: white; }
input:not([type='checkbox']), select, textarea { padding: 0.5em 0.6em; box-shadow: inset 0 1px 1px rgba(0,0,0,.075); border: 1px solid #ccc; }
textarea { height: 10em; }

.form-row { margin-bottom: 1em; }
.error, .notice, .running {
    box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.2),0 1px 5px 0 rgba(0,0,0,0.12);
    margin: 1em 0; color: white;
}
.error { background-color: rgb(244, 67, 54); padding: 0.8em 0.6em; }
.running { background-color: rgb(139, 195, 74); padding: 0.8em 0.6em; }
.notice { background-color: rgb(139, 195, 74); padding: 0.8em 0.6em; }

.head { padding: 1.5em; }
label.checkbox { font-weight: normal; }
.settings { float: right;  margin: 0.8em 0; }
.hide-large { display: block; }
.hide-small { display: none; }
hr { color: #ccc; height: 1px; background-color: #ccc; border: none; }


.loader {
    display: inline-block;
    font-size: 1em;
    text-indent: -9999em;
    border-top: .2em solid rgba(255, 255, 255, 0.2);
    border-right: .2em solid rgba(255, 255, 255, 0.2);
    border-bottom: .2em solid rgba(255, 255, 255, 0.2);
    border-left: .2em solid #ffffff;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load8 1.1s infinite linear;
    animation: load8 1.1s infinite linear;
    position: absolute;
}
.loader,
.loader:after {
    border-radius: 50%;
    width: 0.8em;
    height: 0.8em;
}
@-webkit-keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}


@media(min-width:640px) {
    html { padding: 0.5em 2em; }
    .head { padding: 0; }

    .hide-large { display: none; }
    .hide-small { display: block; }
}