/* This font import does not work */
/* @import url('https://cloud.typography.com/6899754/6763032/css/fonts.css'); */

:root {
  --color-phaseone-cyan: #00AFFC;
  --color-phaseone-cyan-light: #24bcff;

  --color-phaseone-black: #000000;
  --color-phaseone-grey-dark: #383838;
  --color-phaseone-grey-medium: #808285;
  --color-phaseone-grey-light: #B9BABC;

  --color-phaseone-white: #FFFFFF;
  --color-phaseone-off-white-dark: #EBEAE8;
  --color-phaseone-off-white-light: #F6F5F2;

  --border-radius-small: 4px;

  /* inser font CSS to the HTML Head section! */
  --font-phaseone: Gotham, "Gotham SSm A", "Gotham SSm B", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

::placeholder {
    color: var(--color-phaseone-grey-light) !important;
}

* {
    font-family: var(--font-phaseone);
}

html, body {
    height: 100%;
    margin: 0;
    font-weight: 300;
}

body {
    display: flex;
    flex-direction: column;
    
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{
    font-family: var(--font-phaseone);
    font-weight: 200;
    text-transform: uppercase;
}

a {
    color: var(--color-phaseone-grey-medium);
}

a:hover {
    text-decoration: none;
}

a:focus {
    outline: none;
    text-decoration: none;
}

a, p, em, i {
    font-weight: 300;
}

.footer-pushdown {
    /* stick footer to the bottom of the page */
    flex: 1 0 auto;
}

.knowledge-article-content a {
    color: var(--color-phaseone-cyan);
}

.knowledge-article-content a:hover {
    color: var(--color-phaseone-cyan-light);
}

.knowledge-article-keywords {
    font-style: italic;
}

.alert {
    border-radius: var(--border-radius-small);
}

table {
    border-color: var(--color-phaseone-cyan);
}

li {
    display: list-item;
    text-align: match-parent;
}

/* Extend Bootstrap 3 with Bootstrap 5 attributes */
.d-flex {
    display: flex;
}

.justify-content-between {
    justify-content: space-between;
}

.align-items-center {
    align-items: center;
}

.justify-content-xl-between {
    justify-content: space-between;
}

.p-0 {
    padding: 0;
}
/* ---------------------------------------------- */

.navbar {
    border: none;
    margin: 0;

    position: fixed;
    top: 0;
    width: 100%;

    display: flex;
    align-items: center;
}

.navbar-toggle .icon-bar,
.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus
{
    border: 1px solid var(--color-phaseone-grey-light);
    background-color: transparent;
}

.navbar-brand {
    text-transform: uppercase;
    font-weight: 700;
}

.navbar-brand img {
    height: 1em !important;
    width: auto !important;
    background-color: transparent !important;
}

.navbar-inverse .navbar-nav>li>a {
    color: var(--color-phaseone-grey-medium);
}

.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus {
    color: var(--color-phaseone-cyan);
}

.navbar-inverse .navbar-toggle, .navbar-collapse {
    border: none;
}

.navbar-inverse .navbar-nav>.open>a,
.navbar-inverse .navbar-nav>.open>a:hover,
.navbar-inverse .navbar-nav>.open>a:focus {
    background-color: var(--color-phaseone-white);
    color: var(--color-phaseone-grey-medium);
}


.navbar-nav>li>.dropdown-menu {
    border-radius: var(--border-radius-small);
}

.navbar-nav>li>a, .btn {
    text-transform: uppercase;
}

.section-landing {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("homehero.jpg") no-repeat center;
    background-size: cover;

    min-height: 30em;

    display: flex;
    justify-content: center;
    align-items: center;

}

blockquote {
    border-color: var(--color-phaseone-cyan) !important;
}


.section-landing h1, .section-landing h2, .section-landing h3, .section-landing h4, .section-landing h5, .section-landing h6 {
    color: var(--color-phaseone-white);
}

.btn, .form-control, input[type=text] {
    height: 5rem;
    line-height: 5rem;
    border: none;
    box-sizing: border-box;
}

.form-control {
    border-radius: 50px;
    background-color: var(--color-phaseone-off-white-light);
    border: 1px solid transparent;
    box-shadow: none;
    transition: 0.3s;
}

.form-control:focus{
    border: 1px solid var(--color-phaseone-cyan);
    background-color: var(--color-phaseone-white);
    box-shadow: none;
    transition: 0.3s;
}

textarea {
    border-radius: var(--border-radius-small) !important;
}

.btn {
    border-radius: 50px;

    padding: 0 2em;

    background-color: var(--color-phaseone-cyan);
    color: var(--color-phaseone-white);

    font-family: var(--font-phaseone);
    font-weight: 700;
    font-size: 14px;
    
    transition: 0.5s;

    border: none;
}

.btn:hover,
.btn:focus,
.btn.focus, 
.btn-default:focus {
    background-color: var(--color-phaseone-cyan-light);
    color:var(--color-phaseone-white);
    transition: 0.5s;
}

.btn-group>ul {
    padding-inline-start: 0;
}

#search-filter.btn {
    border-radius: 50px 0px 0px 50px;
}

section#gethelp {
    margin: 3em auto 1em auto;
}

