body {
    margin: 24px;
    background: #efefef;
    font-family: "Arial";
}
h1 {
    color: #005cb9;
    max-width: 960px;
    width: 100%;
    margin: 24px auto;
}
.container {
    max-width: 960px;
    width: 100%;
    margin: 0px auto;
    background: white;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 24px;
    box-shadow: 0px 3px 4px rgba(0,0,0,.3);
}
input, button, textarea {
    border: 1px solid rgba(0,0,0,.2);
    padding: 8px 12px;
    border-radius: 100px;
    margin: 0px 4px;
    box-sizing: border-box;
}
textarea {
    border-radius: 10px;
    resize: vertical;
    width: 100%;
    min-height: 200px;
    max-height: 500px;
}
input:focus, input:active, textarea:focus, textarea:active {
    outline: none;
}
.d-flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
div[data-mode] > div {
    width: 100%;
}
button {
    background: #005cb9;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    cursor: pointer;
}
button:disabled {
    background-color: #bbb;
    color: #888;
}
.contribution-label{display:inline-block;margin:4px}.contribution-label div{margin-right:6px;width:12px;height:12px;display:inline-block}.contribution-label div.level-6{background:#005cb9}.contribution-label div.level-5{background:rgba(0,92,185,.9)}.contribution-label div.level-4{background:rgba(0,92,185,.8)}.contribution-label div.level-3{background:rgba(0,92,185,.7)}.contribution-label div.level-2{background:rgba(0,92,185,.6)}.contribution-label div.level-1{background:rgba(0,92,185,.5)}.contribution-label div.level-0{background:#d0d0d0}.contribution-year{padding:0 24px;width:100%;box-sizing:border-box}.contribution-calendar{display:flex;margin-bottom:24px;flex-direction:row;justify-content:space-between}.contribution-calendar .contribution-week{display:flex;flex-direction:column}.contribution-calendar .contribution-week:last-child .contribution-week-label{visibility:hidden}.contribution-calendar .contribution-week>div{height:12px;width:12px;margin:1px;background:#d0d0d0}.contribution-calendar .contribution-week div.contribution-day{position:relative}.contribution-calendar .contribution-week div.contribution-day .contribution-day-tooltip{display:none;z-index:10;bottom:24px;left:-50%;white-space:nowrap;position:absolute;background:#005cb9;color:#fff;padding:4px;font-size:11px;border-radius:4px;box-shadow:0 3px 3px rgba(0,0,0,.2)}.contribution-calendar .contribution-week div.contribution-day:hover .contribution-day-tooltip{display:block}.contribution-calendar .contribution-week div.transparent{background:0 0}.contribution-calendar .contribution-week .contribution-week-label{text-align:right;width:12px;height:18px;margin:1px;font-size:14px;font-weight:700;color:#005cb9;background:0 0}.contribution-calendar .contribution-day-label{display:flex;flex-direction:column}.contribution-calendar .contribution-day-label div{height:12px;width:12px;margin:1px;text-align:center;font-size:11px;font-weight:700;color:#005cb9}.contribution-calendar .contribution-day-label .contribution-week-label{height:18px}@media screen and (max-width:900px){.contribution-calendar{justify-content:flex-start}.contribution-calendar .contribution-week div{width:8px;height:8px;margin:2px}.contribution-calendar .contribution-week .contribution-week-label{width:8px;height:16px;margin:2px}.contribution-calendar .contribution-day-label div{width:8px;height:8px;margin:2px;font-size:9px}.contribution-calendar .contribution-day-label .contribution-week-label{height:16px}}@media screen and (max-width:680px){.contribution-calendar{justify-content:flex-start}.contribution-calendar .contribution-week div{width:6px;height:6px;margin:1px}.contribution-calendar .contribution-week .contribution-week-label{width:6px;height:16px;margin:1px;font-size:11px}.contribution-calendar .contribution-day-label{display:none}}@media screen and (max-width:460px){.contribution-calendar{flex-direction:column}.contribution-calendar .contribution-week{justify-content:center;flex-direction:row}.contribution-calendar .contribution-week div{width:12px;height:12px;margin:2px}.contribution-calendar .contribution-week .contribution-week-label{width:32px;height:12px;margin:2px;font-size:14px}.contribution-calendar .contribution-day-label{display:flex;flex-direction:row;justify-content:center}.contribution-calendar .contribution-day-label div{width:12px;height:12px;margin:2px;font-size:13px}.contribution-calendar .contribution-day-label div:first-child{width:32px}.contribution-calendar .contribution-day-label .contribution-week-label{height:12px}}
.highlight {
    background: #005cb9 !important;
}
.debug .contribution-day:hover .contribution-day-tooltip {
    display: none !important;
}
.debug .contribution-day {
    cursor: pointer;
}
span.tag {
    background: #005cb9;
    display: inline-block;
    color: white;
    font-weight: bold;
    font-size: 11px;
    padding: 4px 7px;
    border-radius: 50px;
    margin: 0px 5px 5px 0px;
}
.error {
    color: red;
    margin-top: 4px;
    font-size: 13px;
}
.mode-selection {
    text-align: right;
    margin-bottom: 24px;
}
.mode-selection input, .mode-selection  label {
    cursor: pointer;
}
footer {
    max-width: 960px;
    margin: 24px auto;
}