:root {
    --buttonFontColor: #005EA2;
    --buttonBackgroundColor: white;
    --buttonBorderColor: #005EA2;
    --buttonFocusBackgroundColor: #005EA2;
    --buttonFocusBorderColor: #0076fe;
    --buttonFocusFontColor: white;
    --buttonHoverBackgroundColor: #005EA2;
    --buttonHoverBorderColor: white;
    --buttonHoverFontColor: white;
    --popupCloseButtonColor: #0186D0;
    --popupCloseButtonFocusColor: #fedb7d;
    --popupCloseButtonHoverColor: #0186D0;
    --popupHeaderFontColor: black;
    --titleTextFontColor: black;
    --buttonChatOpenDialogWidth: 75px;
    --buttonChatOpenDialogHeight: 64px;
    --buttonChatOpenDialogBorderRadius: 0;
    --buttonChatOpenDialogBackgroundColor: #FFBE2E;
    --qtrendPopupML: -420px;
    --qtrendPopupMT: -750px;
    --BubbleButtonColor: black;
    --BubbleButtonBackground: rgb(211, 222, 235);
    --qPopupML: -420px;
    --qPopupMT: -100px;
    --canvasPosition: fixed;
    --canvasRight: 0px;
    --offCanvasBottom: 0px !important;
}

.bubble-container.active .sponsor-text {
    display: none;
    visibility: hidden;
}

.bubble-container.active .feedback-text {
    text-align: right;
    font-family: 'Lato', sans-serif;
    font-size: 0.8em;
    color: white;
    text-decoration: none;
}

.bubble-container.active .feedback-text-clicked {
    text-align: right;
    font-family: 'Lato', sans-serif;
    font-size: 1.3em;
    text-decoration: none;
}

.bubble-container.active .lang-label {
    visibility: hidden;
    font-size: 0.01em;
}

.heading-button:hover {
    background: var(--buttonHoverBackgroundColor);
    color: var(--buttonHoverFontColor);
    border: 2px solid var(--buttonHoverBorderColor);
}

.heading-button:focus {
    background: var(--buttonFocusBackgroundColor);
    border-color: var(--buttonFocusBorderColor);
    color: var(--buttonFocusFontColor);
    border-style: double;
    border-width: 2px;
}

.heading-button {
    position: absolute;
    text-align: center;
    top: 64px;
    left: 0px; /*use jquery to set left position*/
    font-family: 'Lato', sans-serif;
    max-height: 40px;
    height: 40px;
    cursor: pointer;
    max-width: 120px;
    width: 30%;
    color: var(--buttonFontColor);
    border: 2px solid var(--buttonBorderColor);
    background: var(--buttonBackgroundColor);
    font-size: 14px;
    line-height: 1;
    padding: 10px 3px;
    outline: none !important;
    -webkit-transition: background .2s ease;
    -webkit-appearance: none;
    transition: background .2s ease;
}

/** ALL QUESTIONS POP UP**/

.qPopup {
    display: none;
    /*border-radius: 10px;*/
    border: 2px solid var(--buttonBorderColor);
    position: absolute;
    background: white;
    top: 26.4%;
    left: 60%;
    width: 320px;
    height: 185px;
    margin-top: -100px; /* negative half of height above */
    padding: 10px;
    -webkit-appearance: none;
}

.qPopup-small {
    display: none;
    /*border-radius: 10px;*/
    border: 2px solid var(--buttonBorderColor);
    position: fixed;
    background: white;
    top: 30%;
    left: 48%;
    width: 315px;
    height: 255px;
    margin-left: -150px; /* negative half of width above */
    margin-top: -125px; /* negative half of height above */
    border-color: rgb(21, 53, 84);
    border-style: solid;
    border-width: 1px;
    padding: 10px;
}

