:root {
    --oae-page-padding: 24px;
    --tabnav-header-container-height: 82px;
    --tabnav-page-container-padding: 20px;
}

html {
    height: 100%;
}

body {
    height: 100%;
    padding: 0 15px;
}

iframe {
    display: block;
}

a,
.btn-link {
    color: #01979d;
}

a:hover,
.btn-link:hover {
    color: #014e52;
}

button:focus {
    outline: 0 !important; /* Removes the border when clicking in a button that appears in Google Chrome */
    /* Need to set !important to override bootstrap hidden-lg etc... classes */
}

.oae-main-content {
    border-radius: 0;
    height: 100%;
    margin-left: -15px;
    margin-right: -15px;
    padding: 0;
}

.oae-main-content > div {
    height: 100%;
}

.btn.btn-constelgreen,
.btn.btn-constelgreen:hover,
.btn.btn-constelgreen:active,
.btn.btn-constelgreen:focus {
    background-color: #01979d;
    color: #fff;
    background-image: inherit;
}

.btn.btn-primary,
.btn.btn-primary:hover,
.btn.btn-primary:focus {
    background-color: #555;
    color: #fff;
    background-image: inherit;
}

.btn.btn-constelgreen .fa,
.btn.btn-constelgreen:hover .fa,
.btn.btn-primary .fa,
.btn.btn-primary:hover .fa {
    color: #fff;
}

.btn.btn-constelgreen .fas,
.btn.btn-constelgreen:hover .fas,
.btn.btn-primary .fas,
.btn.btn-primary:hover .fas {
    color: #fff;
}

.btn.btn-constelgreen .far,
.btn.btn-constelgreen:hover .far,
.btn.btn-primary .far,
.btn.btn-primary:hover .far {
    color: #fff;
}

.btn,
.btn.btn-primary,
.oae-lhnavigation > ul.nav > li .btn {
    border-radius: 0;
    padding: 5px 25px;
}

/* OAE fontawesome style. We have this to have the basic style but not the hovering behaviour */
.constellation-fa {
    font-size: 12px;
    line-height: normal; /* replicate Font Awesome 3.x behavior for consistency */
    display: inline-block;
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #a9a9a9;
}

.navigation-header {
    margin-left: 20px;
    font-size: 12px;
}

.navigation-header span {
    font-size: 24px;
}

.navigation-header a {
    color: #1a8b8b;
}

.navigation-header a:hover {
    color: #126161;
}

/* Logo */
.oae-institutional-logo {
    margin-top: 6px;
    width: 16.6666667%;
}

@media (max-width: 768px) {
    .oae-institutional-logo {
        display: none;
    }
}

/* TOPNAVIGATION OVERRIDES  */

#adminheader-container,
#topnavigation-container {
    display: none;
}

#topnavigation-left,
#topnavigation-institutional-logo-container {
    visibility: hidden;
}

/* CLIP OVERRIDES */

/* Provides the account link in the lhnav */
.oae-clip-container {
    display: none;
}

/* LHNAVIGATION OVERRIDES */

#lhnavigation-container {
    height: 100%;
    margin: 0;
    padding: 0 !important;

    /* We need .oae-lhnavigation to take the height of this element (its parent), so we make it
       the "relative" parent */
    position: relative;
}

.oae-lhnavigation > ul.nav-list .fa,
.oae-lhnavigation > ul.nav-list .fas,
.oae-lhnavigation > ul.nav-list .far {
    /* Undo the pushing of i's down 8px */
    position: static;
}

/* Tabs */

ul.nav.nav-tabs {
    background-color: #e4e4e4;
    padding: 20px 0px 0px 20px;
}

ul.nav.nav-tabs li a {
    border-radius: 0px;
    color: #797979;
    padding: 20px 40px;
}

ul.nav.nav-tabs li a:hover {
    background-color: #fff;
    border: 0;
    color: #424242;
}

ul.nav.nav-tabs li.active a {
    background-color: #fff;
    color: #424242;
    font-weight: bold;
}

ul.nav.nav-tabs li.active a:hover {
    background-color: #fff;
}

/* Navigation Items */

/* Admin space styles */
#admin-content-container .oae-lhnavigation {
    background-color: #dddddd; /* Lighter color of left-hand menu in admin space */
}

