:root {
    /* Colors */
    --background-post-connect-blue: #D3F5F6;
    --background-post-connect-light-blue: #EFF9FA;
    --background-connect-grey: #464c55;
}


.navbar-brand {
    color: white !important;
}

.back-btn {
    padding-top: 7.5px;
    padding-bottom: 0;
}

.back-btn img {
    max-width: 30px;
}

.brand-title {
    display: None;
    padding-left: 0;
}

body {
    background-color: white;
    font-family: Din;
}


/*
  Custom Navbar
  (https://work.smarchal.com/twbscolor/scss/2c927e288371ecf0f1aebbb90)
*/
.navbar-default {
    /* offset-x, offset-y, blur-radius, spread-radius */
    font-family: "Adelle";
    /* the rest of your styling */
}

.navbar-default {
    background-color: #464c55;
    border-color: #585e66;
}
.navbar-default .navbar-brand {
    color: #ffffff;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: #eff9fa;
}
.navbar-default .navbar-text {
    color: #ffffff;
}
.navbar-default .navbar-nav > li > a {
    color: #ffffff;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #eff9fa;
}
.navbar-default .navbar-nav > li > .dropdown-menu {
    background-color: #464c55;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a {
    color: #ffffff;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:focus {
    color: #eff9fa;
    background-color: #585e66;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li.divider {
    background-color: #585e66;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #eff9fa;
    background-color: #585e66;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #eff9fa;
    background-color: #585e66;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    color: #eff9fa;
    background-color: #585e66;
}
.navbar-default .navbar-toggle {
    border-color: #585e66;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #585e66;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #ffffff;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
    border-color: #ffffff;
}
.navbar-default .navbar-link {
    color: #ffffff;
}
.navbar-default .navbar-link:hover {
    color: #eff9fa;
}

@media (max-width: 767px) {
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #ffffff;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #eff9fa;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #eff9fa;
    background-color: #585e66;
    }

    .brand-title {
        display: block;
    }
}

.step-done path{
    fill: #75d4d6;
}

.step-warning path {
    fill: #fdd941;
}

.inline-block {
    display: inline-block;
    vertical-align: middle;
    float: none;
}


/*
 * MX Connect Widget
 */
#mx-connect-widget {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}

#mx-container {
    padding-top: 40px;
    width: 100%;
    height: 100%;  // TODO-MX: Can make this a calc(100%-40px);
}

#mx-header {
    height: 30px;
    width: 100%;
    position: absolute;
    top: 10;
    left: 0;
}

#mx-close-btn {
    position: absolute;
    top: 0;
    right: 10;
    background-color: white;
    border: none;
}

#mx-close-btn:active {
  transform: translateY(2px);
}

.centered {
    position: fixed;
    left: 50%;
    transform: translate(-50%, -50%);
}

.centered-div {
    text-align: center
}

.light-blue-bg {
    background-color: #eff9fa;
}

.office-teal-bg {
    background-color: #75d4d6;
}

.connect-grey-bg {
    background-color: var(--background-connect-grey);
}

.postconnect-blue-bg {
    background-color: var(--background-post-connect-blue);
}

.postconnect-light-blue-bg {
    background-color: var(--background-post-connect-light-blue);
}

/*
 * Style used by CharlieButton to color the actions based on their types
 */

.white-text {
    color: white;
}

.blue-sky-text {
    color: #99E0E3;
}

.dark-text {
    color: #282f3a;
}

.danger-text {
    color: #EB3A3A;
}

/* Container for centered text at the bottom of the page (used in Post Connect and Connect App) */ 
.footer-container {
    bottom: 0;
    position: fixed;
    text-align: center;
    left: 50%;
    transform: translate(-50%, 0);
    width: 100%;
    max-width: 500px;
}