.qPopup-btn-close {
    position: absolute;
    text-align: center;
    top: 5px;
    right: 10px;
    font-family: 'Lato', sans-serif;
    color: var(--popupCloseButtonColor);
    font-size: 16px;
    background: transparent;
    max-height: 25px;
    height: 25px;
    padding: 3px 7px 3px 7px;
    cursor: pointer;
    border-radius: 5px;
    border: none;
    -webkit-appearance: none;
}

    .qPopup-btn-close:hover {
        color: var(--popupCloseButtonHoverColor);
        border-style: double;
        border-width: 2px;
    }

    .qPopup-btn-close:focus {
        color: var(--popupCloseButtonFocusColor);
        border-style: double;
        border-width: 2px;
    }

.qPopup-lbl-intro {
    font-family: 'Lato', sans-serif;
    color: black;
    font-size: 16px;
    font-weight: normal !important;
}

.qPopup-lbl-intro-header {
    text-align: center;
    font-family: 'Lato', sans-serif;
    color: var(--popupHeaderFontColor);
    font-size: 16px;
    font-weight: bold;
}

.question-select {
    text-align: left;
    font-family: 'Lato', sans-serif;
    color: black;
    border-width: 1px;
    font-size: 16px;
    text-decoration: none;
    height: 34px;
    max-height: 34px;
    width: 230px;
    /*border-radius: 10px;*/
    border-color: #adadad;
    -webkit-appearance: none;
}

.question-select-go-btn {
    font-family: 'Lato', sans-serif;
    color: white;
    font-size: 16px;
    background: #005EA2;
    max-height: 30px;
    height: 30px;
    width: 55px;
    max-width: 55px;
    cursor: pointer;
    text-align: center;
    /*border-radius: 5px;*/
    margin-left: 8px;
    border-width: 0;
    -webkit-appearance: none;
}

    .question-select-go-btn:hover {
        background: rgb(242, 199, 131);
    }

    .question-select-go-btn:focus {
        background: #f4ad3b;
        border-color: #fedb7d;
        border-style: double;
        border-width: 2px;
    }

/** END ALL QUESTIONS POP UP**/

/*TREND*/

.qTrendPopup {
    display: none;
    /*border-radius: 10px;*/
    border: 2px solid var(--buttonBorderColor);
    position: absolute;
    background: white;
    top: 26.4%;
    left: 66%;
    width: 350px;
    height: 340px;
    margin-left: -250px; /*negative half of width above*/
    margin-top: -100px; /* negative half of height above */
    padding: 10px;
    -webkit-appearance: none;
}

.qTrendPopup-small {
    display: none;
    /*border-radius: 10px;*/
    border: 2px solid var(--buttonBorderColor);
    position: fixed;
    background: white;
    top: 30%;
    left: 50%;
    width: 300px;
    height: 425px;
    margin-left: -150px; /* negative half of width above */
    margin-top: -125px; /* negative half of height above */
    border-color: #073773;
    border-style: solid;
    border-width: 1px;
    padding: 10px;
}

.qTrendPopup-btn-close {
    position: absolute;
    text-align: center;
    top: 5px;
    right: 10px;
    font-family: 'Lato', sans-serif;
    color: #0186D0;
    font-size: 16px;
    background: transparent;
    max-height: 25px;
    height: 25px;
    padding: 3px 7px 3px 7px;
    cursor: pointer;
    border-radius: 5px;
    border: none;
    -webkit-appearance: none;
}

    .qTrendPopup-btn-close:hover {
        background: rgb(242, 199, 131);
    }

    .qTrendPopup-btn-close:focus {
        background: #f4ad3b;
        border-color: #fedb7d;
        border-style: double;
        border-width: 2px;
    }


.qTrendPopup-btn-q {
    font-family: 'Lato', sans-serif;
    color: #2378C3;
    font-size: 14px;
    background: #F9F9F9;
    max-height: 40px;
    height: 40px;
    cursor: pointer;
    text-align: left;
    border-radius: 5px;
    display: block;
    width: 100%;
    border-width: 0;
    margin: 1px;
    -webkit-appearance: none;
}

    .qTrendPopup-btn-q:hover {
        background: rgb(242, 199, 131);
    }

    .qTrendPopup-btn-q:focus {
        background: #f4ad3b;
        border-color: #fedb7d;
        border-style: double;
        border-width: 2px;
    }

