/* forked from juji.css */

/* todo: remove unused styling */

@font-face {
    font-family:GothamRounded-Light;
    src:url(../fonts/GothamRounded-Light/GothamRounded-Light.eot) format('embedded-opentype');
    font-weight:400;
    font-style:normal
}

@font-face {
	font-family: GothamRounded-LightItalic;
	src: url(../fonts/GothamRounded-Light/GothamRounded-LightItalic.woff) format('woff');
}

@font-face {
    font-family:GothamRounded-Light;
    src:url(../fonts/GothamRounded-Light/GothamRounded-Light.otf) format('opentype'),url(../fonts/GothamRounded-Light/GothamRounded-Light.woff) format('woff'),url(../fonts/GothamRounded-Light/GothamRounded-Light.ttf) format('truetype'),url(../fonts/GothamRounded-Light/GothamRounded-Light.svg#GothamRounded-Light) format('svg');
    font-weight:400;
    font-style:normal
}

@font-face {
    font-family:GothamRounded-Bold;
    src: url(../fonts/GothamRounded-Light/GothamRounded-Light.otf) format('opentype'), url(../fonts/GothamRounded-Bold/GothamRounded-Bold.woff) format('woff'), url(../fonts/GothamRounded-Light/GothamRounded-Light.ttf) format('truetype');
    font-weight:400;
    font-style:normal
}

@font-face {
    font-family:GothamRounded-Book;
    src:url(../fonts/GothamRounded-Book/GothamRounded-Book.otf) format('opentype'),url(../fonts/GothamRounded-Book/GothamRounded-Book.woff) format('woff'),url(../fonts/GothamRounded-Book/GothamRounded-Book.ttf) format('truetype'),url(../fonts/GothamRounded-Book/GothamRounded-Book.svg#GothamRounded-Book) format('svg');
    font-weight:400;
    font-style:normal
}

@font-face{
    font-family:GothamRounded-Medium;
    src:url(../fonts/GothamRounded-Medium/GothamRounded-Medium.eot) format('embedded-opentype');
    font-weight:400;
    font-style:normal
}

@font-face {
    font-family:GothamRounded-Medium;
    src:url(../fonts/GothamRounded-Medium/GothamRounded-Medium.otf) format('opentype'),url(../fonts/GothamRounded-Book/GothamRounded-Book.woff) format('woff'),url(../fonts/GothamRounded-Medium/GothamRounded-Medium.otf) format('truetype'),url(../fonts/GothamRounded-Medium/GothamRounded-Medium.svg#GothamRounded-Medium) format('svg');
    font-weight:400;
    font-style:normal
}

* {
    box-sizing: border-box;
}

body {
    overflow: hidden;
    /*padding-top: 54px;*/
    /*background-color: #fcfcfc;*/
    font-color: black;
    font-size: 14px;
    font-family:  "GothamRounded-Light";
}

@media (min-width: 992px) {
    body {
      /*  padding-top: 56px;*/
    }
}

h1 {
   font-family:  "GothamRounded-Medium";

}

h2 {
    font-family:  "GothamRounded-Medium";
    font-size: 24px;
}

h3 {
    font-family:  "GothamRounded-Medium";
    font-size: 18px;
}

h4 {
    font-family: "GothamRounded-Book";
    font-size: 16px;
}

a {

    text-decoration: none;
    color:#28BD8B;
}

img {
    max-width: 100%;
    max-height: 100%
}

/*
table {
  border-collapse: separate;
  border-spacing: 50px 0;
}

td {
  padding: 10px 0;
}
*/
.progress-bar {

    background: #28BD8B;

}

.form-label-icon {

    width: 24px;
    height: 24px;
}

/* Focus */
[contenteditable]:focus {
    color: red;
    outline: 0px solid transparent;
}

input:focus {
    outline: 0px solid transparent;
}

textarea:focus {

    outline: 0px solid transparent;
}

/* Juji input radio and checkbox buttons */
input[type='radio'] {
  margin-right: 4px;
}

input[type='checkbox'] {
  margin-right: 4px;
}

input[type='radio']::before {
  content:'';
  display:block;
  width:100%;
  height:100%;
  border-radius:50%;
}

input[type='radio']:checked::before {
    background:  white;
    border: 4px solid  #28BD8B;
}


/* Create a toggle switch object */
.switch {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 15px;
    margin: 0;
}

*.switch input {display:none;}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #E5545B;
    -webkit-transition: .4s;
    transition: .4s;
}

/* Rounded sliders */
.slider.round {
    /* This should be coordinated with the slider size*/
      border-radius: 15px;
}

.slider.round:before {
    border-radius: 50%;
}

/* This is to render the circle toggle */
.slider:before {
    position: absolute;
    content: "";
    height: 15px;
    width: 15px;
    left: 0px;
    bottom: 0px;
    background-color: #EFEBEA;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #28BD8B;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2DB787;
}

input:checked + .slider:before {
    -webkit-transform: translateX(15px);
    -ms-transform: translateX(15px);
    transform: translateX(15px);
}


/*******************************************
 * A set of standard GUIs by Juji styling
 *******************************************/

.juji-gui-form {

    min-width: 260px;
    font-size: 14px;
    font-family: GothamRounded-Light;
}

.juji-brand-form {

    min-width: 260px;
    width: 50%;
    font-size: 14px;
    font-family: GothamRounded-Light;
}

.juji-gui-form label {
    display: inline-block;
    font-size: 14px;
    font-family: GothamRounded-Book;
    color: #000000;
    margin-right: 0.5em;
}

.juji-text-input {

    background: transparent;
    border: none;
    border-bottom: 1px solid #A8A8A8;
    width: 90%;

    margin-top: 10px;
    margin-bottom: 10px;
}


.juji-text-input-box {

    padding-left: 5px;
    padding-right: 5px;
    background: #FFFFFF;
    height: 35px;
    border: none;
}

.juji-date-input {

    border: none;
    border-bottom: 1px solid #A8A8A8;
}

.juji-text-area {

    width: 100%;
    min-height: 200px;

}

.juji-text-input-area {
  display: block;
  height: 20%;
}

.juji-canned-form {
    padding: 5px 10px;
}

.juji-gui-template, .juji-gui-template label {

    font-family: GothamRounded-Light;
    cursor: text;
    color: #A8A8A8;
}


.juji-disabled-form label {

    color: #A8A8A8;
}

.juji-disabled-form input {
    background: #D8D8D8;
}

.juji-dropdown {
    border: none;
    min-width: 100px;
    border-radius: 0px 0px 0px 0px;
    height: 35px;
    background: #FFFFFF;
}

.juji-gui-input-warning {
	position: relative;
	font-size: 12px;
	color: red;
}

.text-warning-border {
  -moz-box-shadow: 0 0 1px 1px #f4463d;
  -webkit-box-shadow: 0 0 1px 1px #f4463d;
  box-shadow: 0 0 1px 1px #f4463d;
}


.juji-name-form .salutation {
    margin-bottom: 10px;
}



.juji-name-form input {
    width: 100%;
}

.juji-dob-form label::before {

    content: "Date of birth";
}

.juji-phone-form label::before {
    content: "Phone";
}

.juji-first-name-input {
    width: 20%;
    margin-left: 10px;
    border: none;
    background: transparent;
    border-bottom: 1px solid #A8A8A8;
}
.juji-email-input {
    width: 30%;
    margin-left: 10px;
    border: none;
    background: transparent;
    border-bottom: 1px solid #A8A8A8;
}

.juji-email-form label::before {
    content: "Email";
}

.juji-gender-form label::before {
    content: "Gender";
}

.juji-gender-form input {
    margin-left: 10px;
}

.juji-age-group-form label::before {
    content: "Age Group";
}

.juji-education-form label::before {
    content: "Education";
}

.juji-race-form label::before {
    content: "Race";
}

.juji-address-form label::before {
    content: "Address";
}

.juji-address-form .second-row {

    margin-top: 10px;
}

.juji-address-form input {
    width: 100%;
}

.juji-fileupload-form label {
    cursor: pointer;
}

.juji-fileupload-form img {

    width: 30px;
    height: 30px;

    vertical-align: middle;


}

.juji-fileupload-form label::before {
    content: "Upload File";
}

.juji-fileupload-form input {
    opacity: 0;
}

/*******************************************
* common properties
********************************************/

.disabled-area
{
    pointer-events: none;
    background: #888888;
    opacity: 0;
}

/* a standard check list with check marks*/
.checklist {

    list-style-type: none;
    margin: 0;
    padding: 0;

    text-align: left;
    font-family: GothamRounded-Medium;
    font-size: 16px;
}

.checklist li {

    position: relative;
    margin-bottom: 30px;
}

.checklist li::before {
    content: "";
    display:inline-block;

    position: absolute;
    width: 25px;
    height: 25px;

     /* Location of the image */
    background-image: url("../img/ui/done.png");
    background-repeat: no-repeat;
    background-size: 25px 25px;

    top: 0px;
    right: calc(100% + 10px);
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.rep-loader{
    margin: auto;
    margin-top: 120px;
    align-content: center;
    border: 12px solid #f3f3f3;
    border-top: 12px solid #3498db;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    -webkit-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
}


/********************************************
* a set of buttons that take text label
*********************************************/

/* Generic button */

button {

    border: none;
    background: transparent;
    text-align: center;
}

button:hover {
    cursor: pointer;
}

button:focus {
    outline: 0px solid transparent;
}

button:select {
    outline: 0px solid transparent;
}

.big-action-btn {

    font-size: 16px;
    font-family: GothamRounded-Medium;
}

.medium-action-btn {

    font-size: 14px;
    font-family: GothamRounded-Book;
}


.selected-btn {
    cursor: none;
    /*color: white;
    background-color: #28BD8B;*/

    color: black;
    background-color: #FFFFFF !important;
}

.selected-btn a {
    pointer-events: none;
    color: white;
    /*background-color: #28BD8B;*/

}

.active-btn {
    /*background-color: white;*/
    cursor: pointer;
}

.active-btn:hover {

    background: #F2F2F2;
}

.attention-required-btn {

    position: relative;
}

.attention-required-btn label::after {

    content: "";

    /* This size is set by the relevant font size */
    width: 15px;
    height: 15px;
    border-radius: 50%;
    /*background-color: #FF555B;*/
    background-color: #DC3C46;

    position: absolute;
    top: calc(50% - 7.5px);
    left: 75%;

}

.disabled-btn {

    border: none;
    font-family: "GothamRounded-Light";
    color: #AFAFAF;
}

.disabled-btn:hover {
    cursor: not-allowed;
}

.text-action-btn {
    padding-top: 10px;
    padding-bottom: 10px;
}

.text-action-btn:hover {
    cursor: pointer;
    color: #28BD8B;
}

/********************************************
* a set of buttons that take an icon image
*********************************************/

.xl-icon-btn {

    width: 150px;
    height: 150px;
}

/* 48x48 */
.big-icon-btn {
    width: 50px;
    height: 50px;
}

/* Small icon button takes an icon image at 24x24 */
.small-icon-btn {
    width:36px;
    height:36px;
}

/* Button button containing text */
.big-btn {

    width:200px;
    height:40px;

    font-size:16px;

    color: black;
    background-color: white;

    border-color: grey;
    border-style: solid;
    border-width: 1px;
    border-radius: 0;

}

.big-btn:hover{
  background-color: #28BD8B;
  color: white;
  border: none;
}

.small-btn{
  font-size:14px;
}

.btn-primary {

    color: black;
    font-size: 14px;
    font-family: GothamRounded-Book;
    border: none !important;

    background: #D2D2D2 !important;
    min-width: 120px;
}

.btn-primary:hover {

    cursor: pointer;
    color: #FFFFFF;
    background: #28BD8B !important;
}


/****************************
 * Basics of a pop-up window
 *************************/

.popup-window-w-background {

    background-size: cover;
    background-image: url(../img/ui/grey-bg.png);
    background-repeat: no-repeat;
}

.popup-window .feedback-area {

    width: 80% !important;
}

/* Defines a popup menu container - can be anything */

.popup-container {

    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.popup-container .popup-menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.popup-container .popup-menu li {
    border-bottom :1px solid #eee;
    line-height: 2.5em !important;
}

.popup-container .popup-menu li:last-child {
    border-bottom: none;
}

.popup-container .popup-menu li:hover {

    color: #28BD8B;
    background: #D2D2D2;
}

.popup-container .popup-menu li a {
    color: white;
    text-align: center;
    text-decoration: none;
    padding: 0px 5px;
}

.popup-container .popup-menu li a:hover {

    color: #28BD8B;
    text-decoration: none;
}



/* The actual popup-container */
.popup-container .popup-content {
    opacity: 0;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    z-index: 2000;

    position: absolute;
    bottom: 125%;
    left: 50%;

    /* The following should be auto calc instead of hard coded*/
    width: 145px;
    margin-left: -70px;
}

/* Popup down arrow */
.popup-container .popup-content::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}


/* Toggle this class - hide and show the popup */
.popup-container .show {
    opacity: 1;
    transition: opacity 2s;
}


/*********************************
 * Header menu bar properties
 ********************************/

.fixed-top {
  position: fixed;
  top: 0 !important;
}

.nav-item {
  padding-left: 40px;
}

.navbar-brand {
    padding-top: 0px;
    padding-bottom: 0px;
}

.navbar .logo {
    width: 50px;
    height: 49px;
}

/**************************************
 * Sign up/in page style
 **************************************/


.validation-info {

  padding-top: 40px;
  color: #fe555b;
  font-size: 14px;
  text-align: center;
}

.info-msg, .validation-msg {
  font-size: 12px;
  text-align: center;
}

.info-msg, .validation-warning-msg {
  font-size: 12px;
  color: #c7254e;
}

.validation-req-msg {
  font-size: 12px;
  color: #8A90A3;
}

.validation-msg {
  color: #8A90A3;
}

.validation-email {
  padding-top: 10px;
  color: #8A90A3;
  font-size: 12px;
  text-align: center;
  margin-bottom: 0;
}

.legal-copy {

    padding-top: 40px;
    color: #8A90A3;
    font-size: 10px;
    text-align: center;
}

.browser-support-warning {
  color: #f4463d;
  font-size: 12px;
  text-align: center;
}

.browser-support-warning::after {
  content: "Warning: Not every browser works well. Chrome v64.0 or higher works best.";
}

.sub-head {
  padding-top: 65px;
  height: 330px;
}

.sub-head-row {
  flex-wrap: inherit;
}

.sub-masthead {
    padding-top: 30px;
    padding-bottom: 20px;
    height: 240px;
    background-color: #8BDFCD;
}

.sub-masthead .banner {

    height: 300px;

}

.sub-masthead .title-area {

    padding-top: 60px;
    width: 100%

}

.main-signup-area {

    padding-top: 10px;
    padding-bottom: 160px;
}


.main-signup-area .title-area {

    text-align: center;

}


.main-signup-area .title-area h2 {

    font-size: 30px;
}

.main-signup-area .title-area p {

    font-family: GothamRounded-Light;
    font-size: 16px;
}

.sign-on-option-area
{
    padding-top: 0px;
    /* no padding for now until we add the third-party login*/
    /*padding-top: 40px;*/
}

.signup-btn {
    width: 100%;
    height: 40px;

    /* Modified per user feedback */
    background:#28BD8B;
    color: white;

    /*border-color:  #B3B2C0;
    border-style: solid;
    border-width: 1px;
    background-color: transparent;
    background-size: 25px 25px;
    background-repeat: no-repeat;
    background-position: 15px 4px; */

    outline: none;

}

.signup-btn:hover{
  background-color: #428e74;
  color: white;
  border: none;
}

.signup-last-btn {
  background:#28BD8B;
  color: white;
  outline: none;
  border: none;
}

.signup-last-btn:hover{
  background-color: #428e74;
  color: white;
  border: none;
}



.signup-last-btn::before {
  content: "Create Account";
  font-family: GothamRounded-Medium;
  font-size: 16px;
}

.reset-btn::before {
  content: "Reset Password";
  font-family: GothamRounded-Medium;
  font-size: 16px;
}

#login__login::before {
    content: "Log in";
    font-family: GothamRounded-Medium;
    font-size: 16px;
}

#login__google {

    /*background-image: url(../img/ui/google-logo-sm.png);*/
}

#login__fb {

    /*background-image: url(../img/ui/fb-logo-sm.png); */
}

