/* stylelint-disable selector-list-comma-newline-after */

.blog-header {
    line-height: 1;
    border-bottom: 1px solid #e5e5e5;
}

.blog-header-logo {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    font-size: 2.25rem;
}

.blog-header-logo:hover {
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
}

.display-4 {
    font-size: 2.5rem;
}

@media (min-width: 768px) {
    .display-4 {
        font-size: 3rem;
    }
}

.nav-scroller {
    position: relative;
    z-index: 2;
    height: 2.75rem;
    overflow-y: hidden;
}

.nav-scroller .nav {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    padding-bottom: 1rem;
    margin-top: -1px;
    overflow-x: auto;
    text-align: center;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

.nav-scroller .nav-link {
    padding-top: .75rem;
    padding-bottom: .75rem;
    font-size: .875rem;
}

.card-img-right {
    height: 100%;
    border-radius: 0 3px 3px 0;
}

.flex-auto {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}

.h-250 {
    height: 250px;
}

@media (min-width: 768px) {
    .h-md-250 {
        height: 250px;
    }
}

/*
 * Blog name and description
 */
.blog-title {
    margin-bottom: 0;
    font-size: 2rem;
    font-weight: 400;
}

.blog-description {
    font-size: 1.1rem;
    color: #999;
}

@media (min-width: 40em) {
    .blog-title {
        font-size: 3.5rem;
    }
}

/* Pagination */
.blog-pagination {
    margin-bottom: 4rem;
}

.blog-pagination>.btn {
    border-radius: 2rem;
}

/*
 * Blog posts
 */
.blog-post {
    margin-bottom: 4rem;
}

.blog-post-title {
    margin-bottom: .25rem;
    font-size: 2.5rem;
}

.blog-post-meta {
    margin-bottom: 1.25rem;
    color: #999;
}

/*
 * Footer
 */
.blog-footer {
    padding: 2.5rem 0;
    color: #999;
    text-align: center;
    background-color: #f9f9f9;
    border-top: .05rem solid #e5e5e5;
}

.blog-footer p:last-child {
    margin-bottom: 0;
}


/*
 Transforming nested lists to pretty tree
 
 <div class="tree">
    <ul>
        <li>
            <ul>
            ...
            </ul>
        </li>
        ...
    </ul>
 </div>
 
Source: http://thecodeplayer.com/walkthrough/css3-family-tree

Some other advices about displaying trees: http://stackoverflow.com/questions/1695115/how-do-i-draw-the-lines-of-a-family-tree-using-html-css
*/

* {
    margin: 0;
    padding: 0;
}

.tree ul {
    padding-top: 20px;
    position: relative;

    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;

}

.tree>ul {
    text-align: center;
}

.tree li {
    white-space: nowrap;
    float: left;
    text-align: center;
    list-style-type: none;
    position: relative;
    padding: 20px 5px 0 5px;

    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;

    margin-bottom: 20px;
}

/*We will use ::before and ::after to draw the connectors*/

.tree li::before,
.tree li::after {
    content: '';
    position: absolute;
    top: 0;
    right: 50%;
    border-top: 1px solid #ccc;
    width: 50%;
    height: 20px;
}

.tree li::after {
    right: auto;
    left: 50%;
    border-left: 1px solid #ccc;
}

/*We need to remove left-right connectors from elements without
any siblings*/
.tree li:only-child::after,
.tree li:only-child::before {
    display: none;
}

/*Remove space from the top of single children*/
.tree li:only-child {
    padding-top: 0;
}

/*Remove left connector from first child and
right connector from last child*/
.tree li:first-child::before,
.tree li:last-child::after {
    border: 0 none;
}

/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before {
    border-right: 1px solid #ccc;
    border-radius: 0 5px 0 0;
    -webkit-border-radius: 0 5px 0 0;
    -moz-border-radius: 0 5px 0 0;
}

.tree li:first-child::after {
    border-radius: 5px 0 0 0;
    -webkit-border-radius: 5px 0 0 0;
    -moz-border-radius: 5px 0 0 0;
}

/*Time to add downward connectors from parents*/
.tree ul ul::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    border-left: 1px solid #ccc;
    width: 0;
    height: 20px;
}

.tree li a {
    /* border: 1px solid #ccc; */
    padding: 10px 20px;
    text-decoration: none;
    color: #666;
    /* font-family: arial, verdana, tahoma; */
    font-size: 14px;
    display: inline-block;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}

/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover,
.tree li a:hover+ul li a {
    background: #c8e4f8;
    color: #000;
    /*border: 1px solid #94a0b4;*/
}

/*Connector styles on hover*/
.tree li a:hover+ul li::after,
.tree li a:hover+ul li::before,
.tree li a:hover+ul::before,
.tree li a:hover+ul ul::before {
    border-color: #94a0b4;
}


/*....*/
.tree .terminal-node {
    background: #e2ffe4
}

/*Thats all. I hope you enjoyed it.
Thanks :)*/

/* CKY Table Cell Colors */
.cell-normal {
    background-color: #fff !important;
}

.cell-active {
    background-color: #FF4500 !important;
}

.cell-test {
    background-color: #ADFF2F !important;
}

.cell-match {
    background-color: #87CEEB !important;
}

.cell-update {
    background-color: #D8BFD8 !important;
}