.qTrendPopup-lbl-intro {
    font-family: 'Lato', sans-serif;
    color: black;
    font-size: 16px;
    font-weight: normal !important;
}

.qTrendPopup-lbl-intro-header {
    text-align: center;
    font-family: 'Lato', sans-serif;
    color: black;
    font-size: 16px;
    font-weight: bold;
}
/**END TREND**/
.title-logo {
    position: absolute;
    top: 1px;
    left: 1px;
    right: 0;
    max-height: 55px;
    height: 55px;
    width: 55px;
    max-width: 55px;
}

.title-minimize {
    position: absolute;
    top: 10px;
    left: 390px;
    right: 0;
    max-height: 35px;
    height: 35px;
    width: 35px;
    max-width: 35px;
}

.title-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    font-family: 'Lato', sans-serif;
    max-height: 55px;
    height: 55px;
    background: rgba(0, 0, 0, 0.2);
    text-transform: uppercase;
    text-align: left;
}

.title-bar-small {
    position: absolute;
    text-align: center;
    top: 0;
    left: 0;
    right: 0;
    font-family: 'Lato', sans-serif;
    color: #ffffff;
    background: white; /*#13293E;*/
    max-height: 55px;
    height: 55px;
}

.title-text {
    position: absolute;
    text-align: center;
    top: 10px;
    left: 0;
    right: 0;
    font-family: 'Lato', sans-serif;
    color: var(--titleTextFontColor);
    font-weight: bold;
    font-size: 28px;
    line-height: 36px;
}

.lang-select {
    position: absolute;
    font-family: 'Lato', sans-serif;
    color: #073773;
    right: 10px;
    font-size: 0.6em;
    background: #ffffff;
    max-height: 18px;
    height: 18px;
}

.send-button {
    position: absolute;
    text-align: center;
    bottom: 10px;
    right: 5px;
    border: none;
    background: #005EA2;
    color: white;
    cursor: pointer;
    margin: 1px;
    font-family: "Lato", sans-serif;
    font-size: 16px;
    line-height: 1;
    padding: 6px 10px;
    /*border-radius: 5px;*/
    outline: none !important;
    -webkit-transition: background .2s ease;
    transition: background .2s ease;
    -webkit-appearance: none;
}

    .send-button:hover {
        background: rgb(17, 86, 143);
    }

    .send-button:focus {
        background: #11568f;
        border-color: #0076fe;
        border-style: double;
        border-width: 2px;
    }

.chat-text-length {
    position: absolute;
    bottom: 3.5em;
    left: 0;
    right: 80px;
    font-family: 'Lato', sans-serif;
    color: teal;
    -webkit-box-flex: 0;
    -webkit-flex: 0 1 40px;
    -ms-flex: 0 1 40px;
    flex: 0 1 40px;
    background: white; /*#13293E;*/
    padding: 0px;
    width: 100%;
    /*height: 50px;*/
    border: 0.1em;
    border-radius: 1em;
    text-align: left;
    padding-right: 2em;
}

.input-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 80px;
    font-family: 'Lato', sans-serif;
    color: teal;
    -webkit-box-flex: 0;
    -webkit-flex: 0 1 40px;
    -ms-flex: 0 1 40px;
    flex: 0 1 40px;
    background: white; /*#13293E;*/
    padding: 8px;
    width: 100%;
    height: 50px;
    border: 0.1em solid gray;
}

    .input-wrap textarea {
        font-family: 'Lato', sans-serif;
        background: none;
        border: none;
        outline: none !important;
        resize: none;
        color: black;
        font-size: 16px;
        height: 100%;
        margin: 0;
        width: 82%;
    }

        .input-wrap textarea::-webkit-scrollbar {
            width: 5px;
        }

        .input-wrap textarea::-webkit-scrollbar-track {
            background: #ffffff;
        }

        .input-wrap textarea::-webkit-scrollbar-thumb {
            background: #1b97df;
        }

