/*
	Font Assignment
*/

h1, h2, h3, h4 {
    font-weight: bold;
}

h1 {
    font-size: var(--alignvu-h1-font-size);
}

h2 {
    font-size: var(--alignvu-h2-font-size);
}

h3 {
    font-size: var(--alignvu-title-font-size);
}

h4 {
    font-size: var(--alignvu-subtitle-font-size);
}

p, a {
    font-weight: normal;
    font-size: var(--alignvu-title-font-size);
}

a {
    color: var(--alignvu-text);
    text-decoration: none;
}

text, .subtitle, label {
    font-size: var(--alignvu-subtitle-font-size);
}

/*
	BODY
*/
body {
    font-family: var(--alignvu-font), sans-serif;
    background-color: var(--alignvu-background);
    color: var(--alignvu-text);
    padding: 0px;
    margin: 0;
    display: grid;
    grid-template-columns: 260px 1fr;
    overflow: hidden;
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #ffffff00;
}

::-webkit-scrollbar-thumb {
    background: var(--alignvu-pale-grey);
    cursor: pointer;
    border-radius: 20px;
}


::-webkit-scrollbar-thumb:hover {
    background: var(--alignvu-light-grey);
}

.hidden {
    display: none;
}

.unauthorised {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

.dev-page-id-display, .modal-page-id-display {
    position: fixed;
    top: 0;
    left: 0;
    width: 40px;
    height: 30px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0 0 5px rgb(194, 194, 194);
    border: 2px solid rgb(39, 101, 173);
    z-index: 1001;
}

.modal-page-id-display {
    display: inline;
    position: relative;
    top: -40px;
    left: -63px;
}

.dev-page-id-display p, .table-connections .modal-content .modal-page-id-display p {
    text-align: center;
    margin: 7px 0;
    font-size: 11px;
    color: rgb(39, 101, 173);
}

/*
	COMMON
*/

h1.page-description {
    margin: 5px 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    padding-left: 20px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.in-page-actions {
    display: flex;
    align-items: center;
    width: calc(100vw - 350px);
    padding: 10px 0;
    justify-content: end;
}

.in-page-actions.space-between {
    width: unset;
    justify-content: space-between;
}

.modal-content .in-page-actions {
    width: unset;
    justify-content: space-between;
}

.in-page-action-button {
    height: 30px;
    font-size: 14px;
    color: var(--alignvu-alignify-grey);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    border-radius: 3px;
    border: 1px solid #e7eceb;
    background-color: rgba(255, 255, 255, 0);
    cursor: pointer;
    margin-left: 0.5rem;

}

.in-page-action-button p {
    font-size: 14px;
    color: var(--alignvu-alignify-grey);
}

.in-page-action-button-colored:hover {
    background-color: var(--alignvu-pale-grey);
}

.in-page-action-button-colored {
    height: 30px;
    font-size: 14px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    border-radius: 3px;
    border: 1px solid var(--alignvu-alignify-grey);
    background-color: var(--alignvu-alignify-grey);
    cursor: pointer;
    margin-left: 0.5rem;
}

.in-page-action-button:hover {
    background-color: var(--alignvu-link-hover);
}

.in-page-actions .search-component {
    margin-left: 0.5rem;
}

.in-page-action-selector {
    min-width: 15px;
    min-height: 15px;
    max-width: 15px;
    max-height: 15px;
    border-radius: 6px;
    border: 1px solid var(--alignvu-darkest-grey);
    background-color: var(--alignvu-white);
    cursor: pointer;
    pointer-events: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    /* box-sizing: border-box; */
}

.in-page-action-selector:hover {
    background-color: var(--alignvu-link-hover);
}

.in-page-action-selector img {
    display: none;
}

.in-page-action-selector.checked img {
    display: block;
}

.pagination {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pagination span {
    margin: 0 5px;
    color: var(--alignvu-alignify-grey);
    font-size: 14px;
    cursor: pointer;
}

.pagination span.current {
    text-decoration: underline;
    font-weight: bold;
}

input[type="search"], input[type="password"] {
    border: none;
}

input[type="search"]:focus, input[type="password"]:focus {
    outline: none;
}


.clear {
    clear: both;
}

.spacer {
    display: block;
    padding-top: 40px;
}

.right {
    float: right;
}

.action-button:hover {
    cursor: pointer;
}

.btn-space-right {
    margin-right: 0.5rem;
}

.btn-space-right.toggle {
    margin-right: 1rem;
}

.justify-center {
    justify-content: center;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

#application-date-interval {
    padding: 4px;
}

.btn-inactive {
    color: var(--alignvu-text) !important;
    background-color: #8f8f8f42 !important;
    cursor: default !important;
    border: none !important;
    cursor: default;
    pointer-events: none;
}

.delete-bin {
    display: flex;
    justify-content: end;
    align-items: center;
    color: var(--alignvu-alignify-grey) !important;
    margin: 0;
    cursor: pointer;
}

.delete-bin p {
    margin-right: 0.5rem;
    color: var(--alignvu-alignify-grey) !important;
}

.modal-backdrop {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    min-height: 100%;
    background-color: #59727298;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.search-profile.modal-backdrop {
    z-index:10001;
}

.sub-modal {
    z-index: 9999;
}

#field-population-chart-modal .modal-content {
    z-index: 1001;
    display: flex;
    flex-direction: column;
    width: 60%;
    padding: 40px 63px;
    background-color: white;
    border-radius: 3px;
    max-height: 700px;
    overflow-y: auto;
    overflow-x: scroll;
}

.modal-content {
    z-index: 1001;
    display: flex;
    flex-direction: column;
    padding: 40px 63px;
    background-color: white;
    border-radius: 3px;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    overflow-x: hidden;
    grid-gap: 20px;
    max-width: 80%;
    min-width: 550px;
}

.modal-content .modal-sub {
    display: flex;
    flex-direction: column;
    grid-gap: 2px;
}

.modal-content .modal-sub p {
    margin: 0;
}

.tutorial-modal .modal-content {
    width: 500px;
    min-width: unset;
}

.modal-body {
    /* margin-bottom: 1rem; */
}

.modal-body .modal-scroll-content {
    overflow-y: auto;
    max-height: calc(100vh - 350px);
}

.modal-body input:focus {
    outline: none;
}

.tutorial-modal img {
    margin: 0 auto;
}

.tutorial-modal h2, .main_panel h1.modal-header {
    font-size: 21px !important;
    margin: 1rem 0 !important;
}

.tutorial-modal p, .modal-body p {
    font-size: 16px;
    margin: 1rem 0;
}

.tutorial-next-container {
    display: flex;
    justify-content: end;
}

.tutorial-next-container button {
    width: 100px;
}

.close-button {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    width: 30px;
}

.loading {
    text-align: center;
}

.loading img {
    width: 100px;
}

.nav-dropdown {
    font-size: 13px;
    border-radius: 3px;
    border: 1px solid var(--alignvu-alignify-grey);
    color: var(--alignvu-alignify-grey);
    box-shadow: none;
    width: 150px;
    margin-left: 0.5rem;
}

.nav-buttons-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

.nav-buttons-container .permission_buttons {
    display: flex;
    grid-gap: 5px;
}

.nav-buttons-container button, .nav-buttons-container input[type="submit"], .back-button {
    min-width: 120px;
    width: fit-content;
}

.ellipsis {
    text-overflow: ellipsis;
    /* Required for text-overflow to do anything */
    white-space: nowrap;
    overflow: hidden;
    pointer-events: auto;
    width: 90%;
}

.mapping-model-product .ellipsis {
    width: 75%;
}

.ellipsis:before {
    content: attr(data-tooltip); /* here's the magic */
    position: absolute;

    left: 0;
    top: 0;

    display: none; /* hide by default */
    background-color: white;

    padding: 5px 15px;
    color: var(--alignvu-text);
    border: 1px solid #e7e7e7;
    border-radius: 3px;

    min-width: 100%;

    text-overflow: unset;
    overflow: visible;
    box-sizing: border-box;

    z-index: 1000;
}

.ellipsis:hover:before {
    display: block;
}


/*
	NAV HEAD
*/

.head-nav, .view-header-bar {
    box-sizing: border-box;
    width: calc(100vw - 260px);
    position: fixed;
    left: 260px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 999;
}

.head-nav {
    top: 0;
    background-color: #fefefe;
    padding: 13px 45px;
    display: inline-grid;
    grid-template-columns: 2fr 1fr;
    max-height: 70px;
    box-sizing: border-box;
    height: 100%;
}

.head-nav h1 {
    margin: 0;
}

.view-header-bar {
    top: 70px;
    background-color: var(--alignvu-background);
    padding: 10px 45px;
    height: 40px;
    z-index: 998;
}

.view-header-bar select {
    padding: 4px;
}


.view-header-bar select optgroup + optgroup {
    border-top: 1px solid black;
}

.view-header-bar .mapping-form-button,
.view-header-bar .mapping-form-button-colored {
    min-width: 100px;
    width: fit-content;
}

.view-header-bar h2 {
    font-weight: normal;
    margin: 0;
    font-size: 14px;
}

.view-header-bar label,
.view-header-bar p {
    margin: 0;
    margin-right: 5px;
}

.head-nav .module-container {
    grid-gap: 30px;
}

.head-nav .module-container .selectedVendors {
    display: flex;
    grid-gap: 15px;
}

.head-nav .module-container .selectedVendors .source-container {
    display: flex;
    grid-gap: 5px;
    align-items: center;
    padding: 0px;
    box-sizing: border-box;
}

.head-nav .module-container .selectedVendors p {
    display: flex;
    flex-direction: column;
    font-size: 11px;
    margin: 0;
}

.head-nav > div, .view-header-bar > div,
.head-nav > div, .view-header-bar .inlineContainer {
    display: flex;
    /* justify-content: right; */
    align-items: center;
    grid-gap: 5px;
}

.head-nav .mapping-form-button {
    margin-left: 1rem;
}

.head-nav .search-bar a {
    padding: 6px 8px;
}

.head-nav .search-bar a img {
    height: 18px;
    width: 18px;
}


.next-button-container {
    position: relative;
}

.navigation .application-datafeeds-last-polled-parent {
    display: flex;
    flex-direction: column;
    margin-top: 0;
    margin-bottom: 20px !important;
}

.navigation .application-datafeeds-last-polled-parent span {
    margin: 0;
}

.application-steps {
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 0.5rem;
}

.application-steps p {
    padding: 0.5rem 0.5rem 0.5rem 15px;
    cursor: pointer;
    margin: 0;
}

.application-steps > .module-nav-item {
    margin-left: 2rem !important;
    text-decoration: none;
}

.application-steps > div {
    margin: 0;
}

.application-steps .sub-nav {
    box-sizing: border-box;
    /* width: 100%; */
    padding-left: 3rem;
}

.application-steps .sub-nav div {
    margin: 0;
}

.application-steps .sub-nav p {
    margin: 0;
}

.application-steps .module-nav-item.module-nav-child {
    margin-left: 3rem !important;
}

.application-steps .sub-nav.module-nav-child {
    margin-left: 1rem !important;
}

.module-nav-item :hover {
    background-color: var(--alignvu-link-hover);
    border-radius: 3px;
}

.module-nav-item.active {
    background-color: var(--alignvu-alignify-grey);
    color: var(--alignvu-white);
    pointer-events: none;
    font-weight: bold;
    border-radius: 5px;
}

.module-nav-item.nav-disabled {
    background-color: #e3e3e363;
    pointer-events: none;
    color: #aaaaaa;
}


#application-next {
    box-sizing: border-box;
    position: absolute;
    top: 30px;
    left: 0;
    width: 100%;
    background-color: white;
    box-shadow: 0px 0px 10px #cfcfcf3f;
    border-radius: 3px;
}

#application-next p {
    padding: 0.5rem;
    cursor: pointer;
    margin: 0;
}

