/*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */
.version::after {
    content: "0.5.8";
}

.off-canvas .off-canvas-toggle {
    font-size: 1rem;
    left: 1.5rem;
    position: fixed;
    top: 1rem;
}

.off-canvas .off-canvas-sidebar {
    width: 12rem;
    border-right: 1px solid #ccc;
}

.off-canvas .off-canvas-content {
    padding: 0;
    /*padding-bottom: 90vh;*/
    padding-bottom: 10vh;
}

.docs-container {
    min-height: 100vh;
}

.docs-navbar {
    height: 3rem;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 100;
}

.docs-navbar .btns {
    position: absolute;
    right: 1.5rem;
    top: 1rem;
    width: 14rem;
}

.docs-navbar .algolia-autocomplete {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

.docs-sidebar .docs-nav {
    bottom: 1.5rem;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    padding: .5rem 0.75rem;
    position: fixed;
    top: 4.5rem;
    width: 12rem;
}

.docs-sidebar .accordion {
    /*margin-bottom: .75rem;*/
    margin-bottom: 10px;
}

.docs-sidebar .accordion input ~ .accordion-header {
    color: #455060;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.docs-sidebar .accordion input:checked ~ .accordion-header {
    color: #505c6e;
}

.docs-sidebar .accordion .menu .menu-item {
    font-size: .7rem;
    padding-left: 1rem;
}

.docs-sidebar .accordion .menu .menu-item > a {
    background: transparent;
    color: #66758c;
    display: inline-block;
}

.docs-content {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1rem 1.5rem;
    width: calc(100vw - 12rem);
}

.docs-content > .container {
    margin-left: 0;
    /*max-width: 1000px;*/
    padding-bottom: 1.5rem;
}

.docs-content .anchor {
    color: #6362dc;
    display: none;
    margin-left: .2rem;
    padding: 0 .2rem;
}

.docs-content .anchor:focus,
.docs-content .anchor:hover {
    display: inline;
    text-decoration: none;
}

.docs-content .s-title,
.docs-content .s-subtitle {
    line-height: 1.8rem;
    margin-bottom: 0;
    padding-bottom: 1rem;
    padding-top: 1rem;
    position: static;
}

@supports ((position: -webkit-sticky) or (position: sticky)) {
    .docs-content .s-title,
    .docs-content .s-subtitle {
        position: sticky;
        position: -webkit-sticky;
        top: 0;
        z-index: 99;
    }

    .docs-content .s-title::before,
    .docs-content .s-subtitle::before {
        background: #fff;
        bottom: 0;
        content: "";
        display: block;
        left: -10px;
        position: absolute;
        right: -10px;
        top: -5px;
        z-index: -1;
    }
}

.docs-content .s-title:hover .anchor,
.docs-content .s-subtitle:hover .anchor {
    display: inline;
}

.docs-content .s-title + .docs-note,
.docs-content .s-subtitle + .docs-note {
    margin-top: .4rem;
}

.docs-content .docs-demo {
    padding-bottom: 1rem;
    padding-top: 1rem;
}

.docs-content .docs-demo .card {
    border: 0;
    box-shadow: 0 .25rem 1rem rgba(48, 55, 66, .15);
    height: 100%;
}

.docs-content .column {
    padding: .4rem;
}

.docs-content .docs-block {
    border-radius: .1rem;
    padding: .4rem;
}

.docs-content .docs-block.bg-gray {
    background: #eef0f3;
}

.docs-content .docs-shape {
    height: 4.8rem;
    line-height: 1.2rem;
    padding: 1.8rem 0;
    width: 4.8rem;
}

.docs-content .docs-dot {
    border-radius: 50%;
    display: inline-block;
    height: .5rem;
    padding: 0;
    width: .5rem;
}

.docs-content .docs-table th,
.docs-content .docs-table td {
    padding: .75rem .25rem;
}

.docs-content .docs-color {
    border-radius: .1rem;
    margin: .25rem 0;
    padding: 5rem .5rem .5rem;
}

.docs-content .docs-color .color-subtitle {
    font-size: .7rem;
    opacity: .75;
}

.docs-content .code .hljs-tag {
    color: #505c6e;
}

.docs-content .code .hljs-comment {
    color: #bcc3ce;
}

.docs-content .code .hljs-title,
.docs-content .code .hljs-class,
.docs-content .code .hljs-string,
.docs-content .code .hljs-number {
    color: #5755d9;
}

.docs-content .code .hljs-name,
.docs-content .code .hljs-attribute,
.docs-content .code .hljs-variable,
.docs-content .code .hljs-keyword,
.docs-content .code .hljs-built_in {
    color: #d73e48;
}

.docs-content .code .hljs-value,
.docs-content .code .hljs-hexcolor {
    color: #505c6e;
}

.docs-content .c-select-all {
    -webkit-user-select: all;
    -moz-user-select: all;
    -ms-user-select: all;
    user-select: all;
}

.docs-content .panel {
    height: 75vh;
}

.docs-content .panel .tile {
    margin: .75rem 0;
}

.docs-content .parallax {
    margin: 2rem auto;
}

.docs-content .form-autocomplete .menu {
    position: static;
}

.docs-content .example-tile-icon {
    align-content: space-around;
    align-items: center;
    background: #5755d9;
    border-radius: .1rem;
    color: #fff;
    display: flex;
    display: -ms-flexbox;
    -ms-flex-align: center;
    -ms-flex-line-pack: distribute;
    font-size: 1.2rem;
    height: 2rem;
    width: 2rem;
}

.docs-content .example-tile-icon .icon {
    margin: auto;
}

.docs-content .comparison-slider {
    height: auto;
    padding-bottom: 56.2222%;
}

.docs-content .comparison-slider .filter-grayscale {
    filter: grayscale(75%);
}

.docs-content .off-canvas {
    position: relative;
}

.docs-content .off-canvas .off-canvas-toggle {
    left: .4rem;
    position: absolute;
    top: .4rem;
    z-index: 1;
}

.docs-brand {
    color: #5755d9;
    height: 2rem;
    left: 0.75rem;
    position: fixed;
    top: .85rem;
}

.docs-brand .docs-logo {
    align-items: center;
    border-radius: .1rem;
    display: inline-flex;
    display: -ms-inline-flexbox;
    -ms-flex-align: center;
    font-size: .7rem;
    height: 2rem;
    padding: .2rem;
    width: auto;
}

.docs-brand .docs-logo:focus,
.docs-brand .docs-logo:hover {
    text-decoration: none;
}

.docs-brand .docs-logo img {
    display: inline-block;
    height: auto;
    width: 10rem;
}

.docs-brand .docs-logo h2 {
    display: inline-block;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.5rem;
    margin-bottom: 0;
    margin-left: .5rem;
    margin-right: .3rem;
}

.docs-footer {
    color: #bcc3ce;
    padding: .5rem;
}

.docs-footer a {
    color: #66758c;
}

/* Spectre Homepage style */
.section-hero {
    padding: 1rem .5rem;
}

.section-hero .docs-brand {
    position: absolute;
    top: .85rem;
}

.section-hero .docs-brand h2 {
    color: #5755d9;
}

.section-hero .column {
    padding: .4rem;
}

.section-ads {
    padding: 1rem .5rem;
}

.section-updates {
    padding: 4.5rem .5rem 2.5rem .5rem;
}

.section-updates .card {
    border: 0;
    margin-bottom: 1rem;
}

.section-features {
    padding: 4.5rem .5rem;
}

.section-features .column {
    padding: .4rem;
}

.section-footer {
    color: #bcc3ce;
    padding: 1.8rem .75rem 1rem;
    position: relative;
    z-index: 200;
}

.section-footer a {
    color: #66758c;
}

.grid-hero {
    padding-bottom: 2rem;
    padding-top: 6rem;
}

.grid-hero h1 {
    color: #3b4351;
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.grid-hero h2 {
    color: #455060;
    font-size: .9rem;
    font-weight: 400;
    line-height: 1.5rem;
    margin-bottom: 1.5rem;
}

.grid-hero h2 u {
    border-bottom: .1rem solid currentColor;
    padding-bottom: .05rem;
    text-decoration: none;
}

.grid-hero .card {
    background: none;
    border: 0;
    color: #5b687d;
    padding: .5rem;
}

.grid-hero .card .card-title {
    color: #5755d9;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0;
}

@media (max-width: 960px) {
    .off-canvas .off-canvas-toggle {
        z-index: 300;
    }

    .off-canvas .off-canvas-content {
        width: 100%;
    }

    .docs-sidebar .docs-brand {
        margin: .85rem 1.5rem;
        padding: 0;
        position: static;
    }

    .docs-sidebar .docs-nav {
        margin-top: 1rem;
        position: static;
    }

    .docs-sidebar .menu .menu-item > a {
        padding: .3rem .4rem;
    }

    .docs-navbar {
        /*-webkit-backdrop-filter: blur(5px);*/
        /*backdrop-filter: blur(5px);*/
        background: rgba(247, 248, 249, 1);
        left: 0;
        border-bottom: 1px solid #bbb;
    }

    .docs-content {
        min-width: auto;
        padding: 0 1.5rem;
        width: 100%;
        margin-top: 4rem;
    }

    .docs-content .s-title,
    .docs-content .s-subtitle {
        padding-top: 5rem;
        position: static;
    }

    .docs-content .s-title::before,
    .docs-content .s-subtitle::before {
        content: none;
    }

    .section-hero .s-brand {
        height: 5rem;
        padding: 1.5rem .5rem;
        text-align: center;
        width: 100%;
    }

    .section-hero .s-brand .s-logo {
        height: auto;
    }

    .section-hero .s-brand img {
        height: 3.2rem;
        width: 3.2rem;
    }

    .section-hero .s-brand h2 {
        display: none;
    }
}

@media (max-width: 600px) {
    .grid-hero h2 {
        font-size: .9rem;
    }

    .grid-hero .card {
        padding: 0;
    }

    .off-canvas .off-canvas-toggle {
        left: .5rem;
    }

    .docs-navbar .btns {
        right: .9rem;
    }

    .grid-hero .docs-brand {
        left: .9rem;
    }

    .docs-sidebar .docs-brand {
        margin: .85rem 0.5rem;
    }

    .docs-sidebar .docs-nav {
        padding: .5rem 0.5rem;
    }

    .docs-content {
        padding: 0 .5rem;
    }

    .docs-content .docs-block {
        padding: .4rem .1rem;
    }
}

@media (min-width: 1366px) {

}

.searchbox {
    box-sizing: border-box;
    display: inline-block;
    height: 32px !important;
    position: relative;
    visibility: visible !important;
    white-space: nowrap;
    width: 200px;
}

.searchbox .algolia-autocomplete {
    display: block;
    height: 100%;
    width: 100%;
}

.searchbox__wrapper {
    height: 100%;
    position: relative;
    width: 100%;
    z-index: 999;
}

.searchbox__input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #fff !important;
    border: 0;
    border-radius: 16px;
    box-shadow: inset 0 0 0 1px #ccc;
    box-sizing: border-box;
    display: inline-block;
    font-size: 12px;
    height: 100%;
    padding: 0 26px 0 32px;
    transition: box-shadow .4s ease, background .4s ease;
    vertical-align: middle;
    white-space: normal;
    width: 100%;
}

.searchbox__input::-webkit-search-cancel-button,
.searchbox__input::-webkit-search-decoration,
.searchbox__input::-webkit-search-results-button,
.searchbox__input::-webkit-search-results-decoration {
    display: none;
}

.searchbox__input:hover {
    box-shadow: inset 0 0 0 1px #b3b3b3;
}

.searchbox__input:active,
.searchbox__input:focus {
    background: #fff;
    box-shadow: inset 0 0 0 1px #aaa;
    outline: 0;
}

.searchbox__input::-webkit-input-placeholder {
    color: #aaa;
}

.searchbox__input:-ms-input-placeholder {
    color: #aaa;
}

.searchbox__input::-ms-input-placeholder {
    color: #aaa;
}

.searchbox__input::placeholder {
    color: #aaa;
}

.searchbox__submit {
    background-color: rgba(69, 142, 225, 0);
    border: 0;
    border-radius: 16px 0 0 16px;
    font-size: inherit;
    height: 100%;
    left: 0;
    margin: 0;
    padding: 0;
    position: absolute;
    right: inherit;
    text-align: center;
    top: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    vertical-align: middle;
    width: 32px;
}

.searchbox__submit:before {
    content: "";
    display: inline-block;
    height: 100%;
    margin-right: -4px;
    vertical-align: middle;
}

.searchbox__submit:active,
.searchbox__submit:hover {
    cursor: pointer;
}

.searchbox__submit:focus {
    outline: 0;
}

.searchbox__submit svg {
    fill: #6d7e96;
    height: 14px;
    vertical-align: middle;
    width: 14px;
}

.searchbox__reset {
    background: none;
    border: 0;
    cursor: pointer;
    display: block;
    fill: rgba(0, 0, 0, .5);
    font-size: inherit;
    margin: 0;
    padding: 0;
    position: absolute;
    right: 8px;
    top: 8px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.searchbox__reset.hide {
    display: none;
}

.searchbox__reset:focus {
    outline: 0;
}

.searchbox__reset svg {
    display: block;
    height: 8px;
    margin: 4px;
    width: 8px;
}

.searchbox__input:valid ~ .searchbox__reset {
    animation-duration: .15s;
    animation-name: sbx-reset-in;
    display: block;
}

@keyframes sbx-reset-in {
    0% {
        opacity: 0;
        transform: translate3d(-20%, 0, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* custom css starts */
.badge::after {
    box-shadow: none !important;
}

.badge.gray::after {
    background: #999;
}

.badge.green::after {
    background: #32b643;
}

.badge.red::after {
    background: #ff8a4a;
}