#admin-content-container .oae-lhnavigation > ul > li:not(.active) > a, /* not overwrite active menu item styles */
#admin-content-container .oae-lhnavigation > ul > li:not(.active) > a > i,
#admin-content-container .oae-lhnavigation > ul > li > button,
#admin-content-container .oae-lhnavigation > ul > li > button > i {
    color: #656565; /* Darker text and icons color */
}

#admin-content-container
    .oae-lhnavigation
    > ul.nav
    > li
    > .constellation-logo-text::after {
    margin-left: 20px;
    margin-top: 10px;
    height: 50px;
    display: inline-block;
    content: url('../img/constelcom-text-logo-black-thumbnail.png'); /* black text on logo on light admin background; link relative to stylesheet, not document */
}

/****************/
.oae-lhnavigation {
    background-color: #232323;
    font-size: 16px;
    height: 100%;
    margin: 0;
    width: 300px;
    min-height: 550px;
}

.oae-lhnavigation > ul.nav,
.oae-lhnavigation > ul.nav > li {
    margin: 0;
    width: 100%;
}

.oae-lhnavigation > ul.nav > li > a {
    padding: 20px 0;
}

.oae-lhnavigation > ul.nav > li a div,
.oae-lhnavigation > ul.nav > li button div {
    font-weight: bold;
    padding: 0;
}

.oae-lhnavigation > ul.nav > li > a > i {
    margin-left: 15px;
    margin-right: 15px;
    text-align: center;
    width: 50px;
}

/* Unset `position: relative;` for the navigation toggle that pulls it down */
.oae-lhnavigation-toggle {
    position: static;
}

.oae-lhnavigation #lhnavigation-toggle .lhnavigation-account-inner > div {
    display: inline-block;
}

.oae-lhnavigation > ul.nav > li.lhnavigation-account button {
    border: none;
    margin: 0;
    padding: 0;
}

.oae-lhnavigation
    > ul.nav
    > li.lhnavigation-account
    .lhnavigation-account-inner {
    /* Vertically center content */
    align-items: center;
    display: flex;
    justify-content: space-between;
    -ms-flex-pack: space-between;

    margin: 0;
    padding: 0;
}

.oae-lhnavigation
    > ul.nav
    > li.lhnavigation-account
    .lhnavigation-account-inner
    > div {
    flex: 0 0 auto;
    margin: 15px 0 15px 25px;
    padding: 0;
}

.oae-lhnavigation
    > ul.nav
    > li.lhnavigation-account
    .lhnavigation-account-inner
    > div:last-child {
    margin-right: 15px;
}

.oae-lhnavigation
    > ul.nav
    > li.lhnavigation-account
    .lhnavigation-account-inner
    > div.lhnavigation-account-thumbnail {
    height: 30px;
    width: 30px;
}

.oae-lhnavigation
    > ul.nav
    > li.lhnavigation-account
    .lhnavigation-account-inner
    > div.lhnavigation-account-thumbnail::before {
    content: '\f0da';
    font-family: 'Font Awesome 5 Free';
    height: 10px;
    margin-left: -12px;
    margin-top: -10px;
    position: absolute;
    top: 50%;
    width: 10px;
}

.oae-lhnavigation.oae-lhnav-expanded
    > ul.nav
    > li.lhnavigation-account
    .lhnavigation-account-inner
    > div.lhnavigation-account-thumbnail::before {
    content: '\f0d7';
    margin-left: -15px;
}

.oae-lhnavigation
    > ul.nav
    > li.lhnavigation-account
    .lhnavigation-account-inner
    > div.lhnavigation-account-thumbnail
    > .oae-thumbnail {
    border-radius: 0;
    margin: 0;
    position: static;
    width: 100%;
}

.oae-lhnavigation > ul.nav > li > .constellation-logo-thumbnail::after {
    margin-left: 20px;
    margin-top: 10px;
    height: 50px;
    display: inline-block;
    content: url('../img/oae-logo-thumbnail.png');
    /*background: url("../img/oae-logo-small.png");*/
}