#application-next > div {
    position: relative;
    margin: 0;
}

#application-next > div:hover .sub-nav {
    display: block;
}

#application-next .sub-nav {
    box-sizing: border-box;
    position: absolute;
    width: 100%;
    top: 0;
    left: -100%;
    /* background-color: white; */
    display: none;
    box-shadow: 0px 0px 10px #cfcfcf3f;
    border-radius: 3px;
}

#application-next .sub-nav div {
    margin: 0;
}

#application-next > div:nth-child(odd), #application-next .sub-nav div:nth-child(odd) {
    background-color: var(--alignvu-white);
}

#application-next > div:nth-child(even), #application-next .sub-nav div:nth-child(even) {
    background-color: #f7f7f7;
}


#application-next .sub-nav p {
    margin: 0;
}

/*
	NAVIGATION PANEL
*/
.navigation {
    /*float: left;
    width: 185px; /* 260 less L/R padding */
    padding-top: 20px;
    padding-left: 10px;
    padding-right: 10px;
    /*padding-bottom: 50px;*/
    background-color: var(--alignvu-background);
    position: fixed;
    z-index: 1000;
    box-shadow: -5px 0px 20px rgba(202, 202, 202, 0.438) inset;
    height: 100%;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
}

.navigation #top_apps {
    top: 0;
    width: 240px;
}

