@import "colors";

@media screen and (min-width : 320px) {
    html, body, .docs-article p {
        font-size   : calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
        line-height : calc(25px + (30 - 25) * ((100vw - 300px) / (1600 - 300)));
    }
}
@media screen and (min-width : 1000px) {
    html, body, .docs-article p {
        font-size   : 1.1rem;
        line-height : 2rem;
    }
}
/**
#5579D1
$color-blue

 */
@mixin trans($count: 0.3s) {
    -webkit-transition : all $count ease-out;
    -moz-transition    : all $count ease-out;
    -o-transition      : all $count ease-out;
    transition         : all $count ease-out;
}
@mixin blue-shadow($depth: 20px, $alpha: 0.1) {
    -webkit-box-shadow : 0px $depth/2 $depth rgba(red($color-blue), green($color-blue), blue($color-blue), $alpha) !important;
    -moz-box-shadow    : 0px $depth/2 $depth rgba(red($color-blue), green($color-blue), blue($color-blue), $alpha) !important;
    box-shadow         : 0px $depth/2 $depth rgba(red($color-blue), green($color-blue), blue($color-blue), $alpha) !important;
}
@mixin square($size: 60px, $max-size: $size) {
    width      : $size !important;
    height     : $size !important;
    max-width  : $max-size !important;
    max-height : $max-size !important;
}
.trans {
    @include trans(1.75s);
}
.block {
    display : block !important;
}
.text-orange {
    color:$color-xfinity-pumkin !important;
}
.text-grey {
    color:#445 !important;
    letter-spacing: 0.6px;
}
img.icon_profile {
    display   : inline-block;
    width     : 100%;
    max-width : 100px;
    height    : auto;
    padding   : 0.25rem;
    &.left {
        margin : 0px 20px 20px 0;
    }
    &.center {
        margin : 0 auto;
    }
    &.right {
        margin : 0px 0 20px 20px;
    }
}
span.block {
    display : block;
}
.tooltip {
    color           : $color-blue;
    cursor          : pointer;
    text-decoration : underline dotted $color-xfinity-pumkin;
}
body {
    font-weight : 500;
    .container {
        @media print {
            margin : 50px 0 !important;
            width  : 100% !important;
        }
    }
    header.header {
        @media print {
            display : none !important;
        }
    }
    //header.header {
    //    @media print {
    //        display : none !important;
    //    }
    //    @include trans(1s);
    //    height : 80px !important;
    //    > div.desktop-search-results {
    //        > h3, h2, td, a {
    //            color : white;
    //        }
    //        //background-color   : white;
    //        overflow           : scroll;
    //        position           : absolute;
    //        display            : block;
    //        visibility         : collapse;
    //        opacity            : 0;
    //        top                : 80px;
    //        bottom             : 0px;
    //        left               : 0px;
    //        right              : 0px;
    //        -webkit-transition : all 1s ease-out;
    //        -moz-transition    : all 1s ease-out;
    //        -o-transition      : all 1s ease-out;
    //        transition         : all 1s ease-out;
    //        padding            : 20px 20px !important;
    //        //height           : 10px;
    //        //>*{
    //        //    display:none!important;
    //        //    color:white !important;
    //        //}
    //    }
    //    &.fixed-top {
    //        @include blue-shadow();
    //        &:hover {
    //            @include blue-shadow(80px, 0.45);
    //            //height : 70vh !important;
    //            @media (max-width : 768px) {
    //                height : 80px !important;
    //            }
    //            > div.desktop-search-results {
    //                background : rgb(53, 76, 130);
    //                background : linear-gradient(0deg, rgba(53, 76, 130, 1) 0%, rgba(85, 121, 210, 1) 33%, rgba(150, 161, 255, 1) 100%);
    //                color      : white !important;
    //                opacity    : 1;
    //                visibility : visible;
    //                &:before {}
    //
    //            }
    //        }
    //    }
    //}
    //@media (max-width : 768px) {
    //    div.desktop-search-results {
    //        display : none !important;
    //    }
    //}

    .docs-wrapper {
        //font-weight : 500;
        > .docs-sidebar {
            @media print {
                display : none !important;
            }
            width      : 350px !important;
            margin-top : 0px;
            padding    : 0px;
            @include trans(0.3s);
            //background : rgb(53, 76, 130);
            //background : linear-gradient(0deg, rgba(53, 76, 130, 1) 0%, rgba(85, 121, 210, 1) 33%, rgba(150, 161, 255, 1) 100%);
            .top-search-box {
                //margin-top : 20px;
                display : none !important;
            }
        }
        nav.docs-nav.navbar {
            margin-top       : 30px;
            padding-top      : 50px;
            @media (min-width : 769px) {
                padding-top : 20px;
                margin-top  : 30px;
            }
            background-color : $color-cool-grey-1;
            @include trans(0.3s);
            ul.section-items > li {
                a {
                    @include trans(0.1s);
                    &:hover {
                        color : $color-blue;
                        * {
                            color : $color-blue;
                        }
                    }
                }
                @include trans(0.6s);
                &:hover {
                    color : $color-blue;
                    //border-top : 1px solid white;
                }
            }
            &:hover {
                background-color : white !important;

            }
        }
    }

    article {
        font-weight   : 500;
        @media print {
            width       : 100% !important;
            font-weight : normal;
        }
        margin-bottom : 100px;
        &.docs-article {
            margin-left : 50px !important;
            margin-right : 50px !important;
            @media (max-width : 768px) {
                margin-left : 5px !important;
                margin-right : 5px !important;
            }
            @media print {
                width : 100% !important;
            }
            font-weight : 500;
            .docs-time {font-weight : 600;
                color               : $color-cool-grey-8 !important;
                font-size           : 18px !important;
                letter-spacing      : 2px !important;
            }
            h1 {
                font-weight   : 900;
                color         : #000000 !important;
                margin-bottom : 2rem;
                position      : relative;
                font-size     : calc(32px + (56 - 32) * ((100vw - 300px) / (1600 - 300))) !important;
            }
            h2.section-heading {
                font-weight   : 900;
                font-size     : calc(28px + (48 - 28) * ((100vw - 300px) / (1600 - 300))) !important;
                margin-top    : 35px !important;
                margin-bottom : 1rem !important;
            }
            h3.section-heading {
                font-weight   : 900;
                /*font-size     : 2.8rem;*/
                font-size     : calc(24px + (40 - 24) * ((100vw - 300px) / (1600 - 300))) !important;
                margin-top    : 15px !important;
                margin-bottom : 2rem !important;
                color         : $color-blue;
            }
            ol, ul {
                text-align : left;
            }
            ul.none {
                list-style : none !important;
            }
            ol.outline {
                text-align : left;
                > li {
                    padding-left : 20px;
                }
            }
            p {
                color         : #777788 !important;
                text-align    : justify;
                margin-bottom : 2.5rem !important;
                font-weight   : normal;
                &.section-intro {
                    color        : $color-blue !important;
                    font-weight  : 300 !important;
                    font-size    : 1.4rem !important;
                    line-height  : 2.2rem !important;
                    margin       : 3.5rem 0 !important;
                    padding-left : 20px;
                    border-left  : 15px solid $color-blue !important;
                }
            }
            section.docs-section {

                @media print {
                    width : 100% !important;
                }
                h2.section-heading {
                    font-weight   : 900;
                    font-size     : calc(28px + (48 - 28) * ((100vw - 300px) / (1600 - 300))) !important;
                    margin-top    : 25px !important;
                    margin-bottom : 1rem !important;
                }
                > h3 {
                    font-weight   : 100 !important;
                    font-size     : calc(18px + (48 - 18) * ((100vw - 300px) / (1600 - 300))) !important;
                    margin-top    : 70px !important;
                    margin-bottom : 1.4rem !important;
                    color         : $color-xfinity-pumkin;
                    &.title {
                        font-size : calc(20px + (48 - 20) * ((100vw - 300px) / (1600 - 300))) !important;
                    }
                }
                > h4, h4 {
                    font-weight   : 900;
                    font-size     : 1.8rem;
                    margin-top    : 10px;
                    margin-bottom : 2.75rem;
                    color         : $color-blue;
                }
                h5 {
                    font-weight   : 700 !important;
                    font-size     : 1.4rem !important;
                    margin-top    : 45px !important;
                    margin-bottom : 1.2rem;
                }
                ol.bold-numbers {
                    font-weight  : 700 !important;
                    padding-left : 2rem;
                    font-size    : large !important;
                    > li {
                        padding-left   : 1rem;
                        padding-right  : 2rem;
                        padding-bottom : 1rem;
                        > span.normal {
                            font-size   : medium !important;
                            font-weight : normal !important;
                        }
                    }
                }
                border-bottom : 3px solid $color-cool-grey-7 !important;
                margin-top    : 90px;
                margin-bottom : 40px;
                .index-id {
                    display     : block !important;
                    float       : right;
                    clear       : right;
                    font-size   : 80%;
                    font-weight : 200;
                    text-align  : right;
                    color       : #5D6778;
                }
                blockquote, .blockquote {
                    position                : relative;
                    border-radius           : 8px 8px 8px 8px !important;
                    width                   : 100% !important;
                    border-top              : 12px solid $color-blue;
                    border-bottom           : 4px solid $color-blue;
                    -webkit-font-smoothing  : antialiased;
                    -moz-osx-font-smoothing : grayscale;
                    display                 : block !important;
                    margin                  : 60px 0px;
                    padding                 : 60px 60px;
                    &.blockquote-lite {
                        border-radius    : 6px 6px 6px 6px !important;
                        background-color : $color-cool-grey-1 !important;
                        border-top       : 4px solid $color-cool-grey-8 !important;
                        border-bottom    : 4px solid $color-cool-grey-8 !important;
                        margin           : 15px 0px !important;
                        padding          : 10px 20px !important;
                    }
                    @include blue-shadow();
                    @include trans(1s);
                    h3 {
                        font-size   : 35px !important;
                        line-height : 35px !important;
                        font-weight : 900 !important;
                        color       : $color-blue;
                    }
                    h4 {
                        font-size   : 22px !important;
                        line-height : 22px !important;
                        font-weight : 200 !important;
                        color       : $color-cool-grey-9;
                    }
                    .quoted {
                        display : block !important;
                        margin  : 20px 0 30px 0 !important;
                    }
                    i.icon.fas {
                        display   : block !important;
                        position  : absolute !important;
                        top       : 12px !important;
                        left      : 12px !important;
                        width     : 32px !important;
                        height    : 32px;
                        font-size : 30px !important;

                    }
                    > p {
                        text-align : justify !important;
                        margin     : 40px 0;
                    }
                    p.reference {
                        position         : relative !important;
                        border-radius    : 6px;
                        border           : 4px solid $color-cool-grey-6;
                        border-left      : 50px solid $color-cool-grey-6;

                        font-size        : 16px !important;
                        line-height      : 17px !important;
                        font-weight      : 700 !important;
                        color            : $color-cool-grey-12;

                        background-color : $color-cool-grey-1;
                        height           : auto !important;
                        padding          : 25px 15px 0 15px !important;
                        margin           : 22px 0 0 0 !important;
                        @include trans(.6s);
                        i.icon, svg.icon {
                            @include trans(.7s);
                            @include square(28px);
                            display   : block !important;
                            position  : absolute !important;
                            top       : 18px !important;
                            left      : -38px !important;
                            font-size : 20px !important;
                            color     : $color-cool-grey-1;
                            fill      : $color-cool-grey-1;
                            > * {
                                color : $color-cool-grey-1;
                                fill  : $color-cool-grey-1;
                            }
                        }
                        a, a.reference-link {
                            @include trans(.6s);
                            display         : none !important;
                            border-radius   : 5px !important;
                            margin          : 5px -5px;
                            padding         : 10px 5px;
                            font-size       : 14px !important;
                            color           : $color-blue;
                            font-weight     : 600 !important;
                            text-decoration : none !important;
                            &:hover {
                                @include blue-shadow(5px, .2);
                                text-decoration  : none !important;
                                color            : white !important;
                                background-color : $color-blue !important;

                            }
                        }
                        &:hover {
                            border-color      : $color-blue !important;
                            border-left-color : $color-blue !important;
                            padding-bottom    : 20px !important;
                            color             : black;
                            background-color  : $color-cool-grey-3;
                            a.reference-link {
                                display : block !important;
                            }
                            i.icon, svg.icon {
                                color : white;
                                fill  : white;
                                > * {
                                    color : white;
                                    fill  : white;
                                }
                            }
                        }
                    }
                    &:hover {
                        @include blue-shadow(80px, 0.45);
                        p.reference {

                            background-color : $color-cool-grey-2;
                        }
                    }

                }

                .panel-group {
                    margin-top    : 65px;
                    border-radius : 4px !important;
                    font-size     : small;
                    .panel {
                        margin-top    : 35px;
                        border-radius : 4px !important;
                        @include blue-shadow();
                        @include trans(.3s);
                        margin        : 10px 0px !important;
                        &.panel-default {}
                        .panel-heading {
                            @include trans(.3s);
                            border-radius    : 4px !important;

                            background-color : $color-blue;
                            text-decoration  : none !important;
                            color            : white;
                            &:hover {
                                background-color : lighten($color-blue, 10%);
                            }
                            a {
                                text-decoration : none !important;
                                color           : $color-cool-grey-10;
                                &:hover {
                                    text-decoration : none !important;
                                }
                            }
                            h4.panel-title {
                                font-weight   : 400;
                                font-size     : 18px !important;
                                border-radius : 4px !important;
                                padding       : 10px;
                                color         : white;
                                a {
                                    text-decoration : none !important;
                                    color           : white;
                                    display         : block;
                                    &:hover {
                                        text-decoration : none !important;
                                    }
                                }
                            }
                        }
                        .panel-body {
                            &.bg-accordian {}
                            padding : 10px 20px !important;
                        }
                    }
                }
            }
        }
        header {
            border-bottom : 3px solid $color-cool-grey-7 !important;
        }
    }
    footer {

    }
    .to-top {
        @media print {
            display : none !important;
        }
        display            : block !important;
        position           : fixed !important;
        -webkit-transform  : translate3d(0, 0, 0);
        transform          : translate3d(0, 0, 0);
        width              : 70px !important;
        height             : 70px !important;
        border-radius      : 100% !important;
        -webkit-transition : all 0.3s ease-out;
        -moz-transition    : all 0.3s ease-out;
        -o-transition      : all 0.3s ease-out;
        transition         : all 0.3s ease-out;
        color              : $color-cool-grey-12;
        background-color   : $color-cool-grey-3;
        bottom             : 50px;
        right              : 50px !important;
        font-size          : 12px !important;
        letter-spacing     : 2px !important;
        text-align         : center !important;
        padding-top        : 12px;
        &:before {
            content            : "^";
            align-content      : center;
            display            : block;
            -webkit-transition : all 0.3s ease-out;
            -moz-transition    : all 0.3s ease-out;
            -o-transition      : all 0.3s ease-out;
            transition         : all 0.3s ease-out;
        }
        &:hover {
            bottom           : 60px;
            background-color : $color-blue;
            color            : white;
            &:before {
                margin-top : 5px;
            }
        }

    }
}
.stretched {
    letter-spacing : 3px;
    display        : block !important;
}
caption.diagram, p.diagram {
    margin : 10px auto 70px auto !important;
    color  : $color-cool-grey-9;
}
b, .bold {
    font-weight : 900;
}
.lite { font-weight : 400 !important;}
.liter { font-weight : 300 !important;}
.litest { font-weight : 200 !important;}
.smaller {
    font-size : smaller;
}
.small {
    font-size : small;
}
.text-black {
    color : black !important;
}
.x-large {
    font-size : x-large !important;
}
.larger {
    font-size : larger !important;
}
.large {
    font-size : large !important;
}
.reference {
    color     : $color-cool-grey-6;
    font-size : smaller;
    > a {
        text-align    : left;
        color         : $color-cool-grey-6;
        display       : block !important;
        border-radius : 4px;
    }
}
span.language {
    font-weight : 700;
    color       : $color-cool-grey-3;
}
.text-blue { color : $color-blue !important;}
.text-dark-blue { color : $color-blue !important;}
.bg-blue {
    color            : #FFFFFF !important;
    background-color : $color-blue !important;
}
.bg-dark-blue {
    color            : #FFFFFF !important;
    background-color : $color-blue !important;
}
.lighthouse > img {
    max-width : 32%;
    margin    : 20px 0.25% !important;
    &._20 {
        max-width : 18%;
        margin    : 15px 0.25% !important;
    }
}