#login__twitter {

    /*background-image: url(../img/ui/twitter-logo-sm.png); */
}


#get-email-invite::before {
    content: "Email My Invite";
    font-family: GothamRounded-Medium;
    font-size: 16px;
}


.or-divider {
    display: block;
    text-align: center;

}

.or-symbol h4 {
    font-family: GothamRounded-Light;
}

.vertical-divider {
    stroke:#B3B2C0;
    stroke-width:2
}

.credential-item {

    /* Wait until third party login*/
    /*margin-top: 30px;*/

    margin-top: 30px;

}

.credential-input {
    border-bottom: solid;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom-width: thin;
    border-bottom-color: #B3B2C0;
    width: 100%;

    background-color: transparent;
    outline: none;
}

.forget-passwd-link {

    font-size: 12px;
}

.signup-confirmation-area {

    padding-top: 60px;
    padding-bottom: 160px;
    width: 55%;
    margin: auto;
}

.last-step-action {
    padding-top: 60px;
    text-align: center;
}

/***************************************
 * Style sheet for REP Home page
 * It includes the subheader as well as
 * the display of existing rep cards
 *
 * these styles are being refactored into
 * src/clj/juji/styles/rep_page.clj
 ***************************************/

/* *-release and customize-cover  ****************** */

#scheduled-date::before {
    content: "New release will be: " !important;
}

