:root {
    --black: #000000;
    --white: #ffffff;
    --grey-medium: #e1e4e5;
    --light-grey: #f9f9f9;
    --dark-blue-navbar: #21202b;
    --links: #547aea;

    /* Dataiku core colors */
    --dark-teal: #00837c;
    --teal-official: #00b2a9;
    --aquamarine: #b8e7e5;
    --clear-day: #e6f4f4;
    --dark-blue: #221c35;
    --pearl: #f0f3f6;
    --nimbus: #f6f6f6;

    /* Dataiku secondary colors */
    --gold: #fccd20;
    --dandelion: #fce9a5;
    --cosmic-latte: #fcf5de;
    --trinidad: #f35b05;
    --apricot: #fcd1b9;
    --linen: #feefe6;
    --lavender: #a47bc7;
    --prelude: #dfd1eb;
    --dusk: #f0ebf5;
    --ultramarine: #4578fc;
    --cornflower: #becaf9;
    --mist: #e1e6fa;
    --lighter-magenta: #f6dae2;
    --maya-blue: #7dbeea;
    --sky: #c4e4fa;
    --bubble: #ebf4fa;
    --jade: #00b257;
    --mint: #b8e7ba;
    --panache: #e6f4e7;
}


/* -------------------- New navigation bar ----------------------- */

/* For a global perspective, the page is only a column */
.page {
    display: flex;
    flex-direction: column;
}

.page .toc-drawer {
    z-index: 20;
}
.headnav {
    -ms-transition: border 200ms ease-out;
    -moz-transition: border 200ms ease-out;
    -webkit-transition: border 200ms ease-out;
    transition: border 200ms ease-out;
    font: normal 16px/1 'Source Sans Pro', sans-serif; 
    background-color: var(--dark-blue-navbar);
    height: 115px;
    z-index: 10000;
}
/*
    .header is not mandatory, just in case if we want to add something above or beyond the bar itself
    the .header is display in row with only two children (the logo, and the navbar)
 */
.headnav .header {
    display: flex;
    flex-direction: row;
    height: 100%;
    align-items: center;
    justify-content: space-between;

}

/*
    How to display the logo
 */
.headnav .header .logo {
    z-index: 10;
    height: 115px;
}

.headnav .header .logo .logo-link {
    height: 51px;
    display: inline-block;
    margin: 32px 0 32px 32px;
    padding-right: 1em;
    border-right: 1px solid #ccc;
}

.headnav .header .logo img{
    border: medium none #000;
    height: 51px;
}

/*
    How to display the navbar.
    The navbar is also a container with all items in it (academy, community, ...)
    They should be displayed in row
 */
.headnav .navbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    list-style-type: none;
    margin:0 2em 0 0;
}

/*
    Let's focus on the first items (those with title)
 */
.headnav .navbar .navbar-item {
    height: inherit;
    font-size: 16px;
}

.headnav .navbar li.navbar-item-content {
    display: none;
}

.headnav .navbar li.navbar-item > a {
    margin: 0 22px;
    text-decoration: none;
    color: #fff;
    display: flex;
    height: inherit;
    align-items: center;
}

.headnav .navbar li.navbar-item:hover {
    background-color: var(--white);
}

.headnav .navbar li.navbar-item:hover a {
    color: var(--black);
}
/* This is for adding the "down" sign next to the item*/
.headnav .navbar li.navbar-item > a:after {
    content: "";
    display: inline-block;
    vertical-align: baseline;
    width: 8px;
    height: 8px;
    border-width: 0 2px 2px 0;
    border-style: solid;
    border-color: var(--white);
    transform: rotate(45deg);
    margin: 0 0 3px 10px;
}

.headnav .navbar li.navbar-item:hover > a:after {
    border-color: var(--black);
}

.headnav .navbar .navbar-item-content {
    background: var(--white);
    display: none;
    list-style: none;
    padding-inline-start: inherit;
    position: absolute;
    margin: 0;
    padding: 10px 22px;
    box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.15);
}