//.site-logo > .logo-container {
//    -webkit-box-shadow : none !important;
//    -moz-box-shadow    : none !important;
//    box-shadow         : none !important;
//    background         : transparent !important;
//    padding-bottom     : 0 !important;
//    border             : none !important;
//    @include square(80px);
//    display            : inline-block !important;
//    svg#CaptionInspectorCircle {
//        @include square(58px);
//        margin : 0 0 0 0;
//        g.caption-inspector-logo {
//            @include trans(1s);
//            circle.circle-background {
//                @include blue-shadow(80px, 0.75);
//                fill         : rgba(255, 255, 255, 0.75);
//                stroke       : rgba(255, 255, 255, 0.95);
//                stroke-width : 2%;
//                @include trans(0.5s);
//            }
//            path.eye-glass {
//                fill               : rgba(255, 255, 255, 0.55);
//                opacity            : 0.20;
//                -webkit-transition : all 2s ease-out;
//                -moz-transition    : all 2s ease-out;
//                -o-transition      : all 2s ease-out;
//                transition         : all 2s ease-out;
//            }
//            path.inspector-face {
//                fill         : $color-cool-grey-12;
//                fill         : rgb(60, 60, 70);
//                stroke       : rgba(100, 100, 140, 0.2);
//                stroke-width : 2%;
//                @include trans(0.5s);
//            }
//            &:hover {
//                circle.circle-background {
//                    @include blue-shadow(80px, 0.45);
//                    fill         : #FFFFFD !important;
//                    stroke       : lighten($color-xfinity-pumkin, 4%);
//                    stroke-width : 3%;
//                }
//                path.inspector-face {
//                    fill         : $color-xfinity-pumkin !important;
//
//                    stroke       : darken($color-xfinity-pumkin, 2%);
//                    stroke-width : 1%;
//                }
//                path.eye-glass {
//                    opacity : 0.85;
//                    size    : 50%;
//                }
//            }
//        }
//    }
//    //@media (max-width : 768px) {
//    //    display : none !important;
//    //}
//}
//.logo-container {
//    //border-radius:200px;
//    display        : none !important;
//    @include blue-shadow(30px, 0.45);
//    background     : rgb(53, 76, 130);
//    padding-bottom : 30px;
//    border-bottom  : 2px solid rgb(85, 121, 210) !important;
//    background     : linear-gradient(180deg, rgba(53, 76, 130, 1) 0%, rgba(85, 121, 210, 1) 33%, rgba(150, 161, 255, 1) 100%);
//    > svg#CaptionInspectorCircle {
//        margin : 40px 40px 0px 40px;
//        g.caption-inspector-logo {
//            @include trans(1s);
//            circle.circle-background {
//                @include blue-shadow(80px, 0.75);
//                fill         : rgba(255, 255, 255, 0.75);
//                stroke       : rgba(255, 255, 255, 0.95);
//                stroke-width : 2%;
//                @include trans(0.5s);
//            }
//            path.eye-glass {
//                fill               : rgba(255, 255, 255, 0.55);
//                opacity            : 0.20;
//                -webkit-transition : all 2s ease-out;
//                -moz-transition    : all 2s ease-out;
//                -o-transition      : all 2s ease-out;
//                transition         : all 2s ease-out;
//            }
//            path.inspector-face {
//                fill         : $color-cool-grey-12;
//                fill         : rgb(60, 60, 70);
//                stroke       : rgba(100, 100, 140, 0.2);
//                stroke-width : 2%;
//                @include trans(0.5s);
//            }
//            &:hover {
//                circle.circle-background {
//                    @include blue-shadow(80px, 0.45);
//                    fill         : #FFFFFD !important;
//                    stroke       : lighten($color-xfinity-pumkin, 4%);
//                    stroke-width : 3%;
//                }
//                path.inspector-face {
//                    fill         : $color-xfinity-pumkin !important;
//
//                    stroke       : darken($color-xfinity-pumkin, 2%);
//                    stroke-width : 1%;
//                }
//                path.eye-glass {
//                    opacity : 0.85;
//                    size    : 50%;
//                }
//            }
//        }
//    }
//    @media (max-width : 768px) {
//        display : none !important;
//    }
//}
.bump {
    margin-top : 25px;
}
.bump.bump {
    margin-top : 50px;
}
.bump.bump.bump {
    margin-top : 75px;
}
span.language {
    font-family : "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono", "Droid Sans Mono", monospace, monospace;
    color       : #5D6778;
    font-weight : 900;
}
table.software > thead {
    color            : #FFFFFF !important;
    background-color : $color-xfinity-pumkin !important;
}
ol.guidelines > li {
    margin-left : 45px;

}
ol.guidelines li > span.bold {
}
ol.guidelines li > span.description {
    display : block !important;
}
div.outline-indicator {
    display    : block !important;
    /*float      : right !important;*/
    /*clear      : right !important;*/
    color      : #DDDDDE !important;
    max-width  : 60px !important;
    text-align : right !important;
    position   : absolute !important;
    top        : 5px !important;
    right      : 0 !important;
}
span.outline-indicator {
    display     : inline-block;
    color       : $color-cool-grey-10;
    width       : 40px;
    float       : right;
    clear-after : both;
}
.docs-nav {
    &.navbar {
        width : 400px;
    }
    position : relative !important;
    a.nav-link {
        display  : block;
        position : relative !important;
        padding  : 0px 40px 15px 15px;
        color    : $color-cool-grey-10;
    }
    .nav-item {
        position : relative !important;
        &:focus, &:active {
            color : $color-blue !important;
        }
        &.section-title {
            a.nav-link {
                font-weight : 900 !important;
                position    : relative !important;
                color       : $color-cool-grey-13;
                .outline-indicator {
                    display    : block !important;
                    color      : $color-cool-grey-8 !important;
                    max-width  : 60px !important;
                    text-align : right !important;
                    position   : absolute !important;
                    top        : 5px !important;
                    right      : 0 !important;
                }
                &:hover {
                    display     : block;
                    font-weight : 900 !important;
                    //color       : $color-cool-grey-12 !important;
                    color       : $color-blue;
                    .outline-indicator {
                        color : $color-blue !important;
                    }
                }
            }
            &:hover {
                color : black;
            }
            &:focus {
                color : $color-blue !important;
            }
        }
    }
}
a.nav-link {
    display : block;
}
.docs-nav a.nav-link {
    display  : block;
    position : relative !important;
    padding  : 0px 50px 15px 15px;
    color    : $color-cool-grey-10;
}
.nav-item.section-title a.nav-link {
    font-weight : 700 !important;
    position    : relative !important;
    color       : $color-blue;
}
.nav-item.section-title a.nav-link:hover {
    display     : block;
    font-weight : 900 !important;
    position    : relative !important;
    color       : $color-cool-grey-11 !important;
}
.nav-item.section-title a.nav-link.active,
.nav-item.section-title a.nav-link:focus,
.nav-item.section-title a.nav-link:active {
    display     : block;
    font-weight : 900 !important;
    position    : relative !important;
    color       : $color-blue !important;
}