.oae-lhnavigation > ul.nav > li > .constellation-logo-text::after {
    margin-left: 20px;
    margin-top: 10px;
    height: 50px;
    display: inline-block;
    content: url('../img/constelcom-text-logo-white-thumbnail.png'); /* black text on logo on light admin background; link relative to stylesheet, not document */
}

.oae-lhnavigation
    > ul.nav
    > li.lhnavigation-account
    .lhnavigation-account-inner
    > div.lhnavigation-account-name {
    flex: 0 1 100%;
}

.oae-lhnavigation
    > ul.nav
    > li.lhnavigation-account
    .lhnavigation-account-inner
    > div.lhnavigation-account-action {
    /* IE10 defaults to `1 0 auto`, but everyone else defaults to `0 1 auto` */
    -ms-flex: 0 1 auto;

    /* Actions should right align themselves */
    -ms-flex-item-align: flex-end;

    display: inline-block;
    text-align: right;
}

.oae-lhnavigation
    > ul.nav
    > li.lhnavigation-account
    .lhnavigation-account-inner
    > div.lhnavigation-account-action
    i {
    font-size: 25px;
    line-height: 50px;
    margin-right: 5px;
    position: static;
}

.oae-lhnavigation
    > ul.nav
    > li.lhnavigation-account
    .lhnavigation-account-inner
    > div.lhnavigation-account-action
    i:not(.fa) {
    /* Non-fontawesome icons (i.e. plain text like `X`) need to be a bit bigger */
    font-size: 30px;
}

.oae-lhnavigation > ul.nav > li.lhnavigation-logout {
    background-color: rgba(0, 0, 0, 0.5);
    bottom: 0;
    padding: 20px 0;
    position: fixed;
    width: 300px;
}

.oae-lhnavigation > ul.nav > li.lhnavigation-logout a {
    display: inline-block;
    margin-left: 15px;
    padding: 5px 15px;
}

.oae-lhnavigation > ul.nav > li.lhnavigation-logout button i {
    /* Increase the contrast of this button since it's on a 50% darker background */
    color: #eee;
    font-size: 25px;
}

.oae-lhnavigation > ul.nav > li.lhnavigation-actions {
    max-height: 0;
    overflow: hidden;
    padding: 0;
    transition: max-height 0.25s ease-out;
}

.oae-lhnavigation.oae-lhnav-expanded > ul.nav > li.lhnavigation-actions {
    margin-bottom: 10px;
    max-height: 200px;
}

.oae-lhnavigation > ul.nav > li.lhnavigation-actions ul {
    /* Padding of 110px is 80px (left offset) + 15px (item left margin) + 15px (item right margin) */
    padding: 0;
}

.oae-lhnavigation
    > ul.nav
    > li.lhnavigation-actions
    li.oae-lhnavigation-action:first-child {
    margin-top: 0;
}

.oae-lhnavigation
    > ul.nav
    > li.lhnavigation-actions
    li.oae-lhnavigation-action {
    /* Display is handled by parent lhnavigation-actions */
    display: block !important;
}

.oae-lhnavigation
    > ul.nav
    > li.lhnavigation-actions
    li.oae-lhnavigation-action
    a,
.oae-lhnavigation
    > ul.nav
    > li.lhnavigation-actions
    li.oae-lhnavigation-action
    button,
.oae-lhnavigation
    > ul.nav
    > li.lhnavigation-actions
    li.oae-lhnavigation-action
    .fa,
.oae-lhnavigation
    > ul.nav
    > li.lhnavigation-actions
    li.oae-lhnavigation-action
    .fas,
.oae-lhnavigation
    > ul.nav
    > li.lhnavigation-actions
    li.oae-lhnavigation-action
    .far {
    color: #999;
}

.oae-lhnavigation
    > ul.nav
    > li.lhnavigation-actions
    li.oae-lhnavigation-action
    a,
.oae-lhnavigation
    > ul.nav
    > li.lhnavigation-actions
    li.oae-lhnavigation-action
    button {
    text-align: left;
    width: 100%;
}

.oae-lhnavigation
    > ul.nav
    > li.lhnavigation-actions
    li.oae-lhnavigation-action
    a,
.oae-lhnavigation
    > ul.nav
    > li.lhnavigation-actions
    li.oae-lhnavigation-action
    button {
    padding-left: 30px;
}