section#download-overview {
    background-color: var(--color-phaseone-off-white-light);
    color: var(--color-phaseone-grey-medium);
    padding: 3em 0;
    font-weight: 300;
}

.dropdown-menu {
    box-shadow: 0px 0px 7px 0px rgb(0 0 0 / 20%);
    padding: 0;
}

.dropdown-menu>li>a {
    margin: 0;
    font-weight: 300;
    line-height: 3em;
}

.dropdown-menu, .dropdown-submenu, .dropdown {
    font-weight: 300;
    color: var(--color-phaseone-grey-dark);
    border-radius: var(--border-radius-small);
}

.dropdown-menu>li:first-child, .dropdown-menu>li:first-child>a:focus, .dropdown-menu>li:first-child>a:hover {
    border-top-left-radius: calc(var(--border-radius-small) - 1px);
    border-top-right-radius: calc(var(--border-radius-small) - 1px);
}

.dropdown-menu>li:last-child, .dropdown-menu>li:last-child>a:focus, .dropdown-menu>li:last-child>a:hover {
    border-bottom-left-radius: calc(var(--border-radius-small) - 1px);
    border-bottom-right-radius: calc(var(--border-radius-small) - 1px);
}


.dropdown-menu>.active>a,
.dropdown-menu>.active>a:hover,
.dropdown-menu>.active>a:focus
{
    color: var(--color-phaseone-white);
    text-decoration: none;
    outline: 0;
    background-color: var(--color-phaseone-cyan);
}

.page_section {
    margin: 0 0 1em 0;
}

footer {
    margin-top: 3em;
    padding: 1em 0;
    background-color: var(--color-phaseone-white);
    border-top: 1px solid var(--color-phaseone-off-white-light);
    color: var(--color-phaseone-black);
    
    flex-shrink: 0;
    font-weight: 300;
}

footer img {
    height: 1.5em;
}

.text-primary {
    color: var(--color-phaseone-cyan);
}

.dropdown-menu>li:focus,
.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a,
.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a:focus {
    background-color: var(--color-phaseone-cyan) !important;
    color:var(--color-phaseone-white) !important;
}

.section-diagonal-right-content.btn {
    margin: 1em 0;
}

.panel-title {
    color: var(--color-phaseone-cyan);
    font-weight: 500;
    text-transform: uppercase;
}

.panel, .panel-title, .panel-deafult, .panel-default>.panel-heading {
    border: none;
    background-color: transparent;
    box-shadow: none;
}


.input-group-btn {
    vertical-align: top;
    padding: 0 !important;
}


.dropdown-search {
    width: 50vw;
    max-width: 60em;
}

.form-search {
    padding: 1em;
}

.well {
    border-radius: var(--border-radius-small);
    background-color: var(--color-phaseone-off-white-light);
}

.well>img {
    border-radius: 50%;
}

select#search_sort_options {
    padding: 0.5em 1em;
    border-color: var(--color-phaseone-cyan);
    border-radius: var(--border-radius-small);
}

.list-group-item {
    /* border: solid 1px var(--color-phaseone-cyan); */
    border: none;
}

a.list-group-item:hover, a.list-group-item:focus, button.list-group-item:hover, button.list-group-item:focus {
    text-decoration: none;
    background-color: transparent;
    color: var(--color-phaseone-cyan);
}

a.list-group-item, button.list-group-item {
    /* color: var(--color-phaseone-cyan); */
    font-weight: 300;
    /* text-transform: uppercase; */

}

.footer-links>* {
    margin: 0 2em;
}

#download-overview h3 {
    text-transform: capitalize;
    margin-top: 0;
    font-weight: 300;
}

.col {
    margin: 2em 0;
}


/* Extra Small */
@media (max-width:575px) { 

}


/*  Small */
@media (max-width:767px) {
    .flex-sm-column { 
        flex-direction: column;
    }

    .col {
        margin: 1em 0;
    }

    section#gethelp {
        margin: 2em auto 0em auto;
    }

    .search-order {
        float: none !important;
    }

    select#search_sort_options {
        width: 100%;
        padding: 1.5em;
    }

    .footer-links>*, .footer-logo {
        margin: 1em 0;
    }

}

/* Medium */
@media(max-width:991px) {
    .footer-logo {
        margin: 1em 0;
    }

    .flex-md-column {
        flex-direction: column;
    }
}

/* Large */
@media(max-width:1199px) {
    .container {
        margin: auto;
        width: 100%;
    }

    .justify-content-lg-between {
        justify-content: space-between;
    }

    .navbar>.container {
        display: block;
    }

    .navbar-nav .form-search .open .dropdown-menu {
        box-shadow: 0px 0px 7px 0px rgb(0 0 0 / 20%);
    }
    
    .navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu>li>a:focus {
        color: var(--color-phaseone-cyan);
        background-color: transparent;
    }

}


/* Power Virtual Agent styles */
.pva-floating-style {
  position: fixed;
  bottom: 0px;
  right: 0px;
  margin-right: 16px;
  margin-bottom: 18px;
  z-index: 9999;
}

html[dir="rtl"] .pva-floating-style {
  position: fixed;
  bottom: 0px;
  left: 0px;
  margin-left: 16px;
  margin-bottom: 18px;
  z-index: 9999;
}
/* Power Virtual Agent styles ends */