.user-name {
    color       : $color-cool-grey-13;
    font-weight : 900;
}
.user-title {
    color : $color-cool-grey-11;
}
.file-ext {
    color       : $color-cool-grey-7;
    font-weight : 200 !important;
}
td h1, td h2, td h3, td h4, td h5 {
    margin-top : 0px !important;
}
.table th, .table td {
    padding        : 0.75rem;
    vertical-align : top;
    border-top     : none !important;
    border-bottom  : none !important;
    text-align     : left !important;
}
table {
    text-align          : left !important;
    border-collapse     : collapse !important;
    border              : none !important;
    border-style        : none !important;
    border-radius       : 8px !important;
    //-moz-border-radius:8px !important;
    //-webkit-border-radius:8px !important;
    //border-radius:8px !important;

    border              : none !important;
    border-top-color    : transparent !important;
    border-top-style    : none !important;
    border-top-width    : 0 !important;
    border-right-color  : transparent !important;
    border-right-style  : none !important;
    border-right-width  : 0 !important;
    border-bottom-color : none !important;
    border-bottom-style : none !important;
    border-bottom-width : 0 !important;
    border-left-color   : none !important;
    border-left-style   : none !important;
    border-left-width   : 0 !important;
    border-image-source : none !important;
    border-image-slice  : none !important;
    border-image-width  : 0 !important;
    border-image-outset : 0 !important;
    border-image-repeat : none !important;

    th, td {
        text-align    : left !important;
        border-top    : none !important;
        border-bottom : none !important;
    }
    tr:last-child td:first-child {
        border-bottom-left-radius : 8px !important;
    }
    tr:last-child td:last-child {
        border-bottom-right-radius : 8px !important;
    }
    @include trans();
    @include blue-shadow(30px, 0.1);
    &:hover {
        @include blue-shadow(60px, 0.3);
    }
    margin-top          : 75px;
    margin-bottom       : 75px !important;
    &.software, &.file-types {
        text-align            : left !important;
        border-collapse       : collapse !important;
        border-right          : 8px !important;
        -moz-border-radius    : 8px !important;
        -webkit-border-radius : 8px !important;
        border-radius         : 8px !important;
        tr:last-child td:first-child {
            border-bottom-left-radius : 8px !important;
        }
        tr:last-child td:last-child {
            border-bottom-right-radius : 8px !important;
        }
        > thead {
            color            : #FFFFFF !important;
            background-color : $color-xfinity-pumkin !important;
        }
    }
    tr {
        > td {
            text-align  : left !important;
            padding-top : 15px;
            margin-top  : 1px;
        }
    }
    &.file-types {
        tr {
            > td {
                padding-top : 30px !important;
            }
        }
    }

}
.no-shadow,
.no-shadow:hover {
    -webkit-box-shadow : none;
    -moz-box-shadow    : none;
    box-shadow         : none;
}
.shadow {
    -webkit-box-shadow : 0px 10px 20px rgba(0, 0, 0, 0.2);
    -moz-box-shadow    : 0px 10px 20px rgba(0, 0, 0, 0.2);
    box-shadow         : 0px 10px 20px rgba(0, 0, 0, 0.2);
}
img.diagram {
    display   : block !important;
    width     : 100%;
    max-width : 1000px;
    margin    : 80px auto 0px auto !important;
}
.graphic-caption {
    color      : $color-blue;
    text-align : left;
    font-size  : 11px;
    margin     : 5px 0 60px 0;
}
img.graphic-diagram {
    display   : block !important;
    width     : 100%;
    max-width : 1024px;
    margin    : 80px auto 0px auto !important;
}
img.caption-inspector-logo {
    display   : block !important;
    width     : 100%;
    max-width : 1024px;
    margin    : 80px auto;
}
.callout-block {
    @include trans();
    @include blue-shadow(60px, 0.3);

    color             : white !important;
    border-radius     : 8px !important;
    border-left-width : 60px !important;
    padding           : 0px 25% 0px 0px !important;
    margin            : 35px 0px 55px 0px !important;
    position          : relative !important;
    span.callout-icon-holder {
        position  : absolute !important;
        top       : 25px;
        left      : -45px;
        font-size : 30px !important;
    }
    &.callout-block-info, &.callout-block-warning, &.callout-block-error {color : white !important;}
    &.callout-block-warning {
        border-color : darken($color-xfinity-pumkin, 15%) !important;
        background   : $color-xfinity-pumkin !important;
    }
    > .content {
        color   : white !important;
        padding : 20px 20px 20px 30px !important;
        margin  : 0px !important;
        a, li {
            color : white !important;
            clear : left !important;
        }
        > p {
            color       : white !important;
            margin      : 5px 0 15px 0 !important;
            font-size   : 17px;
            line-height : 26px;
            text-align  : justify;
        }
        > h4.callout-title {
            display     : block;
            display     : block;
            padding     : 0px !important;
            margin      : 0 0 10px 0 !important;
            font-weight : 900 !important;
            font-size   : 2rem !important;
            line-height : 3rem;
            color       : white !important;
        }
    }
}
.docs-overview .card-icon-holder {
    border-radius : 0 0 30px 30px !important;
    margin-bottom : 24px !important;
}
.card {
    .card-icon-holder {
        border-radius : 0 0 30px 30px !important;
        margin-bottom : 24px !important;
    }
}
.info-cards {
    border-radius : 8px;
    > h3 {
        font-size     : x-large;
        text-align    : center !important;
        font-weight   : 900 !important;
        margin-bottom : 65px !important;
        clear         : both !important;
        color         : $color-xfinity-pumkin;
    }
    > p {
        text-align     : center !important;
        font-weight    : 200 !important;
        margin-top     : -45px !important;
        margin-bottom  : 65px !important;
        letter-spacing : 0.5px;
        color          : $color-cool-grey-9;
        clear          : both !important;
    }
    max-width     : 750px;
    margin        : 60px auto !important;
    clear         : both !important;
    text-align    : center;
}
.info-card {
    text-align          : center !important;
    p {
        text-align : center !important;
    }
    float               : left;
    margin              : 10px;
    -webkit-perspective : 700px;
    .card-image {
        width  : 100%;
        height : 100%;
    }
    .btn-set {
        border-top       : 1px solid $color-cool-grey-3;
        background-color : $color-cool-grey-2;
        list-style       : none;
        padding          : 10% 0px 0px 0px;
        margin-top       : 25px;
        text-align       : center;
        position         : absolute;
        left             : 0px;
        bottom           : 0px;
        right            : 0px;
        height           : 30%;
        a {
            position      : relative;
            display       : inline-block;
            min-width     : 40px;
            padding       : 5px 15px;
            margin        : 0px 5px;
            overflow      : hidden;
            text-align    : center;
            /*background-color: rgb(215, 215, 215);*/
            border-radius : 40px;
        }
        .btn {
            border : none;
            &.btn-get-started {
                color            : white;
                background-color : $color-xfinity-blue-1;
                &:hover {
                    color            : white;
                    background-color : darken($color-xfinity-blue-1, 15%);
                }
            }
            &.btn-learn-more {
                color            : white;
                background-color : $color-xfinity-minty;
                &:hover {
                    color            : white;
                    background-color : darken($color-xfinity-minty, 15%);
                }
            }
        }
    }
    .card-icon-holder {
        border-radius : 0 0 30px 30px !important;
        margin-bottom : 24px !important;
    }
    .front, .back {
        border                      : none !important;
        background                  : #FFFFFF;
        border-radius               : 12px;
        transition                  : -webkit-transform 1s;
        -webkit-transform-style     : preserve-3d;
        -webkit-backface-visibility : hidden;
        @include blue-shadow(20px, 0.25);
        a {
            &.icon {
                text-decoration : none !important;
                box-shadow      : 0px 0px 1px #333333;
                box-shadow      : 0px 0px 1px rgba(51, 51, 51, 0.7);
                &:hover {
                    color : #FFFFFF !important;
                }
            }
        }
        &:hover {
            @include blue-shadow(80px, 0.5);
        }
    }
    .front {
        text-align  : center;
        background  : rgb(53, 76, 130);
        background  : linear-gradient(0deg, rgba(53, 76, 130, 1) 0%, rgba(85, 121, 210, 1) 33%, rgba(150, 161, 255, 1) 100%);
        color       : #FFFFFF;
        overflow    : hidden;
        width       : 350px;
        height      : 350px;
        position    : absolute;
        z-index     : 1;

        padding-top : 100px;
        color       : white !important;
        h3 {
            font-width : 900 !important;
            color      : white !important;
        }

    }
    .back {
        text-align        : center;
        padding           : 20px;
        //padding-top       : 0px;
        width             : 350px;
        height            : 350px;
        -webkit-transform : rotateY(-180deg);
        overflow          : scroll;
        box-shadow        : 0px 5px 15px rgba(100, 100, 100, 0.35);
    }
    &:hover {
        .back {
            -webkit-transform : rotateY(0);
        }
        .front {
            -webkit-transform : rotateY(180deg);
        }
    }
}

