/* #Reset and general elements
html5doctor.com Reset v1.6.1 - http://cssreset.com */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}

html, body {
    font-family: sans-serif;
    height: 100%;
}

a {
    color: black;
}

.hidden {
    display: none !important;
}

/* #Grids

    <div class="grid">
        <p class="grid__grow">Backlog</p>
        <p class="grid__grow">In progress</p>
        <p class="grid__grow">Done</p>
    </div>
*/
.grid {
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    -webkit-flex-direction: row;
}

.grid__grow {
    flex-grow: 1;
    -webkit-flex-grow: 1;
}

.grid__no-shrink {
    flex-shrink: 0;
    -webkit-flex-shrink: 0;
}

/* Column

    <div class="grid-column">
        <div class="grid__grow">Foo</div>
        <div class="grid__grow">Foo</div>
        <div class="grid__grow">Foo</div>
    </div>
*/
.grid-column {
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    height: 100%;
}

/* #Kanban

   Column

    <div class="grid">
        <p class="kb-column grid__grow">Foo</p>
        <p class="kb-column grid__grow">Bar</p>
    </div>
*/
.kb-column {
    min-width: 200px;
}

/* Item

    <div class="kb-column">
        <div class="kb-column__item">foo</div>
        <div class="kb-column__item">foo</div>
        <div class="kb-column__item">foo</div>
    </div>
*/
.kb-column__item {
    border-bottom: 1px solid #ddd;
    padding: 10px;
    box-sizing: border-box;
}

/* Kanban column header

    <h1 class="kb-column__header">
        <span class="kb-column__title">Backlog</span>
    </h1>
*/
.kb-column__header {
    background-color: #ddd;
    border-right: 1px solid white;
}

.kb-column__title {
    text-transform: uppercase;
}

.kb-column__border {
    border-right: 1px solid #ddd;
}
.kb-column:last-child .kb-column__border {
    border-right: none;
}

.scrollable {
    overflow: auto;
}

/* #Bug
    <div class="bug">
        I'm a bug
    </div>
*/
.bug {
    height: 100px;
}

/*
    <div class="bug bug--blocked">
        I'm a bug
    </div>
*/
.bug--blocked {
    transition: background-color 1s ease;
    background-color: hsl(0, 50%, 75%);
}


/* #Overlay
    <div class="overlay">
        <p>Loading…</p>
    </div>
*/
.overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.7);
}

/* Center

    <div class="center" style="height: 100%;">Yeah, I'm horizontally and vertically centered</div>
*/
.center {
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
}

/* Pulse animation

   0.99 is here to not change the stacking context

    <p class="pulse">Loading…</p>
 */
@keyframes pulse {
    0% { opacity: 0.99; }
    100% { opacity: 0; }
}

@-webkit-keyframes pulse {
    0% { opacity: 0.99; }
    100% { opacity: 0; }
}

.pulse {
    animation: pulse 2.5s infinite alternate linear;
    -webkit-animation: pulse 2.5s infinite alternate linear;
}

.help {
    position: fixed;
    right: 5px;
    bottom: 5px;
}