.navigation #logo img {
    width: auto;
    height: 30px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 22px;
}

.navigation #logo span {
    display: block;
    text-align: center;
    margin-bottom: 30px;
}

.navigation ul {
    /* position: fixed; */
    top: 130px;
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    display: flex;
    flex-direction: column;
    grid-gap: 8px;
}

.navigation li a {
    background-color: var(--alignvu-pale-grey);
    background-size: 18px 18px;
    background-repeat: no-repeat;
    background-position: 10px 20px;
    text-decoration: none;
    display: flex;
    cursor: pointer;
    border-radius: 5px;
    /* margin-bottom: 10px; */
    padding-left: 36px;
    line-height: 56px;
    align-items: center;
}

.navigation li a.nav-disabled {
    /* background-color: var(--alignvu-link-hover); */
    pointer-events: none;
    /* color: #aaaaaa; */
    /* opacity: 0.6; */
}

.navigation li a:hover {
    background-color: var(--alignvu-link-hover);
}

.navigation li a.active {
    background-color: var(--alignvu-dark-grey);
    color: var(--alignvu-white);
}

.navigation li a.active:hover {
    background-color: var(--alignvu-mid-grey);
}

.navigation li a.nav-home {
    background-image: url('../images/home.png');
    margin-top: 30px;
}

.navigation li a.nav-dataflow {
    background-image: url('../images/alignvu_nav_new/icon_align.png');
}

.navigation li a.nav-align-to {
    background-image: url('../images/alignvu_nav_new/icon_monitor.png');
}

.navigation li a.nav-align-assess-to {
    background-image: url('../images/alignvu_nav_new/icon_assess.png');
}

.navigation li a.nav-consolidation {
    background-image: url('../images/alignvu_nav_new/icon_consolidate.png');
}

.navigation li a.nav-impact-assessment {
    background-image: url('../images/alignvu_nav_new/icon_impact.png');
}

.navigation li a.nav-align-from {
    background-image: url('../images/alignvu_nav_new/icon_connect.png');
}

.navigation li a.nav-report {
    background-image: url('../images/report.png');
}

.navigation li a.nav-client-list {
    background-image: url('../images/client_list.png');
}

.navigation li a.nav-search {
    background-image: url('../images/search.png');
}

.navigation li a.nav-search.active {
    background-image: url('../images/search_white.png');
}

.navigation li a.nav-workflow {
    background-image: url('../images/workflow.png');
}

.navigation li a.nav-workflow.active {
    background-image: url('../images/workflow_white.png');
}

.navigation li a.nav-admin {
    background-image: url('../images/admin_security.png');
}

.navigation li a.nav-admin.active {
    background-image: url('../images/admin_security_white.png');
}

.navigation li a.nav-user {
    background-image: url('../images/user.png');
    margin-bottom: 0;
}

.navigation li a.nav-user.active {
    background-image: url('../images/user_white.png');
}

.navigation li a.nav-configuration {
    background-image: url('../images/nav-configuration.svg');
}