pre {
    margin        : 40px 0 !important;
    border        : 4px solid $color-cool-grey-4;
    padding       : 20px;
    border-radius : 8px !important;
    @include trans();
    @include blue-shadow(30px, 0.1);
    &:hover {
        border : 4px solid $color-blue;
        @include blue-shadow(80px, 0.45);
    }
}
code {
    padding          : 2px 4px;
    color            : $color-xfinity-haute;
    background-color : #F9F2F4;
    border-radius    : 4px;
    kbd {
        padding          : 2px 4px;
        color            : $color-cool-grey-12;
        background-color : $color-cool-grey-1;
        border-radius    : 3px;
        box-shadow       : inset 0 -1px 0 rgba(0, 0, 0, 0.25);
        kbd {
            padding    : 0;
            font-size  : 100%;
            box-shadow : none;
        }
    }
}
code,
kbd {
    padding : 2px 4px;
}
kbd {
    color            : $color-xfinity-pumkin;
    background-color : $color-cool-grey-1;
    border-radius    : 3px;
    box-shadow       : inset 0 -1px 0 rgba(0, 0, 0, 0.25);
}
kbd kbd {
    padding    : 0;
    font-size  : 100%;
    box-shadow : none;
}
pre {
    display       : block;
    margin        : 0 0 10px;
    word-break    : break-all;
    word-wrap     : break-word;
    border-radius : 4px;
}
pre code {
    padding       : 15px !important;
    font-size     : inherit;
    color         : inherit;
    white-space   : pre-wrap;
    border-radius : 0;
}
.pre-scrollable {
    max-height : 450px;
    overflow-y : scroll;
}
.center-block {
    display      : block;
    margin-left  : auto;
    margin-right : auto;
}
.pull-right {
    float : right !important;
}
.pull-left {
    float : left !important;
}
.hide {
    display : none !important;
}
.show {
    display : block !important;
}
.invisible {
    visibility : hidden;
}
.text-hide {
    font             : 0/0 a;
    color            : transparent;
    text-shadow      : none;
    background-color : transparent;
    border           : 0;
}
.hidden {
    display    : none !important;
    visibility : hidden !important;
}