.oae-lhnavigation
    > ul.nav
    > li.lhnavigation-actions
    li.oae-lhnavigation-action
    a
    > div,
.oae-lhnavigation
    > ul.nav
    > li.lhnavigation-actions
    li.oae-lhnavigation-action
    button
    > div {
    padding-left: 25px;
}

/* Don't show the admin space link in the admin page */
#admin-content-container .lhnavigation-logout-adminspace,
#admin-content-container .lhnavigation-action-adminspace {
    /* Need to set !important to override bootstrap hidden-lg etc... classes */
    display: none !important;
}

/* Only show the workspace link in the admin page */
main:not(#admin-content-container) .lhnavigation-logout-workspace,
main:not(#admin-content-container) .lhnavigation-action-workspace {
    /* Need to set !important to override bootstrap hidden-lg etc... classes */
    display: none !important;
}

.oae-lhnavigation > ul.nav > li.lhnavigation-logout form {
    display: inline-block;
    float: right;
}

.ie-lt10
    .oae-lhnavigation
    > ul.nav
    > li.lhnavigation-account
    .lhnavigation-account-inner
    > div {
    margin-right: 0;
}

.ie-lt10
    .oae-lhnavigation
    > ul.nav
    > li.lhnavigation-account
    .lhnavigation-account-inner
    > div.lhnavigation-account-thumbnail {
    display: inline-block;
    position: absolute;
    top: 0;
    width: 50px;
}

.ie-lt10
    .oae-lhnavigation
    > ul.nav
    > li.lhnavigation-account
    .lhnavigation-account-inner
    > div.lhnavigation-account-name {
    display: inline-block;
    margin-left: 80px;
    margin-top: 15px;
    width: 140px;
}

.ie-lt10
    .oae-lhnavigation
    > ul.nav
    > li.lhnavigation-account
    .lhnavigation-account-inner
    > div.lhnavigation-account-action {
    display: inline-block;
    position: absolute;
    top: 0;
    width: 25px;
}

/* Collapsed lhnav */

.oae-lhnavigation.oae-lhnav-hassecondary + .oae-page {
    margin-left: 80px;
}

.oae-lhnavigation.oae-lhnav-hassecondary + .oae-page {
    transform: unset;
    transition: transform 250ms ease-in-out;
}

.oae-lhnavigation.oae-lhnav-hassecondary.oae-lhnav-expanded + .oae-page {
    min-width: 480px;
    transform: translate(220px, 0);
}

/* Show just the toggle item that has the account info when there is a secondary nav menu */
.oae-lhnav-hassecondary #lhnavigation-toggle {
    display: block;
}

@media (max-width: 1023px) {
    .oae-lhnavigation.oae-lhnav-expanded + .oae-page {
        transform: translate(218px, 0px);
    }
}

/* PAGE OVERRIDES (LHNAV) */

.oae-page {
    background-color: #f3f6f9 !important;
    overflow-y: auto;

    /* Don't add padding to separate from the primary lhnav, because then it's odd to be able to
       wrap the secondary nav right next to it. Instead, using margin on the individual page */
    padding: 0;
}

.oae-page > div.row {
    margin: 0;
}

.oae-page,
.oae-page > div,
.oae-page > div > div,
.oae-page > div > div > div {
    height: 100%;
    padding: 0;
}

/* These pages we're going to undo the padding from the page container */

.oae-header {
    border-bottom: none;
    margin: 0;
    padding: 27px 0;
}

.oae-header .oae-header-title > h2 {
    font-size: 25px;
    margin: 0 0 15px;
}

.oae-header .oae-header-title > h2 > i {
    display: inline-block;
    font-size: 30px;
    position: relative;
    text-align: left;
    top: 2px;
    width: 50px;
}

.oae-page table {
    width: 100%;
}

/* TABLE SORTERS */

/* Text and sorter icons of the table heads in the same line */
.oae-page table th {
    line-height: 35px; /* Show the table header and the sorter aligned */
    white-space: nowrap; /* Never breake the title of the table headers and the sorters into more than one line */
}
.constellation-sorter-container .th-text {
    float: left;
}