.release-date-display h4::after {
    content: "Pick a date to update REP release";
}

.release-update-btn::before {
    content: "Update Release";
}

.release-launch {
  background-image: url(../img/ui/entry-bg.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #464646;
}

.first-release .release-date-display {
    opacity: 0;
}


.release-date-display h4{

    color: #888888;
    font-family: GothamRounded-Medium;
    font-size: 16px;
    line-height: 1.5em;
    margin-bottom: 20px;
}

.release-date-display input {

    cursor: not-allowed;
    margin-bottom: 5px;
    width: 100%;
    background: transparent;
}

.release-date-display p {

    text-align: left;
    line-height: 4em;
}

.release-update-display {
    padding: 0;
    margin: 0;
    width: 100%;
}

.release-update-info{
    padding: 7px;
    font-size: 13px;
    white-space: nowrap;
}

.release-update-btn-area {
    padding: 0px;
    display: inline-table;
}

.release-update-btn {

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre-line;
    color: white;
    background: #28BD8B !important;
    font-size: 13px;
    padding: 7px 0 7px 0;
    width: 80%;
}

.release-update-btn:hover {
  background: #3edca7ba !important;
}

/*#######################################
 * Below defines all the styles used to design, preview, launch,
 * and see results of an AI REP engagement
 ########################################*/


/* Overall structures */

.main-content-area {

   /* padding-top: 40px;*/
    padding-bottom: 40px;
   /* height: 100%;*/
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    /*box-shadow: 0px 0px 15px #DDDDDD;*/
}

.design-scrollable-area {
 /* display: flex;*/
  height: 100vh;
  overflow-y: auto;
}

/* Customized Juji card based on Bootstrap cards */

.juji-card {

    margin: auto;
    width: 80%;
}

.juji-card .card-header {
    background-color: #F2F2F2;
    line-height: 2.65em;
    padding-top: 0;
    padding-bottom: 0;
}

.juji-card .card-header .header-menu {
    float:right;
}

.juji-card .image-block {

    text-align: center;
    height: 150px;
}

.juji-card .card-block {

    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 0px;

    /* Fix the text block height to
     *make sure equal heights across cards */

    height: 100px;
}

.juji-card .card-block h3 {

    text-align: center;
}

.juji-card .card-block p {
    margin-bottom: 0;
}

.juji-card .primary-action-area {

    text-align: center;
    padding-bottom: 10px;
}

.juji-card .btn-primary {

    position: relative;
    width: 60%;
    color: black;
    background: #D2D2D2;
    border: none;

    font-size: 14px;
    font-family: GothamRounded-Book;
}

.juji-card .btn-primary-temp {

  position: relative;
  width: 60%;
  color: black;
  background: #D2D2D2;
  border: none;

  font-size: 14px;
  font-family: GothamRounded-Book;
}

.juji-card .btn-primary-temp label {
  margin: 0;
  padding: 0;
}



.juji-card .btn-primary label {
    margin: 0;
    padding: 0;
}

.juji-card .card-footer {

    background: #D0D0D0;
}

/**********************************
* Entry page
***********************************/


.entry .popup-window .title-area p::before {
    content: "Congratulations! You can now...";
}

#preview-action {

    position: relative;
}

