/*
Theme Name: Foundation 2
Template: Impreza
Author: de Novo Alternative Marketing
Author URI: https://www.thinkdenovo.com
Version: 1.1501530433
Updated: 2017-07-31 19:47:13

*/

/* Custom F2 theme for Five9 chat integration w/ Assistance from YLI */

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700');
html body {
    font-family: 'Roboto', sans-serif !important;
    background-color: #afc080!important;
    width: 100%;
    height: 100% !important;
}

/* Page wrapper for different page types */
div[role="main"] .ui-page {
    width: fit-content;
    min-width: 600px;
    height: 100%;
    max-height: 90%;
    margin: 0;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #ffffff;
    border-bottom: 10px solid #001c83;
    max-width: 800px;
    min-height: unset !important;
}

@media screen and (max-width: 671px) {
    div[role="main"] .ui-page {
        width: 100%;
        min-width: unset;
        height: 100%;
        max-height: unset;
        max-width: unset;
    }
}

/* Header */
div[role="main"] .ui-page .ui-header {
    position: unset;
    position: sticky;
    top: 0;
    z-index: 999;
    background-color: #ffffff;
}

div[role="main"] .ui-page .ui-header .fill-logo {
    height: unset;
}

div[role="main"] .ui-page .ui-header .fill-logo h1 {
    font-weight: 700;
    word-spacing: 0.07em;
    line-height: 1.3;
    margin: 0 !important;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
}

div[role="main"] .ui-page .ui-header .fill-logo h1::after {
    content: "";
    font-size: 1rem;
    font-weight: 400;
    margin-left: 15px;
}

div[role="main"] .ui-page .ui-header .fill-logo h1 img {
    display: block;
}

/* Content */
div[role="main"] .ui-page .ui-content {
    position: unset;
}

div[role="main"] .ui-page .ui-content #name-form-control label::after,
div[role="main"] .ui-page .ui-content label[for="Zip Code"]::after,
div[role="main"] .ui-page .ui-content #question-form-control label::after {
    content: "*";
    color: red;
}

div[role="main"] .ui-page .ui-content #TC-form-control {
    display: none;
}

div[role="main"] .ui-page .ui-content #question-form-control::before {
    content: "How may I help you today?";
    font-size: 14px !important;
}

div[role="main"] .ui-page .ui-content #question-form-control #question-label {
    visibility: hidden;
    width: 1px;
}

div[role="main"] .ui-page .ui-content #question-form-control #question-label::before {
    content: "*";
    color: red;
    visibility: visible;
    margin-left: -4px;
}

div[role="main"] .ui-page .ui-content textarea,
div[role="main"] .ui-page .ui-content input {
    background-color: transparent;
    font-family: Roboto !important;
    font-size: 14px !important;
}

div[role="main"] .ui-page#information-page .ui-content::before {
    content: 'Welcome to the Foundation 2 Chat. Please complete the form below and click "Start Chat".';
}

/* Footer */
div[role="main"] .ui-page .ui-footer {
    position: unset;
    display: flex;
    flex-direction: column;
}

div[role="main"] .ui-page .ui-footer #start-chat-button {
    background-color: #001c83;
    position: relative;
    font-size: 1.15rem !important;
    line-height: 1.6rem;
    color: white;
    font-family: 'Roboto';
}

.ui-popup {
    max-width: 290px;
    border-radius: 5px !important;
    border: none !important;
    font-size: 20px !important;
    font-weight: normal !important;
    background: #ffffff !important;
}

div[role="main"] .ui-page .ui-footer .provider {
    position: unset;
}
 .five9-chat-button {
  font-size: 24px !important;
  }
  .five9-chat-button:after {
  content: "" !important;
  }
  #five9-popout-button {
	  float: right;}