.navigation li a.nav-configuration.active {
    background-image: url('../images/nav-configuration-white.svg');
}

.navigation li a.nav-logout {
    color: var(--alignvu-alignify-grey);
    padding-left: 35px;
}

.navigation li a.nav-user-settings {
    color: var(--alignvu-alignify-grey);
    padding-left: 35px;
}

.nav-align-to,
.nav-workflow {
    /* margin-top: 1.5em; */
}

.navigation .nav-divider {
    width: 100%;
    border-top: solid 2px #c4c4c457;
}

#apps {
    position: fixed;
    bottom: 0;
    padding-bottom: 50px;
    width: 185px; /* 260 less L/R padding */
}

.navigation span {
    display: block;
    margin-top: 30px;
    margin-bottom: 10px;
    margin-left: 10px;
}

.grid-component {
    display: grid;
    grid-gap: 1rem;
    justify-content: start;
    align-items: center;
}

p.grid-header {
    font-size: 14px;
    color: var(--alignvu-text);
}

/*
	MAIN AREA
*/
.main_panel {
    box-sizing: border-box;
    /*float: left;*/
    /*width: calc(100% - 293px); /* less L/R padding as well as the 260px either side*/
    min-height: calc(100vh - 110px);
    padding: 0 45px 10px 45px;
    background-color: var(--alignvu-white);
    box-shadow: 0 0 50px #cccccc7c;
    /*margin: -8px -8px;*/
    background-image: linear-gradient(-179.71892527382195deg, #fefefe 1.3077253561002482%, #f8f8f8 99.68450388616822%);
    margin-top: 110px;
}


.main_panel h1 {
    margin: 0px;
    margin-bottom: 30px;
}

.main_panel h2 {
    margin: 0px;
    /* margin-bottom: 30px; */
}

/*
	LANDING PAGES
*/
.landing_page, .application {
    color: var(--alignvu-text);
}

.landing_page {
    float: left;
    width: calc(100%);
    position: sticky;
    margin-top: -45px;
    padding-top: 45px;
    top: 0px;
    background-color: var(--alignvu-white);
    /*height: 170px;*/
}

.landing_page .landing_right {
    display: block;
    width: 306px; /*calc((100% - 200px)/3);*/
    float: right;
}

.landing_page .landing_right a {
    width: 133px; /*calc((100% - 40px)/2);*/
}

.landing_page p {
    margin-bottom: 20px;
}

.landing_page a {
    float: left;
    display: block;
    width: calc((100% - 200px) / 6);
    margin-right: 40px;
    text-align: center;
    text-decoration: none;
    font-size: 10px;
    color: var(--alignvu-text);
}

.landing_page .centered a {
    float: none;
    display: inline-block;
}

.landing_page a.first {
    margin-left: calc((100% - (((100% - 200px) / 6 * 5) + 120px)) / 2);
}

.landing_page a.center {
    margin-left: calc((100% - (((100% - 200px) / 6 * 5) + 120px)) / 2 + ((100% - 200px) / 6) + 40px);
    margin-bottom: 20px;
}

.application_landing a.first {
    margin-left: calc(25% + 10px);
}

.landing_page a.last {
    margin-right: 0px;
}


.application_landing .buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.landing_page a .landing-button {
    display: block;
    width: calc(100%);
    height: 0;
    padding-bottom: 100%;
    background-color: var(--alignvu-white);
    background-size: 80% 80%;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 5px;
    margin-bottom: 10px;
    box-shadow: 0 0 50px rgba(223, 221, 221, 0.363);
}

.landing_page a .landing-button:hover {
    background-color: var(--alignvu-link-hover);
}

.landing_page a span.header {
    font-size: 12px;
    display: block;
    margin-bottom: 5px;
}

.landing_page a #landing_reports {
    background-image: url('../images/landing_reports_teal.png');
}

.landing_page a #landing_configure {
    background-image: url('../images/configure_teal.png');
}

.landing_page a #align-to {
    background-image: url('../images/align_to_teal.png');
}

.landing_page a #translate {
    background-image: url('../images/translate_teal.png');
}

.landing_page a #align-from {
    background-image: url('../images/align_from_teal.png');
}

.landing_page a #report {
    background-image: url('../images/report_teal.png');
}

.landing_page a #client-list {
    background-image: url('../images/client_list_teal.png');
}

.landing_page a #configure {
    background-image: url('../images/configure_teal.png');
}

.landing_page a #run {
    background-image: url('../images/run_teal.png');
}

.landing_page a #report {
    background-image: url('../images/report_teal.png');
}

/*
	SEARCH
*/
div.search-component {
    background-color: var(--alignvu-white);
    border-radius: 10px;
    padding-left: 10px;
    padding-top: 3px;
    padding-bottom: 3px;
    float: right;
    width: 30%;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(151, 151, 151, 0.2);
}

div.search-component input[type="text"], div.search input[type="text"]:focus {
    background-color: transparent;
    color: var(--alignvu-text);
    outline: none;
    border: 0px;
    font-size: 12px;
    width: calc(100% - 50px);
}

div.search-component input[type="submit"], div.search .search_button {
    background-color: var(--alignvu-background);
    background-image: url('../images/search_teal.png');
    background-size: 15px 15px;
    background-repeat: no-repeat;
    background-position: 8px 5px;
    outline: none;
    border: 0px;
    width: 40px;
    height: 28px;
    float: right;
    position: absolute;
    top: 0px;
    right: 0px;
}