#preview-action button {

    font-size: 18px;
    font-family: GothamRounded-Medium;

    width: 351px;
    height: 280px;

    background-image: url(../img/content/preview-img.png);
    background-size: 351px 280px;
    background-repeat: no-repeat;
}

#preview-action button::before {

    content: "Preview the chat my audience will experience";
    display:  inline-block;

    position: absolute;
    top: 50%;
    right: 70%;

}

#preview-action button:hover {
    color: #28BD8B !important;
    box-shadow: 0px 0px 15px #DDDDDD;
}

#no-thanks-action {
    padding-top: 30px;
}

#no-thanks-action button::before {

    content: "No thanks, start customizing my AI";
}

#no-thanks-action {
    text-align: right;
}

#no-thanks-action button{

    font-size: 18px !important;
    font-family: GothamRounded-Medium !important;
    border: none;
    box-shadow: none;
    background-color: transparent;
    color: #767C8C !important;
}

#no-thanks-action button:hover {

    color: #28BD8B !important;
}

/**********************************
 * Overall engagement structure
 *********************************/


/*****Main content area**********/

.main-content-area .content-title {
    margin:auto;
    padding-top: 35px;
    text-align:center;
    max-width: 600px;
}

#preview-content {

    padding-top: 40px;
}


/*******************************
 * design, persona, faq pages
 *******************************/

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

.persona-warning {
  color: #f4463d;
  font-size: 12px;
  white-space: pre-wrap;
}

/*******************************
 * persona page
 *******************************/

.infocus-persona-edit-area {
    margin-top: 170px;
    margin-bottom: 170px;
    background: #FFFFFF;
    box-shadow: 10px 10px 2px #888888;
}

.rep-img-upload {
  display: none;

}

.persona-name-edit-box {
  min-width: 50%;
  border: 0;
  font-size: 18px;
  font-family: "GothamRounded-Book";
}

.persona-name-edit-box:focus {
  color: red;
}

.persona-bio-edit-box {
  width: 90%;
  min-width: 50%;
  border: 0;
  font-size: 14px;
}

.persona-bio-edit-box {
  color: red;
}

.persona-area {
    margin-top: 40px;
    text-align: center;
}

.rep-option-display {
    margin-top: 40px;
    margin-bottom: 10px;
}

.design .selected-rep-img {

    margin-top: -90px;

    width: 180px;
    height: 180px;
    border-radius: 50%;
    background-size: 180px 180px;
    background-position: center center;
    /*background-image: url("../img/content/juji-chat-profile-lg.png");*/

}

#selected-your-own {
  /* background-image: url("../img/content/youchoose-chat-profile-lg.png");*/
}

.hoverable-rep-img:hover {

    background-image: url("../img/content/youchoose-chat-profile-lg.png");
    cursor: pointer;
}

.selected-rep-text h4 {
    font-size: 18px;
}

.selected-rep-text p {
    text-align: left;
    font-size: 14px;
}

.rep-edit-box {
  padding-bottom: 4px;
}

.rep-option-text {
    text-align: center;
    padding-top: 10px;
    font-family:  "GothamRounded-Medium";
}

.rep-option-card {

    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 0px;
}

.selected-rep-option-card {

    box-shadow: 0px 3px 26px #D3D5DA !important;

}

.action-area {
    margin-top: 60px;
    margin-bottom: 30px;
}

.save-btn.text-action-btn:hover {
    color: black;
}

.design .new-rep-text h4::before {
    content: "";
}

#change-persona label {
    cursor: pointer;
}

#persona-file-upload {
    cursor: pointer;
    opacity: 0;
}

/******************************
 * Chat edit page
 * - edit one section at a time
 ******************************/

.edit-chat {
    margin-top: 30px;
}

.topic-nav-bar {

    padding-top: 30px;

}

.topic-nav .topic-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.topic-nav .topic-item {
    padding: 5px 10px;
    margin-bottom: 10px;
    margin-top: 10px;
    /*background: #FFFFFF;*/
}

.topic-nav .selected-new-topic-item {
    background: #F2F2F2;
}

.topic-nav .selected-topic-item {
    background: #28BD8B;
}

.topic-item a {
    font-family: GothamRounded-Book;
    font-size: 14px;
    text-decoration: none;
    color: black;
}

.topic-item:hover {
    /*background-color: #28BD8B;*/
    background: #F2F2F2;
    /*background: #E2E2E2;*/
}

.nav-other {
    padding-top: 5px;
    padding-bottom: 1px;
}

.nav-next .down-arrow {
    width: 50px;
    height: 50px;
}

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

.chat-area {
    margin-top: 0 !important;
    overflow-y: scroll !important;
    padding-bottom: 50px;
    min-height: calc(100% - 50px);
}

.primary-color {
  color: grey;
}


.primary-color-1 {
  color: lightgrey;
}

.hidden-action-area {
    opacity: 0;
}

.active-action-area {
    opacity: 1.0;
}

.message-row .left {
	margin-left: 10px;
	margin-top: 5px;
	margin-bottom: 5px;
}

.message-row .left-text {
    background-color: #D9D9D9;
    border-radius: 0px 20px 0px 20px;
}


/* start, middle, and end have different margins */

.message-row .right-text {

    min-width:57px;
    max-width: calc(50% - 50px);
    background-color: #A6A6A6;
    border-radius: 20px 0px 20px 0px;
}

.message-row .right-start {
	margin-right: 10px;
	margin-top: 5px;
	margin-bottom: 2px;
}

.message-row .editable-rep-blurb .content {
    color: grey;
}

.gui-row {

    margin-left:auto;
    margin-right: auto;
    max-width: 80%;
    border-top: 1px dashed #A8A8A8;


    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 10px;

}

.gui-row .add-form-inst-btn {
  padding: 0;
}

.gui-row .gui-display {
    margin-top: 10px;
    margin-bottom: 10px;
}

.gui-row .editable-gui-display::before {

    content: "Edit options";
    display: block;
    color: grey;
}

.gui-row .juji-gui-template {

    padding: 10px 5px;
    background: #FFFFFF;
}

.gui-row .editable-gui-instruction::before {
    content: "Edit form instructions (optional)";
    display: block;
    color: grey;
}

.gui-row .editable-gui-instruction-inactive::before {
  content: "+Edit form instructions (optional)";
  display: block;
  color: grey;
}

.gui-row .editable-gui-instruction-box {

}

.gui-row .editable-gui-heading::before {
  content: "Edit form heading";
  display: block;
  color: grey;
}