.bubble.reply-freeform {
    margin: 0;
}

.bubble.reply.reply-freeform.say .bubble-content .bubble-button {
    margin-top: 1px;
    text-align: left;
}

.bubble.reply.say.bubble-hidden {
    margin: 0;
    transform: scale(0);
    height: 0;
}

.btn-default {
    text-align: center !important;
    top: 5px !important;
    right: 10px !important;
    font-family: 'Lato', sans-serif !important;
    color: black !important;
    font-size: 16px !important;
    background: rgb(244, 173, 59) !important;
    max-height: 25px !important;
    height: 25px !important;
    padding: 3px 7px 3px 7px !important;
    cursor: pointer !important;
    border-radius: 5px !important;
    border: none !important;
    -webkit-appearance: none;
}

    .btn-default:hover {
        background: rgb(242, 199, 131) !important;
    }

.modal-header {
    color: white !important;
    background: rgb(11, 95, 165) !important;
}

.close {
    font-size: 29px !important;
    color: white !important;
    font-weight: 100 !important;
    opacity: unset !important;
    text-shadow: unset !important;
    -webkit-appearance: none;
}

.modal-body {
    background: rgb(244, 245, 239) !important;
    color: black !important;
}

.modal-footer {
    background: rgb(244, 245, 239) !important;
}


.chat-button-destroy:focus, .chat-open-dialog:focus {
    outline: none;
}


button.chat-open-dialog {
    z-index: 2147483000;
    position: fixed;
    border: none;
    bottom: 5px;
    right: 5px;
    width: var(--buttonChatOpenDialogWidth);
    height: var(--buttonChatOpenDialogHeight);
    border-radius: var(--buttonChatOpenDialogBorderRadius);
    background: var(--buttonChatOpenDialogBackgroundColor);
    background-size: 28px;
    -webkit-transition: all ease .5s;
    -moz-transition: all ease .5s;
    -ms-transition: all ease .5s;
    -o-transition: all ease .5s;
    transition: all ease .5s;
    cursor: pointer;
    color: #ddeeff;
    font-weight: bold;
    font-size: 14px;
}

    button.chat-open-dialog.active {
        opacity: 0;
        display: none;
        -webkit-transition: all ease .5s;
        -moz-transition: all ease .5s;
        -ms-transition: all ease .5s;
        -o-transition: all ease .5s;
        transition: all ease .5s;
    }

button.chat-button-destroy {
    position: absolute;
    right: 20px;
    width: 45px;
    height: 55px;
    border: none;
    color: #0186D0;
    font-size: 36px;
}

    button.chat-button-destroy.active {
        -moz-transition: all ease .5s;
        -ms-transition: all ease .5s;
        -o-transition: all ease .5s;
        background-size: 14px;
        background: transparent;
        display: block;
        cursor: pointer;
    }

        button.chat-button-destroy.active:hover {
            border-color: rgb(242, 199, 131);
        }

        button.chat-button-destroy.active:focus {
            border-width: 2px;
            border-style: solid;
            border-color: #0076fe;
        }

.vcsc-logo {
    position: absolute;
    top: 1px;
    left: 1px;
    right: 0;
    max-height: 50px;
    height: 50px;
    width: 50px;
    max-width: 50px;
}

.select2-container--bootstrap .select2-search--dropdown .select2-search__field {
    height: auto;
    float: none;
}

.qTrendPopup {
    margin-left: var(--qtrendPopupML);
    margin-top: 0 !important;
    top: 12.1%;
}

.bubble.reply:not(.bubble-picked) .bubble-content .bubble-button:hover,
.bubble.reply .bubble-content .bubble-button.bubble-pick {
    color: var(--BubbleButtonColor);
    background: var(--BubbleButtonBackground);
}

.qPopup {
    margin-left: var(--qPopupML);
    margin-top: var(--qPopupMT);
}

#chat_modal-id.jcc-offcanvas {
    bottom: var(--offCanvasBottom);
    top: 0;
}