div.search-component input[type="search"] {
    width: 100%;
}

div.search-component input[type="submit"]:hover, div.search .search_button:hover {
    background-color: var(--alignvu-alt-text);
    cursor: pointer;
}

/*
	REPORTS
*/
.header_strip {
    background-color: var(--alignvu-background);
    padding: 15px 45px;

    position: relative;
    left: -45px;
    width: calc(100%);
}

.header_strip h2 {
    margin: 0px;
}

.header_strip a, .header_strip div {
    float: right;
}

.header_strip div {
    font-size: 14px;
    text-decoration: none;
    color: var(--alignvu-text);
}

#baseline_date_picker {
    width: 0px;
    border: 0px;
    padding: 0px;
}

#date-picker-modal #baseline_date_picker {
    width: 0px;
    border: 0px;
    padding: 0px;
    position: absolute;
    left: calc(50% - 120px);
    top: 200px;
}

.header_strip #baseline_date:hover {
    text-decoration: underline;
    text-decoration-color: var(--alignvu-mid-grey);
    text-decoration-thickness: 1px;
    cursor: pointer;
}

.header_strip a {
    margin-left: 10px;
}


.report_button {
    font-size: 12px;
    text-decoration: none;
    color: var(--alignvu-text);

    border: 1px var(--alignvu-mid-grey) solid;
    border-radius: 4px;
    box-shadow: 0 0 5px rgba(151, 151, 151, 0.5);

    padding: 3px 30px;
}

.view-header-bar label {
    display: flex;
    height: fit-content;
    /* width:fit-content; */
    /* width: 100%; */
    white-space: nowrap;
}

.view-header-bar #application-landing-list-category-filter,
.select2-container #select2-application-landing-list-types-filter-select-results li,
.select2-container #select2-application-landing-list-category-filter-select-results li {
    font-size: var(--alignvu-subtitle-font-size) !important;
    font-family: var(--alignvu-font) !important;
}

.view-header-bar #application-landing-list-category-filter,
.view-header-bar #application-landing-list-types-filter,
.view-header-bar #application-date-interval {
    display: flex;
    grid-gap: 5px;
    /* min-width:60%;
    max-width: 100%; */
    align-items: center;
}

.view-header-bar #application-landing-list-types-filter .select2 {
    min-width: 16vw;
    font-size: var(--alignvu-subtitle-font-size);
    width: 100% !important;
}

.view-header-bar #application-landing-list-types-filter .select2 li {
    max-width: 33.3%;
}

select {
    border: 1px solid var(--alignvu-alignify-grey);
    box-shadow: none;
    background-color: white;
    border-radius: 3px;
    color: var(--alignvu-text);
    text-align: left;
    font-size: 13px;
    padding: 0;
}

select option[disabled] {
    color: var(--alignvu-pale-grey);
}

.report_button:hover {
    background-color: var(--alignvu-link-hover);
    cursor: pointer;
}

.sub_header_strip a {
    text-decoration: none;
    margin-right: 20px;
    white-space: nowrap;
}

.sub_header_strip a.preload {
    color: #CDCDCD;
}

.sub_header_strip a:hover {
    color: var(--alignvu-alignify-grey);
    text-decoration: underline;
    text-decoration-color: var(--alignvu-mid-grey);
    text-decoration-thickness: 1px;
}

.sub_header_strip a.preload:hover {
    text-decoration: none;
    cursor: default;
    color: #CDCDCD;
}

.sub_header_strip a.last {
    margin-right: 0;
}

.sub_header_strip a.active {
    text-decoration: underline;
    text-decoration-thickness: 5px;
    text-decoration-color: var(--alignvu-alignify-grey);
    text-underline-offset: 10px;
    font-weight: bold;
}

.sub_header_strip a.active:hover {
    color: #333333;
}

.sub_header_strip a.disabled {
    color: #CDCDCD;
}

.sub_header_strip a.disabled:hover {
    cursor: auto;
    text-decoration: none;
}

text.zero_label {
    fill: var(--alignvu-text);
}

circle.organisation_key, text.organisation, rect.organisation, rect.reference_group_code_available {
    fill: var(--alignvu-mid-grey);
}

rect.organisation:hover, rect.reference_group_code_available:hover, rect.organisation_hover, rect.reference_group_code_available_hover {
    fill: #1E95A5;
}

circle.organisation_key_outer {
    stroke: var(--alignvu-mid-grey);
    fill: transparent;
}

circle.individual_key, text.individual, rect.individual {
    fill: var(--alignvu-pale-grey);
}

rect.individual:hover, rect.individual_hover {
    fill: #AADCE0;
}

circle.individual_key_outer {
    stroke: var(--alignvu-pale-grey);
    fill: transparent;
}

circle.object_key, text.object, rect.object {
    fill: var(--alignvu-light-grey);
}

rect.object:hover, rect.object_hover {
    fill: #33C4CD;
}

circle.object_key_outer {
    stroke: var(--alignvu-light-grey);
    fill: transparent;
}

circle.location_key, text.location, rect.location {
    fill: #138796;
}

rect.location:hover, rect.location_hover {
    fill: #219DAD;
}

circle.location_key_outer {
    stroke: #138796;
    fill: transparent;
}

circle.product_fund_instrument_key, text.product_fund_instrument, rect.product_fund_instrument {
    fill: #0D5862;
}

rect.product_fund_instrument:hover, rect.product_fund_instrument_hover {
    fill: #1A7582;
}