.gui-row .editable-gui-text {
    background: white;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 5px;
}

.gui-row .question-requirement-display {
    text-align: right;
}

.cond-followup-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.editable-new-blurb {
    min-height: 21px;
    border: 1px solid #D5D5D5;
    border-radius: 5px;
    min-width: 250px;
}

.editable-empty-text-box {
    min-height: 21px;
    border: 1px solid #D5D5D5;
    min-width: 150px;
}

.editable-gui-head-box {
  min-height:21px;
  min-width:150px;
  width: 50%;
}

.background-color-1 {
  background-color: #f9f9f9;
}

.background-color-2 {
  background-color: white;
}

.background-color-3 {
  background-color: #F2F2F2 !important;
}


/**** Question bank *************/

@media (min-width: 1220px){
  .q-bank-warning-area {
    margin-left: 190px;
    margin-right: 190px;
    text-align: left;
  }
}


.q-bank-warning-area p {
  margin-bottom: 2px !important;
  color: #DC3C46;
  font-size: 12px;
  font-family: GothamRounded-Medium;
}

.client-question-category {
    background: #28BD8B;
}

.question-search-form {
    margin-top: 20px;
    margin-bottom: 20px;
}

.question-search-box {

    min-width: 300px;
    border: none;
    border-bottom: 1px solid #A6A6A6;
    padding: 5px;
}

.question-search-box::after {
    content: "search";
    display:inline-block;
    width: 50px;
    height: 50px;
    background-size: 50px 50px;
    background-color: red;
    /*background-image: url(../img/content/juji-chat-profile-sm.png);*/
    background-repeat: no-repeat;
}

/*****************************
* Preview page
******************************/

.preview .content-title h2::after {
    content: "Preview AI";
}

.preview .content-title p::after {
    content: "Start typing to test out the virtual interview that your audience will experience"
}

#invite-tester-form {
    text-align: right;
    margin-bottom: 10px;
}

#tester-email-input {
    width: 40%;
}

#invite-tester-btn {

    color: black;
    background: #DDDDDD !important;
    border-radius: 6px;
    width: 120px;
}

#invite-tester-btn::before {
    content: "Invite Tester";
}

#preview-container {

    margin: auto;
    width: 90%;
    margin-top: 60px;
    margin-bottom: 65px;
}

#preview-iframe-dummy {

    cursor: wait;
    width: 100%;
    height: 750px;
    border: none;
    box-shadow: 0px 0px 12px #DDDDDD;
    background: #FFFFFF;
}

#preview-iframe {

    width: 100%;
    height: 750px;
    border: none;
    box-shadow: 0px 0px 12px #DDDDDD;
}

.preview .progress-display {
    text-align: center;
    margin-top: 60px;
}



.preview .progress {

    margin:auto;
    width: 90%;
    margin-top: 30px;
}

#preview-progress {

    width: 10%;
}

/******************************
* Launch/release page
*******************************/

.release .content-title h2::after {
    content: "Release the Power of AI";
}

.release .content-title p::after {
    content: "Select one or more channels for an AI to meet your audience";
}

.launch-card-row {
    margin-top: 60px;
    margin-bottom: 100px;
}


.release-contents {
  margin-bottom: 150px;
}

.release .juji-card .primary-action-area .btn-primary label::before {
    content: "Get Started" !important;
}

.release .juji-card .card-block .card-text {
    text-align: center;
}

.release .juji-card .card-footer {
    color: #FFFFFF;
}

/* Default setting for a not-released card */
.release .juji-card .card-footer::before {
    content: "REP not released";
}

/*disabled card*/

.release .disabled .primary-action-area .btn-primary label::before {
  content: "Unavailable" !important;
}

.release .coming-soon .primary-action-area .btn-primary label::before {
  content: "Unavailable" !important;
}

.release .disabled .primary-action-area .btn-primary:hover {
  content: "Unavailable" !important;
  background: #D2D2D2 !important;
  cursor: not-allowed !important;
}


.release .coming-soon .primary-action-area .btn-primary:hover {
  content: "Unavailable" !important;
  background: #D2D2D2 !important;
  cursor: not-allowed !important;
}

.release .disabled .card-block .card-text {
  text-align: center;
}

.release .disabled.card-footer {
  color: #FFFFFF;
}

.release .disabled .card-footer::before {
  content: "It doesn't support GUI question";
}

.release .coming-soon .card-footer::before {
  content: "Coming Soon"
}

/* Released card */


/* this is an inactive button if nothing to update */
.release .released .primary-action-area .btn-primary label::before {
    content: "Update" !important;
}


.release .released .card-footer {
    background: #28BD8B;
}

.release .released .card-footer::before {
    color: #FFFFFF;
    content: "REP released on: ";
}

/* Scheduled card */
.release .scheduled .card-footer {
    /*background:  #B83F2A;*/
    background: white;
    color: black;
}

.release .scheduled .primary-action-area .btn-primary label::before {
    content: "Update" !important;
}


.release .scheduled .card-footer::before {
    color: black;
    content: "Scheduled release: ";
}

#facebook-channel {
}

#facebook-channel .card-block .card-title::after {

  content: "Facebook Messenger";

}

#facebook-channel .card-block .card-text::after {
   content: "Release AI on Facebook.";
}


#slack-channel {
}


#slack-channel .card-block .card-title::after {
    content: "Slack";
}

#slack-channel .card-block .card-text::after {
    content: "Release AI in Slack.";
}

#web-channel .card-block .card-title::after {
    content: "Web";
}

#web-channel .card-block .card-text::after {
    content: "Release AI on a website.";
}

/* Customize email */

.customize-email .popup-window .title-area h3::after {
    content: "Customize my emails";
}

.customize-email .popup-window .title-area p::after {
    content: "Your AI will email each person who starts and finishes an interview. Customize these messages as needed.";
}

.customize-email .main-display {

    width: 80%;
    box-shadow: 0px 0px 15px #BBBBBB;
    padding-bottom: 30px;
    border-radius: 15px;
}

.customize-email .nav-tabs {
    border: none !important;
}

.customize-email .nav-item {

    border: none !important;

}

.customize-email .nav-link {

    color: black;
    font-family: GothamRounded-Light;
    background: #E2E2E2;

}

.customize-email  .first-link {
    border-radius: 15px 0 0 0;
}

.customize-email  .last-link {
    border-radius: 0 15px 0 0;

}

.customize-email .nav-item .active {

    border: none !important;
    font-family: GothamRounded-Medium;
    background: #FFFFFF;
}


.customize-email .tab-content {

    margin-left: auto;
    margin-right: auto;
    width: 90%;
    margin-bottom: 20px;
}

.customize-email .instructions {

    font-family: GothamRounded-Book;
    margin-top: 20px;
    text-align: left;
    width: 80%;
}

.customize-email .subject-form {

    text-align: left;
    margin-top: 20px;
    margin-bottom: 20px;
}


