@charset "utf-8";
/* CSS Document */

#documentation {
    position: relative;
    -webkit-font-smoothing: antialiased;
}

#documentation h1 {
    font-size: 2.5rem;
    font-weight: 400;
    margin-bottom: 1rem;
}

@media only screen and (max-width: 768px) {
    #documentation h1 {
        font-size: 1.2rem;
        font-weight: 600;
    }
}

#documentation h1 section {
    position: absolute;
}

#documentation #content h2 {
    font-size: 1.7rem;
    font-weight: 300;
    margin-bottom: 1rem;
}

#documentation .docs-homepage-section-preview h2 .uiIcon {
    position: absolute;
    width: 24px;
    height: 24px;
    right: 1rem;
    padding: 0.5rem 0;
    background-position: center right;
    background-repeat: no-repeat;
    text-indent: -900rem;
}

#documentation .docs-homepage-section-preview.open h2 .uiIcon.icon-arrowTop,
#documentation .docs-homepage-section-preview h2 .uiIcon.icon-arrowBottom {
    display: inline-block;
}

#documentation .docs-homepage-section-preview.open h2 .uiIcon.icon-arrowBottom,
#documentation .docs-homepage-section-preview h2 .uiIcon.icon-arrowTop {
    display: none;
}

#documentation .top-toolbar {
    display: flex;
    justify-content: flex-end;
    padding: 30px 100px 0 0;
}

#documentation .top-toolbar .search-wrapper {
    margin: 0;
}

#documentation .docs-homepage-section-preview {
    box-sizing: border-box;
    background-color: #fff;
    height: 350px;
    position: relative;
    padding: 0;
    border: none;
    width: 20%;
    min-width: 245px;
    flex: none;
    margin-bottom: 25px;
    margin-right: 25px;
    /*cursor: pointer;*/
}

#documentation .docs-homepage-section-preview .card {
    box-sizing: border-box;
    padding: 1.6rem 1rem 1rem 1.6rem;
    height: 100%;
    width: 100%;
    border: 1px solid #dee2e6;
    overflow: hidden;
}

#documentation .docs-homepage-section-preview.open .card {
    top: -1rem;
    left: -1rem;
    height: auto;
    min-height: calc(100% + 2rem);
    width: calc(100% + 2rem);
    z-index: 1;
    background-color: #f1f7ff;
}

#documentation .group,
#documentation .group .group-items {
    display: flex;
}

#documentation .group {
    flex-direction: column;
}

#documentation .group:first-child {
    margin-top: 3rem;
}

#documentation .group .group-wrapper,
#documentation .group .group-items {
    flex-direction: row;
    flex-wrap: wrap;
}

#documentation .docs-homepage-section-preview ul {
    padding: 0;
    list-style-type: none;
}

#documentation .docs-homepage-section-preview li > span a {
    white-space: nowrap;
}

#documentation .docs-homepage-section-preview:not(.open) span.hide-collapsed {
    display: none !important;
}

#documentation .docs-homepage-section-preview:not(.open) ul.docs-homepage-level0-item > li > span {
    display: block;
}

#documentation .docs-homepage-section-preview:not(.open) ul.docs-homepage-level0-item ul,
#documentation .docs-homepage-section-preview:not(.open) ul.docs-homepage-level1-item:not(.top-level-sub-items) li {
    display: inline;
}

#documentation .docs-homepage-section-preview.open .item-split {
    display: none;
}

#documentation .docs-homepage-level1-item:not(.top-level-sub-items),
#documentation .docs-homepage-section-preview.open .docs-homepage-level1-item {
    font-weight: 300;
}

#documentation .docs-homepage-section-preview.open .parent-title {
    display: none;
}

#documentation .docs-homepage-section-preview:not(.open) .docs-homepage-level1-item:not(.top-level-sub-items) {
    font-size: 0.8rem;
    font-weight: 400;
}

#documentation .docs-homepage-section-preview.open ul.level {
    padding-left: 5px;
}

@media (min-width: 715px) {
    #documentation .docs-homepage-section-preview:not(.open) ul.docs-homepage-level1-item:not(.top-level-sub-items) {
        display: block !important;
        transform: translateX(10px);
    }
    #documentation .docs-homepage-section-preview .card > h2 .uiIcon {
        display: none;
    }
}

@media (max-width: 715px) {
    #documentation .group .group-items {
        flex-direction: column;
    }
    #documentation .docs-homepage-section-preview:not(.open) .docs-homepage-level0-item {
        display: none;
    }
    #documentation .docs-homepage-section-preview {
        width: 100%;
        height: auto;
    }
}

@media (max-width: 991px) {
    #documentation > div #side-nav {
        padding-bottom: 1rem;
    }
    #documentation > div #side-nav .search-wrapper {
        margin-bottom: 0;
    }
    #documentation .group:first-child {
        margin-top: 1rem;
    }
    #documentation .docs-homepage-section-preview {
        cursor: pointer;
    }
    #documentation .docs-homepage-section-preview:not(.open) .card:hover {
        border-color: #a7a7a7;
    }
}

/* ICONS */

.newIcon {
    min-height: 40px;
    width: 40px;
    margin-bottom: 8px;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

.icon-arrowBottom {
    background-image: url("imgs/icon-arrow-bottom.svg");
}

.icon-arrowTop {
    background-image: url("imgs/icon-arrow-top.svg");
}

.icon-information {
    background-image: url("imgs/icon-information.svg");
}

.icon-accessories {
    background-image: url("imgs/icon-accessories.svg");
}

.icon-api {
    background-image: url("imgs/icon-api.svg");
}

.icon-charts {
    background-image: url("imgs/icon-charts.svg");
}

.icon-columns {
    background-image: url("imgs/icon-columns.svg");
}

.icon-components {
    background-image: url("imgs/icon-components.svg");
}

.icon-data {
    background-image: url("imgs/icon-data.svg");
}

.icon-edit-cells {
    background-image: url("imgs/icon-edit-cells.svg");
}

.icon-filter {
    background-image: url("imgs/icon-filter.svg");
}

.icon-frameworks {
    background-image: url("imgs/icon-frameworks.svg");
}

.icon-group {
    background-image: url("imgs/icon-group.svg");
}

.icon-import-export {
    background-image: url("imgs/icon-import-export.svg");
}

.icon-render-cells {
    background-image: url("imgs/icon-render-cells.svg");
}

.icon-rows {
    background-image: url("imgs/icon-rows.svg");
}

.icon-selection {
    background-image: url("imgs/icon-selection.svg");
}

.icon-style {
    background-image: url("imgs/icon-style.svg");
}

.icon-test {
    background-image: url("imgs/icon-test.svg");
}

.icon-scrolling {
    background-image: url("imgs/icon-scroll.svg");
}

.icon-interactivity {
    background-image: url("imgs/icon-interaction.svg");
}

.docs-homepage-section-preview + h1 {
    padding-top: 100px;
}