@font-face {
    font-family: "Exo";
    src: url("../fonts/Exo-VariableFont_wght.ttf");
}

@font-face {
    font-family: "Abel";
    src: url("../fonts/Abel-Regular.ttf");
}

@font-face {
    font-family: "MontserratAlternates";
    src: url("../fonts/MontserratAlternates-Regular.ttf");
}

/* Responsiveness */
@media (max-width: 922px) {
    .flex-container {
      flex-direction: column !important;
    }
    .flex-item {
        width: 45%;
    }
    .flex-top {
        margin-bottom: 12px;
    }
    .DMAIC-left {
        width:         60%;
        margin-bottom: 32px;
    }
    .DMAIC-right {
        width: 80%;
        padding-right: 0%;
        text-align: center;
    }
    .gallery-legend {
        width: 40% !important;
        min-width: 40% !important;
    }
}

/* Mobile Top Bar*/
.wy-nav-top a {
    font-family: MontserratAlternates !important;
}


.wy-body-for-nav {
    background-image: linear-gradient(to bottom, #111, #595959);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* --- Note that the Sphinx theme is using .bttn class --- */
/* --- Start: Nav bar --- */
.wy-side-nav-search {
    background: #122536;
}

.wy-side-nav-search input[type=text] {
    width:          80%;
    border-color:   #40566b;
    border-width:   2px;
}

.wy-nav-top {
    background: #252523;
    font-family: Exo;
    padding-left: 25px;
    letter-spacing: 0.02em;
}

.wy-nav-content {
    background: #f2f2f2;
}

/* 
width auto was rendering 0px wide for .svg files
https://stackoverflow.com/questions/59215996/how-to-add-a-logo-to-my-readthedocs-logo-rendering-at-0px-wide
*/
.wy-side-nav-search .wy-dropdown > a img.logo, .wy-side-nav-search > a img.logo {
    width: 100px;
}

/* Remember, this runs underneath the top logo section so it's extra dark to compensate for that distance.  */
.wy-nav-side {
    background-image: linear-gradient(#0a1520, #24435f);
}

/* margin is for the advert on free version of RTD*/
.wy-menu-vertical {
    padding-left:   8px;
    margin-bottom:  150px;
}

/* sidebar captions aka sections*/
.wy-menu > .caption > span.caption-text {
    color:      #ffda67;
    font-size:  11.5px;
}

/* --- End: Nav bar --- */

/* --- Start: Main page --- */
.headerz-light {
    font-family:    'MontserratAlternates'; 
    color:          #333;
    letter-spacing: .01rem;
    font-weight:    400;
    font-size:      19px;
    margin-right:   25%;
    margin-left:    25%;
    line-height:    175%;
}

.headerz-dark {
    font-family:    'MontserratAlternates'; 
    color:          #efefef;
    letter-spacing: .03rem;
    font-weight:    200;
    font-size:      19.5px;
    margin-right:   25%;
    margin-left:    25%;
}

.titlez {
    font-size:      17px !important;
    margin-left:    14%;
    margin-right:   14%;
}

.goldz-light {
    color:          #a48c0b;
}

.goldz-highlight {
    color:          #937f10;
    font-size:      105%;
}

.goldz-dark {
    color:          #43eac5;
}

.textz {
    font-family:    Abel;
}

.linx-light:link {
    color:          #333;
}

.linx-light:visited {
    color:          #333;
}

.intro {
    font-size:  14px;
}

p.intro {
    text-align: center;
}

.intro.bigP {
    line-height:   20px;
    margin-bottom: 20px;
}

ol.intro {
    padding-left: 45px;
}

ol.intro li {
    width:           99%;
    padding:         18px 22px 18px 22px;
    margin-bottom:   25px;
    list-style-type: None;
}

ol.intro li span {
    color: #6c6c6c;
}

.linx:link {
    color:          #ddcd75;
}

.linx:visited {
    color:          #ddcd75;
}

.shadowBox {
    border-radius:      18px;
    background:       white;
    border:             1px solid lightgray;
    box-shadow:         3px 3px lightgray;
    -moz-box-shadow:    3px 3px lightgray;
    -webkit-box-shadow: 3px 3px lightgray;
    -o-box-shadow:      3px 3px lightgray;
}

.shadowBox:hover {
    border:             1px solid #adadad;
    border-radius:      25px;
    box-shadow:         3px 3px #adadad;
    -moz-box-shadow:    3px 3px #adadad;
    -webkit-box-shadow: 3px 3px #adadad;
    -o-box-shadow:      3px 3px #adadad;
}

/* list of features */
ul.featureLists {
    padding-bottom: 50px;
    padding-left: 45px;
}

ul.featureLists.spaced {
    padding-top: 35px;
}

ul.featureLists li {
    list-style-type:     square;
    list-style-position: outside;
    font-size:           14.5px;
    margin-bottom:       12px; 
}

ul.featureLists li span {
    position: relative;
    left:     12px;
}

/* the '.simple' points to body lists, and avoids the sidebar lists */
ul.simple li ul li {
    padding-bottom: 10px;
    padding-top:    10px;
}

img {
    border-radius: 15px;
}

iframe {
    border-radius: 15px;
}

#aiqc h1, #competition h1, #examples h1, #consulting h1 {
    display: none !important;
}

h1, h2, h3, h5 {
    font-family: Abel !important;
    color:#122536;
}

/* hides the breadcrumbs on main page */
.rst-content > div:first-of-type {
    display: none !important;
}

.rst-content > footer:first-of-type {
    display: none !important;
}

/* 
    This makes markdown tables wrap instead of overflow
    however, it 
 */
.wy-table-responsive table td,
.wy-table-responsive table th {
  white-space: normal !important;
}
/* 
    override equal widths of markdown tables 
    https://stackoverflow.com/a/72577950/5739514
*/
.docutils.align-default colgroup col {
    width: auto !important;
}

/* changes code cell color */
.rst-content code.literal, .rst-content tt.literal {
    color: #1a795f;
    white-space: normal;
}

.rst-content blockquote {
    color:                     #717171;
    border-left:               6px lightgray solid;
    padding-left:              15px;
    border-top-left-radius:    5px;
    border-bottom-left-radius: 6px;
    margin:                    30px 0px 30px 45px;
}

/* raw cells */
.rst-content div[class^="highlight"], .rst-content pre.literal-block {
    border-radius:10px;
    margin: 30px 0px 30px 45px;
}

/* code cells */
div.nbinput.container div.input_area {
    border-radius:10px !important;
}
.nbinput.docutils.container {
    /* can't get margin-right to do anything*/
    margin: 30px 100px 30px 10px;
}
.nboutput.nblast.docutils.container {
    /* can't get margin-right to do anything*/
    margin: 30px 100px 30px 10px;
}

hr.docutils {
    margin: 60px 10px;
}

div.wy-table-responsive {
    margin: 30px 0px 30px 45px;
}

.banner-photo {
    margin-bottom: 30px;
}


/* ^ shadowBox class also applies to these items */
.flex-container {
    display: flex;
    flex-direction: row;
    /*centers the responsive column version*/
    align-items: center;
    justify-content: center;
}

.flex-item {
    flex: 22%;
    margin: 26px;
}

.flex-top {
    margin-top: 26px;
    height:     92px;
}

.flex-image {
    display:       block;
    margin-left:   auto;
    margin-right:  auto;
    width:         75%;
    border-radius: 0px !important;
}

.flex-bottom {
    text-align:    center;
    font-family:   arial;
    color:         rgb(64, 152, 206);
    font-size:     15px;
    margin-bottom: 33px;
}

.flex-bottom a {
    color: inherit;
}

.flex-bottom a span {
    text-decoration: underline;
}

.gallery-item {
    display: flex;
    min-height: 113px;
}

.flex-left {
    float: left;
    display: flex;
    width: 20%;
    min-width: 20%;
    min-height: 100%;
    margin-right: 9%;
    border-radius: inherit;
}

.flex-right {
    float: right;
    width: 100%;
    padding-right: 9px;
}

.gallery-img {
    object-fit: cover;
    border-radius: inherit;
    border-bottom-right-radius: 0px !important;
    border-top-right-radius: 0px !important;
    margin-left: 0px;
}

.flex-title {
    font-family: Exo;
    font-size: 17px;
    margin: 15px 0px 7px 0px;
}

.flex-tags {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 15px;
    font-family: Abel;
}

.flex-tag {
    display: flex;
    margin: 5px 5px 0px 0px;
    padding: 1px 7px 2px 7px;
    font-size: 14px;
    border-radius: 25px;
}

.flex-tag a {
    color: inherit;
    text-decoration: underline;
}

.tag-tool {
    background:#bae8b380;
    color:#153c0f;
}

.tag-analysis {
    background:#d4e9fb90;
    color:#041626;
}

.tag-data {
    background:#ffedb895;
    color:#181302;
}

/* see @media for Responsiveness */
.gallery-legend {
    width: 68%;
    min-width: 464px;
    flex-wrap: wrap;
    background: #ffffff96;
    border: 2px #e6e6e6 solid;
    border-radius: 20px;
    margin: 40px 0px 20px 0px;
    font-size: 17px;
    color: #222;
}

.legend-item {
    display: flex;
}

.legend-left {
    width: 33%;
}

.legend-right {
    width: 66%;
    margin-left: 8px;
    font-family: Abel;
    color: #222;
}

.legend-dot {
    height: 15px;
    width: 15px;
    border-radius: 4px;
    float: right;
    margin-top: 3px;
}

.dot-tool {
    background:#bae8b3;
}

.dot-analysis {
    background:#c1d9ee;
}

.dot-data {
    background:#f9e3a2;
}

/* MEGA BUTTON */
.bttn {
    position:           relative;
    vertical-align:     middle;
    color:            black;
    font-family:        Lato,proxima-nova,Helvetica Neue,Arial,sans-serif;
    font-size:          16.5px;
    display:            inline-block;
    height:             65px;
    text-align:         center;
    transition:         0.8s;
    padding:            20px 20px 24px 20px;
    cursor:             pointer;
    border:             2px solid rgb(24, 24, 24);
    border-radius:      10px;
    -webkit-transition: 0.8s;
}

.bttn:hover {
    border:         5px solid silver;
    border-radius:  15px;
    padding-bottom: 10px;
    background:     #24435f;
}

.bttn:hover span, .bttn:hover b {
    color: #ffda67;
}

.bttn::before, .bttn::after {
    width:              100%;
    height:             100%;
    z-index:            0;
    content:            '';
    position:           absolute;
    top:                0;
    left:               0;
    box-sizing:         border-box;
    -webkit-transform: scale(0);
    transition:        0.8s;
}

.bttn::before {
    -webkit-transform-origin: 100% 0%;
}

.bttn::after {
    -webkit-transform-origin: 0% 100%;
}

.bttn:hover::after, .bttn:hover::before {
    border-radius:     10px;
    border:            2px solid whitesmoke;
    -webkit-transform: scale(1);
}
/* --- End: Main page --- */


/* --- Start: compatibility table index page --- */
.compatibility {
    font-family:   Abel;
    font-size:     18px;
    width:         90%; 
    table-layout:  fixed;
    text-align:    center;
    margin-left:   auto;
    margin-right:  auto;
}

.compatibility td {
    vertical-align:  middle;
    border:          2.5px solid #ffffff;
    background:      #efefef;
    height:          80px;
    font-size:       85%;
    border-collapse: separate; 
}

.compatibility td:hover {
    -moz-box-shadow:    inset 0 0 5px #8a8a8a;
    -webkit-box-shadow: inset 0 0 5px #8a8a8a;
    box-shadow:         inset 0 0 5px #8a8a8a;
 }

.compatibility td small {
    color: #a4a4a4;
}

.done {
    background: #bcf5bc !important;
    color:      #000;
}

.done:hover {
    background: radial-gradient(#d9ffd9, #adeaad) !important;
}

.medium {
    background: #fff2ccff !important;
    color:      #000;
}

.medium:hover {
    background: radial-gradient(rgb(255, 248, 232), rgb(255, 235, 176)) !important;
}

.manual {
    background: #ffdada !important;
    color:      #000;
}

.manual:hover {
    background: radial-gradient(#f7e1e3, #ffcfcf) !important;
}

.last {
    visibility: hidden;
}

#empty-cell {
    background: white !important;
}
#empty-cell:hover {
    box-shadow:         0px 0px #fff;
    -moz-box-shadow:    0px 0px #fff;
    -webkit-box-shadow: 0px 0px #fff;
    -o-box-shadow:      0px 0px #fff;
}

.top-left {
    border-top-left-radius: 22px;
}

.tbl-head {
    background: #042440 !important;
    color:      white;
    font-size:  105% !important;
}

.row-head {
    background: #042440 !important;
    color:      white;
    font-size:  88% !important;
}

.bottom-left {
    border-bottom-left-radius:  22px;
}

.top-right {
    border-top-right-radius:    22px;
}

.bottom-right {
    border-bottom-right-radius: 22px;
}

.qc td{
    height: 80px;
    padding: 8px;
}

.alt-gray {
    background: #F2F2F2;
}

.alt-darkerGray {
    background: #E6E6E6 !important;
}

.checkmark {
    font-size:       150%;
    color:           #393939;
}

a .checkmark {
    text-decoration: underline;
}

.compare-bullets {
    font-size:      85%; 
    margin-left:    8% !important; 
    margin-right:   8%; 
    list-style:     square !important;
    color:          #6c6c6c;
}

.extra-bullets {
    font-size:      90%;
    list-style:     circle; 
    margin-bottom:  12px;
}
/* --- End: compatibility table index page --- */


/* --- Start: Explainer page --- */
p.explain {
    font-size:  16px;
    text-align: center;
    font-family: Abel;
}

.figCaption {
    /*border-left:  4px solid lightgray;*/
    padding-left: 15px;
    font-family:  Abel;
}
/* --- End: Explainer page --- */  

/* --- Start: Services page --- */
#consulting h1 {
    text-align: center;
}

.consultation {
    margin-left: 5%;
    margin-right: 5%;
}

.quickLinks {
    font-family:     Abel;
    color:         rgb(0, 7, 12);
    display:         flex;
    width:           87%;
    margin:          30px auto 35px auto;/*center*/
}

.quickLinks div {
    flex:             auto;
    margin:           18px 8px 18px 8px;
    padding:          8px;
    border-radius:    30px;
    text-align:       center;
    background-image: linear-gradient(to bottom right, #c6ebf7, #fcfcfc);
    font-size:        14px;
    border-collapse:  collapse; 
}

.quickLinks div:hover {
    background-image: linear-gradient(to bottom right, #d7eff7, #fcfcfc);
}

.quickLinks div a {
    color:            inherit;
}

.quickLinks div a:hover {
    text-decoration:  underline;
}

/* See Responsiveness section above*/
.DMAIC-left {
    flex: 50%;
}

.DMAIC-right {
    flex: 50%;
    padding-right: 5%;
}

.DMAIC-img {
    width:         60%;
    display:       block;
    margin-left:   auto;
    margin-right:  auto;
}

.svcBox {
    padding:            16px 20px 16px 20px;
    border:             1px solid #b6cfde;
    border-radius:      12px;
    margin-bottom:      25px;
    margin-left:        8%;

    box-shadow:         4px 4px #b6cfde;
    -moz-box-shadow:    4px 4px #b6cfde;
    -webkit-box-shadow: 4px 4px #b6cfde;
    -o-box-shadow:      4px 4px #b6cfde;
}

.svcBox:hover {
    border:             1px solid #7d98a8;
    border-radius:      9px;
    box-shadow:         4px 4px #7d98a8;
    -moz-box-shadow:    4px 4px #7d98a8;
    -webkit-box-shadow: 4px 4px #7d98a8;
    -o-box-shadow:      4px 4px #7d98a8;
}

.svcHeader {
    font-weight:   bold;
    margin-bottom: 6px;
    font-size:     15.5px;
    font-family:   Abel;
}
    
.svcDescribe {
    font-size:     14px;
    margin-left:   20px;
}
/* --- End: Services page --- */

/* --- Start: Slideshow --- */
.slider {
    width: 58%;
    max-width: 800px;
    height: 350px;
    position: relative;
    overflow: hidden; /* <===  */
    border-radius: 15px;
}

.slide {
    width: 100%;
    max-width: 800px;
    height: 350px;
    position: absolute;
    transition: all 0.5s;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.btn {
    color:black;
    position: absolute;
    width: 32px;
    height: 32px;
    padding: 6px;
    border: none;
    border-radius: 50%;
    z-index: 10px;
    cursor: pointer;
    background-color: #ffffff65;
    font-size: 16px;
}

.btn:active {
    transform: scale(1.1);
}

.btn:hover {
    background-color: #30d0b370;
    color: white;
}

.btn-prev {
    top: 45%;
    left: 2%;
}

.btn-next {
    top: 45%;
    right: 2%;
}
/* --- End: Slideshow --- */

.tbl-header-link {
    color:white;
    text-decoration: underline;
}