.customize-email .subject-input {
    padding-left: 10px;
    padding-right: 10px;
    width: 100%;
}

.customize-email .body-input {
     padding-left: 10px;
     padding-right: 10px;
}


#test-email-input {
    width: 40%;
}

#test-email-btn {

    color: white;
    background: #28BD8B !important;
    border-radius: 25px;
    width: 150px;
}


#test-email-btn::before {
    content: "Test Email";
}

#welcome-email .instructions:before {

    content: "This email will be sent to your audience once they start chatting with your AI.";

}


#farewell-email .instructions:before {

    content: "This email will be sent to your audience once they finish chatting with your AI.";

}

.customize-email .primary-action-area .left-action button::before {
    content: "Reset";
}

.customize-email .primary-action-area .right-action button::before {

    content: "Next";
}


/* Schedule a release */
.customize-schedule .popup-window .title-area h3::after {
    content: "Schedule the release of my AI";
}

.customize-schedule .popup-window .title-area p::after {
    content: "No date is selected";
}

.customize-schedule .primary-action-area .right-action button::before {

    content: "Save";
}


.customize-schedule .primary-action-area .left-action button::before {

    content: "Reset";
}

/******** Web Launch ************/

/* Customize web cover page */

.brand-cover-page {
  top: 0px;
  height: 100vh;
  width : 100%;
}

.brand-cover-page .main-display {

    position: relative;
    height: 100%;
}

.brand-cover-page .brandcover-q {
  height: 80%;
  width: 80%;
}

.brand-cover-page .cover-page-header {

    width: 100%;
    height: 20%;

    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;

    border-radius: 0% 0% 30% 55%;

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    padding-top: 5px;
}

#brand-logo {

    width: 100px;
    height: 50%;
    margin-left: 50px;
}

#brand-logo img {
  border-radius: 10px 10px 10px 10px;
}

.brand-cover-page .cover-page-body {
    position: absolute;
    /* top: 10%; */
    left: 0;
    width: 100%;
    height: 90%;
}

.brand-cover-page .cover-page-body > .row {
  width: 100%;
  margin: 0;
}

.brand-cover-page .cover-page-body .row.greetings {
	height: 90%;
}

.brand-cover-page .legal-copy {
	width: 100%;
	margin: 0;
	padding: 0;
}

.customize-web-cover .cover-page-body {
    /* top: 80px; */
    height: calc(100% - 80px);
}

.brand-cover-page  .cover-page-body .right-side {
    display: flex;
    vertical-align: middle;
    align-items: center;
    justify-content: center;

    padding-top: 20px;
    background: #D2D2D2;
}

.customize-web-cover .greeting-box::before {

    content: "Edit the greeting below";
    color: #A8A8A8;
    line-height: 4em;
}

.brand-cover-page  .greeting-box {

    margin-left: auto;
    margin-right: auto;
    width: 80%;

    text-align: left;
    padding-top: 15%;
}

.brand-cover-page .greeting-box h3 {

    font-size: 1.75em;
}

.brand-cover-page .greeting-box p {
    font-size: 1.2em;
}

.customize-web-cover .greeting-box h3 {

    font-size: 18px;
}

.customize-web-cover .greeting-box p {
    font-size: 14px;
}

.brand-cover-page .user-form .first-name {
  background: transparent;
  border: none;
  border-bottom: 1px solid #A8A8A8;
  width: 100%;
  margin-top: 10px;
}
/*
.brand-cover-page .user-form .first-name::-webkit-input-placeholder {
  color: #c7254e;
  opacity: 1;
}

.brand-cover-page .user-form .first-name::-moz-placeholder {
  color: #c7254e;
  opacity: 1;
}

.brand-cover-page .user-form .first-name::-ms-placeholder {
  color: #c7254e;
  opacity: 1;
}

.brand-cover-page .user-form .first-name::placeholder {
  color: #c7254e;
  opacity: 1;
}
*/

.brand-cover-page .email-instruction {
  display: inline-block;
  padding-left: 2%;
  width: 8%;
}

.brand-cover-page .chat-btn-area {
  padding-right: 10%;
}

.brand-cover-page .user-form .chat-btn {

    cursor: pointer;

    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    padding: 5px;

    width: 50%;
    color: #FFFFFF;
    background: #28BD8B;
    border-radius: 25px;
}

.brand-cover-page .user-form .chat-btn::before {
    content: "Start to chat";
}

.customize-web-cover .pseudo-chat-btn {
    cursor: none !important;
    /*background: #888888;
    color: #DADADA;*/
}

.brand-cover-page .rep-img-display {

    display: flex;
    justify-content: flex-end;
    flex-direction: column;

    position: absolute;
    bottom: 0;
    left: 0;

    width: auto;
    height: 50%;
    transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
}

.brand-cover-page .rep-img-display img {
  width: 210px;
  height: 220px;
  border-radius: 15px 15px 15px 15px;
}

#change-logo {
    margin-left: auto;
    margin-right: auto;
    width: 90%;
}

#change-logo label {
    cursor: pointer;
    color: #000;
    font-size: 12px;
    font-family: GothamRounded-Book;

}

#change-logo img {
    width: 50px;
    height: 50px;
}

#change-logo label::before {
    content: "Change logo";
}

#logo-file-upload {
    opacity: 0;
}

#change-background img {
    width: 30px;
    height: 30px;
}

#change-background label {
    cursor: pointer;
    color: #FFFFFF;
    font-size: 12px;
    font-family: GothamRounded-Book;
}

#change-background label::before {
  color: #000;
    content: "Change background";
}

#bg-file-upload {
    opacity: 0;
}


.launch-item {

    margin-top: 30px;
    margin-bottom: 100px;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
}

.launch-subitem {

    margin-top: 20px;
    margin-bottom: 20px;
}

.launch-subitem p {
    font-size: 14px;
    font-family: GothamRounded-Light;
    max-width: 600px;
}


.launch-subitem .btn-primary {
    width: 80%;
}

.launch-subitem .btn-initial {
    background-color: #28BD8B !important;
    color: white !important;
    width: 80%;
}

.launch-subitem label {
    font-family: GothamRounded-Medium;
}

.launch-subitem input {
    width: 80%;
    min-height: 20px;
    box-shadow: inset 0px 0px 10px #DDDDDD;
    outline: none;
    border: none;
    padding: 5px;
}

.copy-url {
  font-family: GothamRounded-Medium;
}


.web-test-link {
  margin-top: 5em;
  padding-left: 4.8em;
  padding-right: 4.8em;
}

.web-test-link p {
  text-align: left;
}

.web-test-link__copy-button {
  display: block;
  width: 100%;
}

.web-test-link__url {
  width: 100%;
  min-height: 20px;
  box-shadow: inset 0px 0px 10px #DDDDDD;
  outline: none;
  border: none;
  padding: 5px;
}