circle.product_fund_instrument_key_outer {
    stroke: #0D5862;
    fill: transparent;
}

circle.missing_regulator_key, text.missing_regulator, rect.missing_regulator {
    fill: var(--alignvu-green);
}

rect.missing_regulator:hover, rect.missing_regulator_hover {
    fill: #1ABA8A;
}

circle.missing_regulator_key_outer {
    stroke: var(--alignvu-green);
    fill: transparent;
}

circle.missing_datafeed_key, text.missing_datafeed, rect.missing_datafeed, .sub_source rect.missing_regulator {
    fill: var(--alignvu-red-tint);
}

rect.missing_datafeed:hover, rect.missing_datafeed_hover, .sub_source rect.missing_regulator:hover, .sub_source rect.missing_regulator_hover {
    fill: #E67C7C;
}

circle.missing_datafeed_key_outer {
    stroke: var(--alignvu-red-tint);
    fill: transparent;
}

circle.out_of_scope_key, text.out_of_scope, rect.out_of_scope {
    fill: #E0E0E0;
}

circle.out_of_scope_key_outer {
    stroke: #E0E0E0;
    fill: transparent;
}

circle.added_key, text.added {
    fill: var(--alignvu-green);
}

circle.added_key_outer {
    stroke: var(--alignvu-green);
    fill: transparent;
}

circle.changed_key, text.changed {
    fill: var(--alignvu-changed);
}

circle.changed_key_outer {
    stroke: var(--alignvu-changed);
    fill: transparent;
}

circle.deleted_key, text.deleted {
    fill: var(--alignvu-red-tint);
}

circle.deleted_key_outer {
    stroke: var(--alignvu-red-tint);
    fill: transparent;
}

svg .label {
    fill: var(--alignvu-white);
    z-index: 2;
    font-size: 10px;
}

/*
	MODALS
*/

.modal {
    position: fixed;
    float: left;
    z-index: 10002;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 0;
    padding-bottom: calc(100% - 260px);
    background-color: #000000;
    opacity: 0.2;

}

/*
	DATE PICKER
*/
#ui-datepicker-div {
    background-color: var(--alignvu-white);
    text-decoration: none;
    font-size: 12px;
    color: var(--alignvu-text);
    float: left;
    position: absolute;
    display: block;
    border-radius: 5px;
}

.ui-datepicker-trigger {
    width: 18px;
    position: relative;
    top: 3px;
}

.ui-datepicker-trigger:hover {
    cursor: pointer;
}

.ui-datepicker-prev {
    float: left;
    padding-top: 10px;
    padding-left: 20px;
}

.ui-datepicker-next {
    float: right;
    padding-top: 10px;
    padding-right: 20px;
}

.ui-datepicker-prev:hover, .ui-datepicker-next:hover {
    cursor: pointer;
}

.ui-datepicker-title {
    width: 80%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding-top: 10px;
}

#ui-datepicker-div table {
    margin: 10px;
}

#ui-datepicker-div td, #ui-datepicker-div th {
    text-align: center;
    vertical-align: middle;
    padding: 10px;
    border-radius: 3px;
}

#ui-datepicker-div td a {
    text-decoration: none;
    color: var(--alignvu-text);
}

#ui-datepicker-div td:hover {
    cursor: pointer;
    background-color: var(--alignvu-link-hover);
}

#ui-datepicker-div td.ui-datepicker-current-day {
    background-color: var(--alignvu-alignify-grey);
    box-shadow: 0 0 5px rgba(151, 151, 151, 0.5);
}

#ui-datepicker-div td.ui-datepicker-current-day a {
    color: var(--alignvu-white);
}

#ui-datepicker-div td.ui-datepicker-current-day:hover {
    background-color: var(--alignvu-mid-grey);
}

/*
	LOGIN
*/

.login-overlay .login-boxes {
    display: flex;
    grid-gap: 1em;
    width: 100%;
    justify-content: center;
}

.login-overlay .login-boxes .login-box-grid {
    display: grid;
    grid-gap: 5px;
    min-width: 150px;
    max-width: 250px;
    width: 100%;
    justify-items: center;
}

.login-overlay .login-boxes .login-box-grid h1,
.login-overlay .login-boxes .login-box-grid h2 {
    margin: 0;
    padding: 0;
}

.login-overlay .login-boxes .login-box-grid svg {
    width: 100%;
}

.login-overlay .login-boxes .login-box-grid .login-box-subtext {
    display: grid;
    justify-items: center;
}

.login-card img {
    margin: 0 auto;
    display: block;
}

.login-overlay {
    top: 0;
    left: 0;
    z-index: 10003;
    background-color: var(--alignvu-background);
    display: flex;
    /* justify-content: center; */
    align-items: center;
    flex-direction: column;
    grid-gap: 2em;
    padding: 2em;
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    position: fixed;
}

.login-overlay .login-container {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-card {
    box-sizing: border-box;
    max-width: 30vw;
    min-width: 330px;
    width: 100%;
    padding: 40px 40px;
    background-color: #fff;
    box-shadow: 0px 0px 20px 0px rgba(151, 151, 151, 0.07);
    border-radius: 4px;
}

#login-form .mapping-form-button-colored,
#mfa-form .mapping-form-button-colored {
    width: 100%;
}

.mapping-form-button-colored.head-nav-search-btn {
    width: 130px;
    margin-left: 5px;
}

#login-form .login-form-options,
#mfa-form .login-form-options {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #e4e6e8;
    margin-top: 20px;
    padding-top: 14px;
}

