.waitboard {
position: absolute;
display: none;
top: 0;
left:0;
opacity: 0.6;
background-color: #f0f0ff;
width: 100%;
height: 100%;
}
input[type=time]{
width: 70px;
}
.releaf {
text-shadow: -1px -1px 1px black, 1px 1px 1px white;
color: rgba(206,10,55,220);
}
.waititem {
margin: 20% auto;
font-size: 50px;
font-family: impact;
color: purple;
}
body {
font-family: Modern;
background-color: #fcf7fe;
margin: 0px auto;
width:80%;
}
form {
width: 70%;
margin: 0px auto;
background-color: #faf5f3;
}
header {
font-family: impact;
//font-weight: bold;
width: 75%;
font-size: 40px;
text-align: center;
color: #20207f;
margin: 30px auto ;
border-radius: 15px;
background: linear-gradient(to bottom, #f0f0ff 0%, #d0cff0 50%, #8098ad 100%);
}
footer {
border-top: solid #804050;
font-family: Times;
font-weight: medium;
font-size: 15px;
text-align: right;
color: #503030;
margin: 5% 12%;
}
#output table {
border-collapse:collapse;
margin: 0 auto;
}
#output th {
border-bottom: 2px solid #110;
padding: 10px;
}
#output td {
padding: 10px;
text-align: center;
}
#output tr:nth-child(2n) {
background-color: #e8eafe;
}
#output tr:hover:nth-child(n+2) {
color #ccd;
background: #ccd;
}
#output td:hover {
color #aac;
background: #aaf;
}
label {
font-size: 14px;
border-radius: 8px;
background-color: #f6f7f8;
padding: 4px 12px 3px 12px;
}
input[type=text] {
font-size: 15px;
}
//input[type=text],input[type=time] {
// text-shadow: 0px 1px 0px #a0ff40;
//}
input:focus:invalid {
background: #ffefea;
border: 1px dashed green;
}
//input:invalid {
// background: #ffefea;
//}
.invalid {
border: 1px solid #833;
box-shadow: 0px 0px 2px red inset;
}
.sel_indicate {
border: 1px solid #833;
box-shadow: 0px 0px 4px blue;
}
.mini {
font-size: 5px;
background: grey;
}
.mini:before {
width: 3px;
}
.box {
display: inline;
border: solid 8px #eef;
border-radius: 8px;
background: #eef;
}
.bbox {
display: inline;
width: 80px;
}
input[type=radio], input[type=checkbox] {
display: none;
}
.radio, .checkbox {
box-sizing: border-box;
-webkit-transition: background-color 0.2s linear;
transition: background-color 0.2s linear;
position: relative;
display: inline-block;
margin: 0 0px 0px 0;
padding: 8px 0px 8px 42px;
border-radius: 8px;
background-color: #f6f7f8;
vertical-align: middle;
cursor: pointer;
}
.radio:hover, .checkbox:hover {
background-color: #e2edd7;
}
.radio:hover:after, .checkbox:hover:after {
border-color: #53b300;
}
.radio:after, .checkbox:after {
-webkit-transition: border-color 0.2s linear;
transition: border-color 0.2s linear;
position: absolute;
top: 50%;
left: 15px;
display: block;
margin-top: -10px;
width: 16px;
height: 16px;
border: 2px solid #bbb;
border-radius: 6px;
content: '';
}
.radio:before {
-webkit-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
position: absolute;
top: 50%;
left: 20px;
display: block;
margin-top: -5px;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #53b300;
content: '';
opacity: 0;
}
input[type=radio]:checked + .radio:before {
opacity: 1;
}
.checkbox:before {
-webkit-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
position: absolute;
top: 50%;
left: 21px;
display: block;
margin-top: -7px;
width: 5px;
height: 9px;
border-right: 3px solid #53b300;
border-bottom: 3px solid #53b300;
content: '';
opacity: 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
input[type=checkbox]:checked + .checkbox:before {
opacity: 1;
}
fieldset {
width: 600px;
}
.reload {
width: 100px;
height: 100px;
position: relative;
border: 4px solid;
border-right-color: transparent;
border-radius: 60%;
box-sizing: border-box;
text-shadow: -1px -1px 1px blue, 1px 1px 1px grey;
}
.reload:before{
position: absolute;
top: 8px;
right: -5px;
content: "";
height: 50%;
border: 8px solid transparent;
border-top: 11px solid;
background: transparent;
transform-origin: left top;
transform: rotate(-35deg);
box-sizing: border-box;
}
.blue {
color: #68b;
}