/* FB release info */
#fb-link h3::after {
    content: "Release AI on Facebook";
}

#fb-link .btn-primary::before {
    content: "Logon to Facebook";
}

/* Slack release info */
#slack-link h3::after {
    content: "Release AI on Slack";
}

#slack-link p::after {
    content: "Please enter and verify the required information below";
}

#slack-team-id label::before{
    content: "Team ID";
}

#slack-bot-token label::before{
    content: "BOT Token";
}

#slack-link .btn-primary::before {
    content: "Logon to Slack";
}

.release-summary .left-action .btn-primary::before {
    content: "Make More Releases";
}

.release-summary .right-action .btn-primary::before {
    content: "View Result Dashboard";
}

/****release schedule page *************/

#check-design::after {
    content: "Customize an AI";
}

#check-preview::after {
    content: "Preview conversation";
}

#check-cover::after {
    content: "Customize cover page";
}

/****************************************
 * Results page
 ****************************************/


.display-results-area {
  padding-bottom: 100px;
}

.result-card {
  text-align: center;
  font-family: GothamRounded-Book;
}

#green-gradient-1{

    stop-color:#37bab8;
    stop-opacity:1
}


#green-gradient-2{

    stop-color:#267878;
    stop-opacity:1
}


#red-gradient-1{

    stop-color:#fe555b;
    stop-opacity:1;
}

#red-gradient-2{

    stop-color:#ef7554;
    stop-opacity:1

}

#last-result-card {

    float:right;
}

.clock {

    padding-bottom: 10px;
}

.clock-icon{
    width: 20px;
    height:20px;
}


.interviews-complete-dot{
  fill: #37bab8; /* For browsers that do not support gradients */
     fill: -webkit-linear-gradient(left, #267878 , #37bab8); /* For Safari 5.1 to 6.0 */
     fill: -o-linear-gradient(right, #267878, #37bab8); /* For Opera 11.1 to 12.0 */
     fill: -moz-linear-gradient(right, #267878, #37bab8); /* For Firefox 3.6 to 15 */
     fill: linear-gradient(to right, #267878 ,#37bab8); /* Standard syntax (must be last) */

}

.results-display {
    height:300px;
    width: 100%;
}

.results-table {
  max-width: 100%;
  font-size: 13px;
  font-family: GothamRounded-Book;
}

.results-sample-tr {
  background: #f9f9f9;
  color: #888;
}

.results-td {
  white-space:nowrap;
}

.results-th {
  background: #f7f9f9;
  white-space:nowrap;
}

.wrap-colum {
  max-width: 400px;
  overflow: hidden;
  white-space:nowrap;
  text-overflow: ellipsis;
}


/*
.wrap-colum:hover{
  overflow: visible;
  white-space: normal;
}

.results-td:hover{
  overflow: visible;
  white-space: normal;
  height:auto;
}
*/

#chart-stacked {
  height: 300px;
}

#chart-pie {
  height: 300px;
}

.download-csv {
    text-align: center;
    vertical-align: middle;
}

.download-csv p {
    font-size: 12px;
    margin: 0;
}

.download-csv p::before {
    content: "CSV";
}

.download-csv .download-icon {

    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(../img/ui/download.png);
    background-size: 40px 40px;
    background-repeat: no-repeat;

}

.results .primary-action-area {

    margin-top: 30px;
    margin-bottom: 30px;
    text-align: center;
}

.results .primary-action-area button {

    width: 100%;
    color: black;
    background: #D2D2D2;

}

#access-btn::before {
    content: "Access My Results";
}

#individual-results .results-title h3::after {
    content: "Individual Interview Results";

}

#individual-results .results-title p::after {
    content: "Here is a sneak peek on your first 5 people who chatted with your REP. Upgrade to download your full interview results";
}

#analysis-results .results-title h3::after {
    content: "Big Five Personality Traits";
}
/*
#analysis-results .results-title p::after {
    content: "Here is a sample analysis result that explains the \"why\" behind the interview results. Upgrade to access or download a full analysis";

}
*/

/*results-page big5 card design*/
.big5-card-col {

  margin: 13px;
  padding: 0px;
  vertical-align: middle;
}

.big5-button {
  height: 100%;
  width: 100%;
  padding:0px;
}

.big5-button:hover .big5-card-body {

  font-weight: bold;
  border: 2px solid #00000024;
  border-radius: 0px 0px 10px 10px;
  border-top: none;
}

.big5-button:hover .big5-card-header {

  font-weight: bold;
  border: 2px solid #00000024;
  border-radius: 10px 10px 0px 0px;
  border-bottom: none;
}

.big5-button-selected .big5-card-body{
  font-weight: bold;
  -webkit-box-shadow: 0px 0px 29px -2px rgba(87,80,87,1);
  -moz-box-shadow: 0px 0px 29px -2px rgba(87,80,87,1);
  box-shadow: 0px 0px 29px -2px rgba(87,80,87,1);
}

.big5-card-header {
  height: 20px;
  border-radius: 10px 10px 0px 0px;
}

.big5-card-body {
  height: 50px;
  padding-top: 11px;
  font-family: GothamRounded-Book;
  font-size: 14px;
  text-align: center;
  text-overflow: ellipsis;
  border: 1px solid #00000024;
  border-top: none;
  background-color: #fefefe;
  border-radius: 0px 0px 10px 10px;
  overflow: hidden;
  white-space: nowrap;
}


.big5-neuroticism {
  background-color:#FCDA00;
}

.big5-agreeableness {

  background-color:#ADD136;
}

.big5-openness {

  background-color:#22B786;
}

.big5-conscientiousness {

  background-color:#227774;
}

.big5-extroversion {

  background-color:#EE9D54;

}

/***********************************
 * Update alert pop up window
 ***********************************/

.update-alert .title-area h3 {
    color: #DC3C46;
}

.update-alert .title-area h3::after {

    content: "Important Message";

}

.update-alert .title-area p {
    text-align: left;
}

.update-alert .title-area p::after {

    content: "Your updates are saved but *not* published to your audience automatically. You must schedule a new release of your AI to reflect the updates."

}

.update-alert .main-display h3 {

    font-size: 16px;
    font-family: GothamRounded-Medium;
    text-align: left;
    line-height: 1.5em;
}

.update-alert .main-display h3::after{

    content: "Whenever you are ready, click on \"Release\" to schedule...";
}

.update-alert .main-display p {
    font-size: 14px;
    font-family: GothamRounded-Light;
    text-align: left;
    line-height: 1.5em;
}

.update-alert .main-display p::before{
    content: "Be aware: ";
    font-family: GothamRounded-Medium;
}

.update-alert .main-display p::after {
    content: "ongoing chats with the REP will be interrupted for a few minutes during the update.";

}

.update-alert .menu-display {

    padding-top: 20px;
    padding-bottom: 20px;
    border-radius: 20px;
    box-shadow: 0px 0px 15px #BBBBBB;
    border: 3px solid #DDDDDD;
    background: #FFFFFF;
}