.headnav .navbar .navbar-item-content .title {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.8em;
    padding-top: 22px;
}

.headnav .navbar .navbar-item-content .subtitle {
    font-size: 14px;
    font-weight: normal;
    text-wrap: nowrap;
}

.headnav .navbar .navbar-item-content li a:hover {
    color: var(--dark-teal);
}

.headnav .navbar .navbar-item-content div.columns ul.new-column li {
    padding-bottom: 6px;
    padding-top: 6px;
    line-height: 24px;
}

.navbar-item-content .columns {
    display: flex;
    flex-direction: row;
}

.navbar-item-content .columns ul {
    list-style-type: none;
    padding: 0 22px 0 0;
}

.navbar-item-content .columns ul:last-child {
    list-style-type: none;
    padding: 0;
}

.headnav .navbar .navbar-item-content li a {
    color: var(--dark-blue);
    text-decoration: none;
}

.headnav .navbar li.navbar-item:hover .navbar-item-content {
    display: flex;
    flex-direction: column;
    padding-top: 0;
}
.headnav .navbar .navbar-item-content .new-header-sub-nav-internal {
    display:flex;
    flex-direction: row;
}

.column-item-highlight  img {
    height: 141px;
}

.column-item-highlight  a {
    display: flex;
    flex-direction: row;
    text-decoration: none;
}

a#highlight_link > div > p {
    color: var(--black);
    text-decoration: none;
}

a#highlight_link > div > p:hover {
    color: var(--dark-teal);
}

a#highlight_link > div > p:first-child {
    font-size: 15px;
    font-weight: 400;
}

a#highlight_link > div > p:last-child {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.8em;
    padding-left: 30px;
    transition: color .3s;
}

a#highlight_link > div > p:last-child::before {
    content: "";
    position: absolute;
    left: 200px;
    top: 89%;
    width: 8px;
    height: 8px;
    border-width: 2px 2px 0 0;
    border-style: solid;
    border-color: inherit;
    transform: rotate(45deg);
    transition: all 0.3s;
}

a#highlight_link > div > p:last-child::after {
    content: "";
    position: absolute;
    bottom: 10%;
    left: 190px;
    width: 15px;
    border-width: 0 0 2px 2px;
    border-style: solid;
    border-color: inherit;
    height: 10px;
    margin-bottom: -2px;
    transition: all 0.3s;
}

.column-item-highlight p {
    width: 444px;
    margin-left: 22px;
    line-height: 1.8em;
    color: var(--color-foreground-primary);
}

@media (max-width: 1023px) {
    ul.custom-sub-nav {
        display: none !important;
    }
    ul.navbar {
        display: none!important;
    }
}

/* ------ End new navigation bar -------- */

.mobile-panel-trigger {
    display: none;
    z-index: 1;
    position: absolute;
    top: 7px;
    right: 20px;
    background: white;
    border: none;
    padding: 12px;
    margin: 0;
    border-radius: 3px;
}
.mobile-panel-trigger span {
    display: block;
    height: 3px;
    width: 24px;
    margin-top: 4px;
    background: #2bb2ad  ;
    -webkit-transition: background 150ms ease-out;
    transition: background 150ms ease-out;
}
.mobile-panel-trigger span:first-child {
    margin-top: 0;
}
.nav-overlay {
    background-color: rgba(0, 0, 0, 0);
    position: absolute;
    top: 100%;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-transition: background-color 450ms ease-out;
    transition: background-color 450ms ease-out;
    cursor: pointer;
}
body.mobilenav-is-open .nav-overlay {
    background-color: rgba(0, 0, 0, 0.8);
    top: 60px;
}
body.mobilenav-is-open.is-home .nav-overlay {
    background-color: rgba(0, 0, 0, 0.8);
    top: 0px;
}

#refdoc-link {
    position: absolute;
    display: inline-block;
    height: 100%;}

.page-title {
    color: #fff;
    padding-left: 1em;
    font-size: 0.8em;
    font-weight: 600;
    font-family: "Fabrikat Regular";
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
a.page-title:visited {
    color: #fff;
}