/* Aligment and margin between label and sorter icon*/
.constellation-sorter-container i {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
}

/* Pointer in icon and label to sort columns */
.constellation-sorter-container {
    cursor: pointer;
    display: inline-block; /* Make the div no wider than its content */
}

/* Exception, the admin table does not look good now at 100% width now that lost so much content */
#tenants-container table {
    width: auto;
}

#tenants-container td {
    max-width: none;
}

/* MODAL OVERRIDES */

/* Drop the modal down further since we're going to pull the header up above the modal body */
.modal .modal-dialog {
    padding-top: 85px;
}

/* Square off the modal edges */
.modal .modal-dialog .modal-content {
    border-radius: 0;
    padding-top: 10px;
}

/* Pull the modal header out of the modal content so it lays on the modal-backdrop */
.modal .modal-dialog .modal-content .modal-header {
    position: absolute;
    top: -55px;
    width: 100%;
}

.modal .modal-dialog .modal-content .modal-header h3 {
    font-size: 20px;
}

/* Remove opacity and shadow from the close button */
.modal .modal-dialog .modal-content .modal-header .close {
    filter: alpha(opacity=100);
    font-size: 30px;
    font-weight: normal;
    margin-top: 5px;
    opacity: 1;
    text-shadow: none;
}

/* Darker modal backdrop since we have modal header text sitting on top of it */
.modal-backdrop.in {
    filter: alpha(opacity=90);
    opacity: 0.9;
}

/* FOOTER OVERRIDES */

/* footer {
    display: none;
} */

/* ICONS */

div.oae-thumbnail.fa-oae-sproject:before {
    content: '\f01c';
}

/**
 * Profile Item. This is similar to a list item, but is not forced to be a li. The general idea is:
 *
 *  "Some content (.oae-profile-item-content) annotated by a thumbnail image that (preferrably)
 *  falls back to an icon, that optionally has one or more action buttons associated to it
 * (.oae-profile-item-actions)"
 *
 * The profile item is only a structural component, there is no font or colour styling applied
 */

.oae-profile-item {
    align-items: center;
    display: flex;
    justify-content: space-between;
    -ms-flex-pack: space-between;
}

.oae-profile-item > div {
    display: block;
    flex: 0 0 auto;
    margin-right: 15px;
}

.oae-profile-item > div:last-child {
    margin-right: 0;
}

.oae-profile-item > div.oae-profile-item-thumbnail {
    height: 50px;
    width: 50px;
}

.oae-profile-item > div.oae-profile-item-content {
    flex: 0 1 100%;
}

.oae-profile-item > div.oae-profile-item-actions {
    align-self: flex-end;
}

.ie-lt10 .oae-profile-item {
    min-height: 50px;
    position: relative;
}

.ie-lt10 .oae-profile-item-thumbnail {
    left: 0;
    position: absolute;
    top: 0;
}

.ie-lt10 .oae-profile-item-content {
    margin-left: 65px;
}

.ie-lt10 .oae-profile-item-actions {
    position: absolute;
    right: 0;
    top: 0;
}

.nav > li.active > a,
.nav > li.active > a:hover,
.nav > li.active > a:focus,
.nav > li.active > button,
.nav > li.active > button:hover,
.nav > li.active > button:focus,
.nav > li.active > a i,
.nav > li.active > a:hover i,
.nav > li.active > a:focus i {
    background-color: #01979d;
}

.oae-header h2,
.oae-header .fa {
    color: #01979d;
    font-weight: 100;
}

.oae-header .fas,
.oae-header .far {
    color: #01979d;
}

div.oae-thumbnail {
    background-color: #e4e4e4;
    background-image: none;
}

/* The actions tile in a list */

ul.oae-list.oae-list-grid > li.oae-list-actions {
    background-color: #2d2d2d;
    border: none;
    border-radius: 0px;
}

ul.oae-list.oae-list-grid > li.oae-list-actions button {
    font-size: 13px;
    padding: 8px 15px;
}

ul.oae-list.oae-list-grid > li .oae-thumbnail,
ul.oae-list.oae-list-grid > li.oae-list-actions {
    height: 135px;
    width: 135px;
}