#login-form .login-form-options label,
#mfa-form .login-form-options label {
    color: #999999;
    display: flex;
}

#login-form a,
#mfa-form a {
    color: var(--alignvu-alignify-grey);
}

#login-form .login-form-options label,
#login-form a,
#login-form .login-error,
#mfa-form .login-form-options label,
#mfa-form a,
#mfa-form .login-error {
    font-size: 14px;
}

#mfa-form .auth-text {
    font-size: 14px;
    text-align: center;
}

#mfa-form .mfa-buttons .mapping-form-button-colored {
    margin-bottom: 5px;
}

#login-form small {
    text-align: center;
    margin: 20px auto;
    display: flex;
}

#login-form .login-error,
#mfa-form .login-error {
    color: var(--alignvu-red);
    text-align: center;
}

/* END:Login Overlay */

/*
Original Preloader CSS
.preloader-component {
	height: 500px;
	width: 500px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	flex-direction: column;
}

.preloader-component {
	height: 90vh;
}*/

.preloader-component {
    position: fixed;
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 10002;
}

#change-password-modal .password-msg {
    color: var(--alignvu-red-tint);
    text-align: center;
    font-size: 14px;
}

.border-datafeed-separator {
    border-color: #a9a9a9 !important;
    margin: 1em 0 !important;
}

.scrollToTop {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 999;
    background-color: #d7d7d7;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    cursor: pointer;
}

.scrollToTop img {
    transform: rotate(90deg);
    width: 16px;
}

/* START: Vendor Filter Menu  */

.vendor-filter-menu {
    height: max-content;
    position: fixed;
    left: 0;
    top: 0;
    margin-left: 270px;
    margin-top: 110px;
    /* background:white; */
    z-index: 9998;
}

.vendor-filter-menu .filterMenuOpenContainer {
    display: flex;
    grid-gap: 5px;
    align-items: center;
}

.vendor-filter-menu .filterMenuOpenContainer .selectedVendors {
    height: fit-content;
    display: flex;
    grid-gap: 5px;
    background-color: var(--alignvu-white);
    padding: 2px;
}

.vendor-filter-menu .filterMenuOpenContainer .selectedVendors:empty {
    display: none;
}

.vendor-filter-menu .filterMenuOpenContainer .selectedVendors p {
    display: flex;
    flex-direction: column;
}

.vendor-filter-menu .filterMenuOpenContainer .selectedVendors .source-container {
    display: flex;
    grid-gap: 5px;
}

.vendor-filter-menu .vendor-filter-menu-container {
    width: 300px;
    padding: 5px;
    border-radius: 10px;
    border: 1px solid var(--alignvu-alignify-grey);
    background: white;
}

.vendor-filter-menu .source-filter-menu-toggle-button {
    width: 20px !important;
    height: 20px !important;
    padding: 5px;
    text-align: center;
    background: white;
}

.vendor-filter-menu h1.selection-heading {
    color: var(--alignvu-alignify-grey);
    padding: 0;
    margin: 0;
}

.vendor-filter-menu h2.source-type[onclick] {
    cursor: pointer;
}

.vendor-filter-menu h2.source-type {
    font-weight: bold;
    padding: 0;
    margin: 0;
    width: 100%;
    /* width: fit-content; */
    display: flex;
    justify-content: space-between;
}

.vendor-filter-menu p.source-type[onclick] {
    cursor: pointer;
}

.vendor-filter-menu .source-type-container[data-type="Consolidation"] p.source-type {
    font-style: italic;
}