.update-alert .menu-display .simple-menu {

    margin: 0;
    padding: 0;
    width: 80%;

    list-style-type: none;

    font-family: GothamRounded-Light;
    font-size: 14px;

    background: #D2D2D2;
    border-radius: 25px 0 0 25px;
}

.update-alert .simple-menu li {

    text-align: center;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;

}

.update-alert .primary-action-area .left-action .btn-primary {

    font-family: GothamRounded-Medium;
    border: none !important;
    background: transparent !important;

}

.update-alert .primary-action-area .left-action .btn-primary:hover {
    color: #28BD8B !important;

}

.update-alert .primary-action-area .left-action .btn-primary::before {

    content: "Please don't show this alert again";
}



.update-alert .primary-action-area .right-action .btn-primary::before {

    content: "Got it";
}


/***********************************
 * download pop up windows
 ***********************************/

.download-popup .feedback-area {
    margin-left: auto;
    margin-right: auto;
    width: 65% !important;
}


.download-popup .feedback-area p {
    text-align: left;
    font-size: 14px;
    font-family: GothamRounded-Medium;
}

.download-popup .title-area h3::after {
    content: "Congratulations";
}

.download-popup .title-area p::after {
    content: "Because you are one of our first users, you just receive a free access to all your results for a limited time period.";
}

.insufficient-data .title-area h3::after {
    content: "Sorry, More Data Needed" !important;
}

.insufficient-data .title-area p::after {
    content: "You must have at least 100 finished interviews to obtain a meaningful analysis. Please remind your audience to finish their interview." !important;
}

.download-popup .feedback-area p::after {

    content: "In exchange, we'd love to hear your feedback about your experience with your AI or anything we could improve on.";

}

.insufficient-data .feedback-area p::after {
    content: "While you are waiting, perhaps you could give us some feedback..." !important;
}


.hidden {
  visibility: hidden;
}


.fade-out-message {
  background: transparent;
  color: #28BD8B;
  transition: 5s;
  opacity: 0;
  visibility: hidden;
  text-align: right;
  font-weight: bold;
}

.fade-out-message .fade-out-message-show {
  opacity: 1;
  visibility: visible;
}

.modal {
  display: flex; /* Hidden by default */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.juji-modal-content {
  background-color: #fefefe;
  display: fixed;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: auto; /* Could be more or less, depending on screen size */
  height: auto;
}

.juji-modal-body {
  font-size: 15px;
  display: fixed;
  font-weight: bold;
  font-family: GothamRounded-Book;
  text-align: center;
}

.btn-modal-primary {
  font-size: 15px;
  width: 50%;
  font-family: GothamRounded-Book;
  background-color: #fff;
  border-color: #ccc;
}

.btn-modal-primary:hover {
  font-weight: bold;
  border: 2px solid #808080;
  cursor: pointer;
  color: #292b2c;
}

@media (min-width: 450px) and (max-width: 992px) {

  .brand-cover-page .cover-page-header {
    height: 15%;
  }
}

@media only screen and (-webkit-min-device-pixel-ratio:0) and (max-width: 449px) {
  .brand-cover-page .cover-page-header {
    height: 15%;
  }

  .brand-cover-page .cover-page-body .right-side {
    padding-bottom: 30px;
  }

  .juji-brand-form {
    min-width: 60%;
  }

  .brand-cover-page .rep-img-display img {
    width: 160px;
    height: 170px;
  }

  .brand-cover-page .email-instruction {
    width: 10%;
  }
}

/****************************
 * Template page
******************************/


.button--busy {
  background-color: gray;
  cursor: default;
}

@keyframes button--busy {
  to {transform: rotate(360deg);}
}

.button--busy:after {
  content: '';
  background-color: gray;
  box-sizing: border-box;
  position: absolute;
  width: 20px;
  height: 20px;
  margin-left: 10px;
  border-radius: 50%;
  border: 2px solid #ccc;
  border-top-color: #333;
  animation: button--busy .6s linear infinite;
}
.button--busy:hover {
  background-color: gray;
}


/*this is for simplemde style*/
.CodeMirror {
  height: 65px;
  padding: 2px;
  max-height: 100px;
  min-height: 20px;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  font-family: GothamRounded-Light;
}

.gui-display .CodeMirror {
  height: 30px;
}

.input-1 .CodeMirror {
  height: 30px;
}

.CodeMirror-sizer {
  min-height: 100px;
}

.CodeMirror-scroll {
  min-height: 100px;
}

.CodeMirror-code {
  max-height: 50px;
}

.editor-toolbar {
  display: flex;
  font-size: 13px;
  height: 25px;
  border: none;
  border-radius: 0;
  background: lightgrey;
}

.editor-toolbar a {
  width: 30px;
  height: 30px;
}

.editor-toolbar i.separator {
  border: none;
  margin: 0;
}

.editor-statusbar {
  padding: 0px;
  font-size: 10px;
}

.navbar-light .navbar-nav .nav-link {
  color: black;
  font-family: GothamRounded-Book;
}



.juji-topic-editor .CodeMirror {
  min-height: 20rem;
}

.juji-topic-editor-container {
  margin-right: 30px;
  margin-left: 30px;
}

.juji-topic-editor-container--hidden {
  visibility: hidden;
  max-height: 0;
}

.juji-topic-editor-toolbar {
  display: flex;
  font-size: 13px;
  height: 25px;
  border: 1px solid lightgrey;
  border-top-left-radius: 0.5em;
  border-top-right-radius: 0.5em;
  background: #e5e5e5;
  opacity: 0.6;
  flex-flow: row-reverse;
}

.juji-topic-editor-toolbar:hover {
  background: lightgrey;
}

.topic-editor__compile {
  font-size: 14px;
}

.topic-editor__compile:hover {
  color: white;
  font-weight: 600;
  background: darkgrey;
}


/* rainbow parens */
.cm-rainbow-bracket1 {color: #836fff;}
.cm-rainbow-bracket2 {color: #ff00ff;}
.cm-rainbow-bracket3 {color: #9b30ff;}
.cm-rainbow-bracket4 {color: #00ff7f;}
.cm-rainbow-bracket5 {color: #458588;}
.cm-rainbow-bracket6 {color: #b16286;}
.cm-rainbow-bracket7 {color: #cc241d;}
.cm-rainbow-bracket8 {color: #d65d0e;}
.cm-rainbow-bracket9 {color: #b5e4f4;}
.cm-rainbow-bracket10 {color: #4a4543;}
.cm-rainbow-bracket11 {color: #e8bbd0;}
.cm-rainbow-bracket12 {color: #fded02;}
.cm-rainbow-bracket13 {color: #01a252;}


.error-msg {
  color: red;
  margin: 5px;
  font-size: 12px;
}
.error-msg::before{
  content: " * "
}

.info-msg {
  color: green;
  margin: 5px;
  font-size: 12px;
}