ul.oae-list.oae-list-grid li.oae-list-actions div.oae-thumbnail {
    color: #fff;
    border: none;
    height: 135px;
    width: 135px;
}

/* Styling a compact list */

ul.oae-list.oae-list-compact li div.oae-list-compact-item div.oae-listitem {
    background-color: #ececec;
    border: 1px solid #d1d1d1;
    border-radius: 0px;
}

.oae-tile > .oae-tile-metadata {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 80px;
}

div.oae-thumbnail.oae-thumbnail-large:before {
    font-size: 42px;
}

.oae-tile > .oae-tile-metadata {
    background-color: transparent;
}

.oae-tile > .oae-tile-metadata small {
    color: #01979d;
    text-align: center;
}

.oae-tile h3,
.oae-tile h3 a {
    color: #000;
    text-align: center;
}

/* Mark active users in a different colour in the autosuggest */
.fa-oae-user.acceptedTC {
    color: #1a8b8b;
}

/* MESSAGES OVERRIDES */
.alert-info,
.alert-info h4 {
    color: #01979d;
    margin-top: 20px;
    margin-bottom: 20px;
}

.alert-info {
    border-color: #80cbce;
    background-color: #cceaeb;
}

/* FORMS OVERRIDES */
/* Focus in the Constellation blue-green */
.form-control:focus {
    border-color: #01979d;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
        0 0 8px rgba(1, 151, 157, 0.6);
}

/* CLICKOVERS */
.popover {
    z-index: 10;
    width: 240px;
    margin: 0;
    border: 0;
    border-radius: 3px;
    box-shadow: 0 0 10px #999;
}

.popover ul {
    padding: 0;
}

.popover li {
    list-style-type: none;
}

/* List of actions buttons */
.action-buttons-container {
    padding-bottom: 15px;
}

/* EXTRA INFO TOOLTIP ICONS IN TILES */

/* Icons */
i.tile-extra-info-right {
    position: absolute;
    right: 5px;
    top: 5px;
    z-index: 5;
}

/* Tooltip */
.tile-extra-info-right + .tooltip > .tooltip-inner {
    border-radius: 2px;
}

.tile-extra-info-right.linux-account-not-active-icon
    + .tooltip
    > .tooltip-inner {
    width: 150px;
}

/*****************************************
 **** Logo under the infinite spinner ****
 *****************************************/
.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: white;
    opacity: 0.8;
    display: block;
    z-index: 2001;
}

.overlay-message {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 250px;
    margin-left: -200px;
    margin-top: -125px;
    background-color: #ddd;
    border-radius: 25px;
    opacity: 1;
    z-index: 2002;
}

.overlay-message::after {
    content: '';
    background-image: url(../../../../ui/img/constelcom-logo.png);
    background-size: 292px 96px;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.5;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
}

.show-hidden {
    margin-top: 15px;
    margin-bottom: 15px;
}

#level-up {
    cursor: pointer;
}

/**************************
 **** infinite spinner ****
 **************************/

#container {
    height: 94.5px;
    width: 45px;
}

.on-top-of-constelcom-infinite {
    position: absolute;
    left: 94px;
    top: 173px;
}

#ball-holder1 {
    min-width: 45px;
    min-height: 45px;
    max-width: 45px;
    max-height: 45px;
    display: block;
    position: relative;
    top: -94.5px;
    left: 3.5px;
    -webkit-animation: ballPath1 1.5s linear infinite;
    animation: ballPath1 1.5s linear infinite;
}

#ball-holder2 {
    min-width: 45px;
    min-height: 45px;
    max-width: 45px;
    max-height: 45px;
    display: block;
    float: left;
    position: relative;
    top: -94.5px;
    left: 3px;
    -webkit-animation: ballPath3 1.5s linear infinite;
    animation: ballPath3 1.5s linear infinite;
}

.ballSettings {
    height: 5px;
    width: 5px;
    opacity: 0.8;
    background-color: #1a8b8b;
    border-radius: 100%;
    box-shadow: 0px 0px 8px 4px white;
    position: relative;
}

.ball1 {
    top: 2.5px;
    left: 21px;
    -webkit-animation: ball1 1.5s linear infinite;
    animation: ball1 1.5s linear infinite;
}