.affix {
    position          : fixed;
    -webkit-transform : translate3d(0, 0, 0);
    transform         : translate3d(0, 0, 0);
}
.hljs {
    display                  : block;
    overflow-x               : auto;
    padding                  : 0.5em;
    background               : #002B36;
    color                    : #839496;
    -webkit-text-size-adjust : none;
}
.hljs-comment,
.hljs-template_comment,
.diff .hljs-header,
.hljs-doctype,
.hljs-pi,
.lisp .hljs-string,
.hljs-javadoc {
    color : #586E75;
}
.hljs-keyword,
.hljs-winutils,
.method,
.hljs-addition,
.css .hljs-tag,
.hljs-request,
.hljs-status,
.nginx .hljs-title {
    color : #859900;
}
.hljs-number,
.hljs-command,
.hljs-string,
.hljs-tag .hljs-value,
.hljs-rules .hljs-value,
.hljs-phpdoc,
.hljs-dartdoc,
.tex .hljs-formula,
.hljs-regexp,
.hljs-hexcolor,
.hljs-link_url {
    color : #2AA198;
}
.hljs-title,
.hljs-localvars,
.hljs-chunk,
.hljs-decorator,
.hljs-built_in,
.hljs-identifier,
.vhdl .hljs-literal,
.hljs-id,
.css .hljs-function {
    color : #268BD2;
}
.hljs-attribute,
.hljs-variable,
.lisp .hljs-body,
.smalltalk .hljs-number,
.hljs-constant,
.hljs-class .hljs-title,
.hljs-parent,
.hljs-type,
.hljs-link_reference {
    color : #B58900;
}
.hljs-preprocessor,
.hljs-preprocessor .hljs-keyword,
.hljs-pragma,
.hljs-shebang,
.hljs-symbol,
.hljs-symbol .hljs-string,
.diff .hljs-change,
.hljs-special,
.hljs-attr_selector,
.hljs-subst,
.hljs-cdata,
.css .hljs-pseudo,
.hljs-header {
    color : #CB4B16;
}
.hljs-deletion,
.hljs-important {
    color : #DC322F;
}
.hljs-link_label {
    color : #6C71C4;
}
.tex .hljs-formula {
    background : #073642;
}
/* http://prismjs.com/download.html?themes=prism-okaidia&languages=markup+css+clike+javascript+ruby+git+haml+handlebars+http+php+python+sass+scss+vim+yaml&plugins=line-numbers */
/**
 * okaidia theme for JavaScript, CSS and HTML
 * Loosely based on Monokai textmate theme by http://www.monokai.nl/
 * @author ocodia
 */
