:root {

--global-fgcolor: #000;
--global-bgcolor: #fff;
--border-color: #ddd;

--alt-fgcolor: #000;
--alt-bgcolor: #ebf5fe;

--input-fgcolor: #000;
--input-bgcolor: #fff;

--accent-fgcolor:#fff;
--accent-bgcolor:#058283;

--font-family: 'Source Sans Pro', sans-serif;
--font-size: 16px;

--round-small: 5px;
--round-medium: 10px;

}


body{width:100%;height:100%;margin:0;padding:0;background-color:transparent}
body,div,input,select,option,textarea{background-color:var(--global-bgcolor);color:var(--global-fgcolor);line-height:160%;font-family:var(--font-family);font-size:var(--font-size)}
select,input[type="text"],input[type="number"],input[type="date"],input[type="password"],textarea{width:96%;padding:2%;margin:10px 0;font-family:sans-serif;color:var(--input-fgcolor);background-color:var(--input-bgcolor);border-radius:var(--round-small);border:1px solid var(--border-color);outline:none;appearance:none} 
input[type="submit"]{width:100%;padding:4% 0;border-width:0;border-radius:var(--round-small);margin:20px 0;background-color:var(--accent-bgcolor);color:var(--accent-fgcolor);font-weight:bold;}
input[type="checkbox"],input[type="radio"]{padding:20px}
button{border-width:0;padding:5px 10px;background-color:var(--accent-bgcolor);color:var(--accent-fgcolor);border-radius:var(--round-small)}

select{width:100%} option{padding:10px;appearance:none}
hr{height:1px;border:none;margin:10px 0;background-color:var(--border-color)}

table{width:100%;border-collapse:separate;border-spacing:1px;border-radius:var(--round-small);border:1px solid var(--border-color)}
table tr{background-color:var(--alt-bgcolor)}
table tr:nth-child(even){background-color:var(--global-bgcolor)}
td{padding:10px}

a:link{color:var(--global-fgcolor);text-decoration:none}
a:visited{color:var(--global-fgcolor);text-decoration:none}
a:hover{color:var(--global-fgcolor);text-decoration:underline}
a:active{color:var(--global-fgcolor);text-decoration:underline}

form{border-radius:var(--round-small);border-width:0;margin-top:15px}

.pointer{cursor:pointer}
.center{text-align:center}
.card{width:90%;padding:5%}

.btn{cursor:pointer;background-color:rgba(0,0,0,.1);border-radius:var(--round-small);display:inline-block;padding:5px 10px}
.btn:hover{transform:scale(.90,.90)}

.shake{animation:doshake 0.6s ease-in-out 1;position:relative}
@keyframes doshake{0%,15%,45%,75%{left:-5px}30%,60%,90%{left:5px}100%{left:0}}

.showup{opacity:0;animation:doshowup .8s ease-in-out 1 forwards}
@keyframes doshowup{0%{opacity:0}50%{opacity:0}100%{opacity:1}}

.listx{padding:15px 15px;font-size:15px;color:#fff;background-color:#058283;}
.listy{padding:15px 15px;font-size:15px;color:#fff;background-color:#00A6A6;}