#contain1 {
    width: 45px;
    height: 45px;
    -webkit-animation: ballPath2 1.5s linear infinite;
    animation: ballPath2 1.5s linear infinite;
}

.ball2 {
    top: 2.5px;
    left: 20px;
    -webkit-animation: ball3 1.5s linear infinite;
    animation: ball3 1.5s linear infinite;
}

#contain2 {
    height: 45px;
    position: relative;
    top: 5px;
    width: 45px;
    -webkit-animation: ballPath4 1.5s linear infinite;
    animation: ballPath4 1.5s linear infinite;
}

@-webkit-keyframes ballPath1 {
    0% {
        transform: rotate(225deg);
    }
    37.5% {
        transform: rotate(495deg);
    }
    50% {
        transform: rotate(495deg);
    }
    75% {
        transform: rotate(585deg);
    }
    100% {
        transform: rotate(585deg);
    }
}

@keyframes ballPath1 {
    0% {
        transform: rotate(225deg);
    }
    37.5% {
        transform: rotate(495deg);
    }
    50% {
        transform: rotate(495deg);
    }
    75% {
        transform: rotate(585deg);
    }
    100% {
        transform: rotate(585deg);
    }
}

@-webkit-keyframes ballPath2 {
    0% {
        transform: translate(0px, 0px);
    }
    37.5% {
        transform: translate(0px, 0px);
    }
    50% {
        transform: translate(-24.75px, 24.75px);
        opacity: 1;
    }
    50.001% {
        opacity: 0;
    }
    75% {
        transform: translate(0px, 0px);
        opacity: 0;
    }
    99.999% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes ballPath2 {
    0% {
        transform: translate(0px, 0px);
    }
    37.5% {
        transform: translate(0px, 0px);
    }
    50% {
        transform: translate(-24.75px, 24.75px);
        opacity: 1;
    }
    50.001% {
        opacity: 0;
    }
    75% {
        transform: translate(0px, 0px);
        opacity: 0;
    }
    99.999% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes ballPath3 {
    0% {
        transform: rotate(675deg);
        opacity: 0;
    }
    37.5% {
        transform: rotate(675deg);
    }
    50% {
        transform: rotate(675deg);
        opacity: 0;
    }
    50.001% {
        transform: rotate(675deg);
        opacity: 1;
    }
    87.5% {
        transform: rotate(405deg);
    }
    100% {
        transform: rotate(405deg);
    }
}

@keyframes ballPath3 {
    0% {
        transform: rotate(675deg);
        opacity: 0;
    }
    37.5% {
        transform: rotate(675deg);
    }
    50% {
        transform: rotate(675deg);
        opacity: 0;
    }
    50.001% {
        transform: rotate(675deg);
        opacity: 1;
    }
    87.5% {
        transform: rotate(405deg);
    }
    100% {
        transform: rotate(405deg);
    }
}

@-webkit-keyframes ballPath4 {
    0% {
        transform: translate(0px, 0px);
    }
    87.5% {
        transform: translate(0px, 0px);
    }
    100% {
        transform: translate(-24.75px, -24.75px);
    }
}

@keyframes ballPath4 {
    0% {
        transform: translate(0px, 0px);
    }
    87.5% {
        transform: translate(0px, 0px);
    }
    100% {
        transform: translate(-24.75px, -24.75px);
    }
}

/***************************
 **** Breadcrumb header ****
 ***************************/

.constellation-header-breadcrumb span:before {
    content: '>';
}

.constellation-header-breadcrumb span {
    color: black;
}

.constellation-header-breadcrumb span:first-of-type:before {
    content: '';
}

.oae-page {
    /** This effectively forces padding on any page displayed next to the left hand nav. For the majority of
      Constellation's pages, this is fine. However, when there are components need to touch the lhnav does this fall
      apart. e.g. tabs, full-page banners, etc..
      Individual pages should override this value through a negative margin.
      When updating this, don't forget to update the negative offset on the tabnav-container
      to account for double navs */
    padding-left: var(--oae-page-padding);
    background-color: #F3F6F9;
}

.oae-page .constellation-offset-back-to-lhnav {
    margin-left: calc(-1 * var(--oae-page-padding));
    width: calc(100% + var(--oae-page-padding));
}