.vendor-filter-menu .source-type-container p.source-type {
    font-weight: bold;
    padding: 0;
    margin: 0;
    /* width: fit-content; */
    font-style: italic;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.vendor-filter-menu .source-selection .source-type-container {
    display: grid;
}

.vendor-filter-menu .source-selection .sources-container.jurisdiction {
    width: 200px;
}

.vendor-filter-menu .source-selection .sources-container.jurisdiction .sources-container:first-of-type {
    left: 198px;
}

.vendor-filter-menu .source-selection .sources-container.jurisdiction .sources-container .sources-container {
    left: 198px;
}

.vendor-filter-menu .source-selection .sources-container.group.categories,
.vendor-filter-menu .source-selection .sources-container.group.datafeedtype {
    left: 310px;
}

.vendor-filter-menu .source-selection .sources-container.group {
    left: 198px;
}

.vendor-filter-menu .source-selection .sources-container {
    /* max-height:30vh; */
    /* overflow:scroll; */
    display: flex;
    grid-gap: 0.2em;
    flex-direction: column;
    /* margin-top: 5px; */
    position: absolute;
    left: 198px;
    width: 200px;
    background: white;
    padding: 5px 0.5em;
    border-radius: 10px;
    border: 1px solid var(--alignvu-alignify-grey);
    display: inline-grid;
    box-sizing: border-box;
    top: 0;
}

.vendor-filter-menu .sources-main-container {
    max-height: calc(100vh - 200px);
    overflow: scroll;
    padding: 0.5em;
    display: flex;
    flex-direction: column;
    grid-gap: 20px;
    height: 100%;
}

.vendor-filter-menu .mapping-form-button-colored {
    width: 130px
}

.vendor-filter-menu .selection-sources {
    display: flex;
    grid-gap: 5px;
    flex-direction: column;
}

.vendor-filter-menu .source-container,
.vendor-filter-menu .source-type-container[onclick] {
    display: flex;
    align-items: start;
    padding: 5px;
}

.vendor-filter-menu .source-container.deselectsource {
    align-items: center;
    grid-gap: 2px;
    justify-content: space-between;
}

.source-container.deselectsource {
}

.vendor-filter-menu .source-container[onclick].disabled {
    pointer-events: none;
    color: var(--alignvu-light-grey);
}


.head-nav .module-container .selectedVendors .source-container[onclick]:hover,
.vendor-filter-menu .source-container[onclick].disabled,
.vendor-filter-menu .source-container[onclick].selected,
.vendor-filter-menu .source-container[onclick]:hover,
.vendor-filter-menu .source-type-container[onclick].selected,
.vendor-filter-menu .source-type-container[onclick]:hover{
    background-color: var(--alignvu-pale-grey);
}

.head-nav .module-container .selectedVendors .source-container {
    border: 1px solid var(--alignvu-alignify-grey);
    padding: 2px;
}

.head-nav .module-container .selectedVendors .source-container[onclick],
.vendor-filter-menu .source-container[onclick],
.vendor-filter-menu .source-type-container[onclick] {
    cursor: pointer;
    border-radius: 5px;
}

.vendor-filter-menu .source-container p {
    margin: 0;
    padding: 0;
}

.vendor-filter-menu .source-container .radio-check-option {
    width: 100%;
    justify-self: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none !important;
    border-radius: 3px;
    font-weight: lighter;
    cursor: pointer;
}

.vendor-filter-menu .source-container .radio-check-option {
    color: var(--alignvu-alignify-grey);
    border: none !important;
    padding-top: 2px;
}

.vendor-filter-menu .source-container .radio-check-option:hover {
    background-color: unset !important;
    color: var(--alignvu-link-hover) !important;
}

.vendor-filter-menu p.toggleCheckAllFilterSecondaries {
    margin: 0 !important;
    font-style: italic;
}

.vendor-filter-menu .vendor-filter-menu-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    flex-direction: column;
}

.vendor-filter-menu .filter-menu-comparable-container.toggle {
    margin-left: auto;
}

/* END: Vendor Filter Menu  */

.select2-container {
    z-index: 999999;
}

.tooltipContainer {
    position: relative;
}

.tooltipContainer:hover .tooltip {
    display: block;
}

.tooltipContainer .tooltip {
    display: none;
    position: absolute;
    left: 0;
    bottom: 10px;
    font-size: 11px;
    background-color: white;
    color: var(--alignvu-alignify-grey);
    line-height: 20px;
    white-space: nowrap;
    padding: 0 5px;
    border: 1px solid #f1f1f1;
    border-radius: 3px;
    box-sizing: border-box;
    font-weight: normal;
    z-index: 10;
    box-shadow: 0px 0px 10px #c9c9c963;
}

/* UI Maintenance Modal */
#ui-application-maintenance-modal .modal-content {
    max-width: 70%;
    width: 100vw;
    height: 100vh;
    grid-gap: 0;
}

#ui-application-maintenance-modal .modal-content .tab {
    margin: 5px 0;
}

#ui-application-maintenance-modal .modal-body {
    margin-top: 10px;
}

#ui-application-maintenance-modal table tr td,
#ui-application-maintenance-modal table tr,
#ui-application-maintenance-modal table {
    border-collapse: collapse;
}

#ui-application-maintenance-modal table tr th {
    white-space: nowrap;
    text-align: left;
    min-width: 100px;
}

#ui-application-maintenance-modal table tr th:first-child {
    min-width: unset;
}

#ui-application-maintenance-modal table tr th:last-child {
    min-width: unset;
}

#ui-application-maintenance-modal table tr th,
#ui-application-maintenance-modal table tr td {
    padding: 2px 10px 2px 0;
}

#ui-application-maintenance-modal table tr.bold-text td {
    font-weight: bold;
}

#ui-application-maintenance-modal [onclick] {
    cursor: pointer;
}

.navigation .nav-footer p {
    margin: 0;
}

.navigation .nav-footer [onclick] {
    font-weight: bold;
    text-decoration: underline;
    text-decoration-style: dotted;
    cursor: pointer;
}

.navigation .nav-footer .release-notes {
    margin-bottom: 20px;
}

.flex-col {
    display: flex;
    flex-direction: column;
    grid-gap: 2px;
}

.flex-row {
    display: flex;
    grid-gap: 1em;
}

.justify-right {
    justify-content:end;
}

.grid-2-col {
    display:grid;
    grid-gap:1em;
    grid-template-columns:repeat(2, 1fr);
}

.small-text-notice[onclick] {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
}

/* Text Badges */
.text-badge {
    font-weight: bold;
    font-size: 11px;
    padding: 4px;
    background: var(--alignvu-alignify-grey);
    color: white;
    height:fit-content;
    width:fit-content;
    border-radius:5px;
}

.tooltip-parent {
    position: relative;
}

.tooltip-parent:hover p.tooltip {
    display: block;
}

.tooltip-parent p.tooltip {
    display: none;
    position: absolute;
    right: 0px;
    bottom: 35px;
    font-size: 11px;
    background-color: white;
    color: var(--alignvu-alignify-grey);
    line-height: 20px;
    white-space: nowrap;
    padding: 0 5px;
    border: 1px solid #f1f1f1;
    border-radius: 3px;
    box-sizing: border-box;
    font-weight: normal;
    box-shadow: 0px 0px 10px #c9c9c963;
    z-index: 5;
}