code[class*="language-"],
pre[class*="language-"] {
    color           : #F8F8F2;
    text-shadow     : 0 1px rgba(0, 0, 0, 0.3);
    font-family     : Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    direction       : ltr;
    text-align      : left;
    white-space     : pre;
    word-spacing    : normal;
    word-break      : normal;
    word-wrap       : normal;
    line-height     : 1.5;
    -moz-tab-size   : 4;
    -o-tab-size     : 4;
    tab-size        : 4;
    -webkit-hyphens : none;
    -moz-hyphens    : none;
    -ms-hyphens     : none;
    hyphens         : none;
}
/* Code blocks */
pre[class*="language-"] {
    padding       : 1em;
    margin        : .5em 0;
    overflow      : auto;
    border-radius : 0.3em;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
    background : #272822;
}
/* Inline code */
:not(pre) > code[class*="language-"] {
    padding       : .1em;
    border-radius : .3em;
    white-space   : normal;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
    color : slategray;
}
.token.punctuation {
    color : #F8F8F2;
}
.namespace {
    opacity : .7;
}
.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
    color : #F92672;
}
.token.boolean,
.token.number {
    color : #AE81FF;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
    color : #A6E22E;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
    color : #F8F8F2;
}
.token.atrule,
.token.attr-value,
.token.function {
    color : #E6DB74;
}
.token.keyword {
    color : #66D9EF;
}
.token.regex,
.token.important {
    color : #FD971F;
}
.token.important,
.token.bold {
    font-weight : bold;
}
.token.italic {
    font-style : italic;
}
.token.entity {
    cursor : help;
}
pre.line-numbers {
    position      : relative;
    padding-left  : 3.8em;
    counter-reset : linenumber;
}
pre.line-numbers > code {
    position : relative;
}
.line-numbers .line-numbers-rows {
    position            : absolute;
    pointer-events      : none;
    top                 : 0;
    font-size           : 100%;
    left                : -3.8em;
    width               : 3em; /* works for line-numbers below 1000 lines */
    letter-spacing      : -1px;
    border-right        : 1px solid #999999;
    -webkit-user-select : none;
    -moz-user-select    : none;
    -ms-user-select     : none;
    user-select         : none;
}
.line-numbers-rows > span {
    pointer-events    : none;
    display           : block;
    counter-increment : linenumber;
}
.line-numbers-rows > span:before {
    content       : counter(linenumber);
    color         : #999999;
    display       : block;
    padding-right : 0.8em;
    text-align    : right;
}
