body {
    color: #444;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 16px;
    line-height: 1.5em;
    background: #f9f8ff;
    padding: 0px;
    margin: 0px;
}

pre {
    display: inline;
    margin: 0px;
    padding: 0px;
    color: #444;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 15px;
    line-height: 1.5em;

    white-space: pre-wrap;
}

/* Header */

#header {
    position: fixed;
    width: 100%;
    height: 24px;
    top: 0px;
    z-index: 1000;
    background: white;
    padding-top: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #cdd6e4;
}
#header-content {
    display: inline-block;
    width: 800px;
}
#header a {
    text-decoration: none;
}
#nav a, #account-nav a {
    color: #474450;
    margin-left: 16px;
}
#logo {
    float: left;
    font-size: 24px;
}
#logo a {
    color: #8018ff;
}
#nav {
    display: inline;
}
#account-nav {
    float: right;
}


/* Content */

#content {
    margin-bottom: 120px;
}


/* Footer */
#footer a {
    text-decoration: none;
    color: #444;
}


/* General */

.center {
    text-align: center;
}
.left {
    text-align: left;
}
body .hidden {
    display: none;
}

.segment {
    display: block;
    text-align: left;
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 8px;
    padding-bottom: 8px;
}

h1 {
    font-size: 24px;
    font-weight: normal;
    line-height: 1em;
    margin-bottom: 0px;
    padding-bottom: 0px;
}

h2 {
    font-size: 18px;
    font-weight: normal;
    line-height: 1em;
}

hr {
    border: solid 1px #efefef;
}

a {
    color: #189be6;
    text-decoration: none;
}


/* Forms */

.card {
    position: relative;
    text-align: left;
    display: block;
    /*border-radius: 0px 0px 7px 7px;*/
    padding: 32px;
    margin: 24px;
    margin-left: auto;
    margin-right: auto;
    width: 738px;
    box-shadow: 0 3px 6px hsla(0, 0%, 0%, .15);
    background: white;
}

.info-card {
    background: #fff3e5;
    box-shadow: none;
    border: solid 1px #ffe2be;
}

.segment input[type=text], .segment input[type=email], .segment input[type=url], .segment input[type=number], .segment textarea, .segment select {
    width: 724px;
    padding: 7px;
    border: 1px solid #dfdee8;
    border-radius: 5px;
    font-size: 15px;
    background: #fbfaff;
}
.segment input[type=text], .segment input[type=email], .segment input[type=url], .segment input[type=number], .segment select {
    height: 42px;
}
.segment input[type=number] {
    width: 120px;
}
.segment input[type=email] {
    width: 400px;
}
.segment form textarea {
    height: 120px;
}
.segment label {
    padding-bottom: 4px;
    font-size: 13px;
}
.form-section {
    display: block;
    padding-top: 20px;
}
#button-wrapper {
    text-align: right;
}
body .button {
    width: auto;
    height: auto;
    background: #8018ff;
    color: #fcfaff;
    padding: 14px 36px 14px 36px;
    cursor: pointer;
    font-size: 15px;
    font-weight: bold;
    border: none;
    box-shadow: 0 1px 3px hsla(0, 0%, 0%, .2);
    border-radius: 5px;
    text-decoration: none;
    margin-top: 7px;
}
body .button-secondary {
    background: None;
    color: inherit;
    border: solid 1px lightgrey;
}
body .button-black {
    background: #3a3a3a;
    color: #ececec;
}
body .button-green {
    background: #00b300;
    color: #f2fdf2;
}
body .own-line {
    display: block;
}
.currency {
    width: 80px;
}

/* Survey */

.pagetitle {
    /*background: #461746;
    color: #fdf5ff;*/
    margin-top: 70px;
    margin-bottom: 4px;
    line-height: 1em;
}
#survey-header {
    padding-bottom: 24px;
    /*background: #461746;
    color: #fdf5ff;*/
}

.question p {
    font-size: 20px;
    font-weight: normal;
    line-height: 1.45em;
    margin-top: 0px
}

.question .segment {
    /*padding-top: 64px;
    padding-bottom: 64px;*/
    width: 738px;
}

.evens {
    background: #f9f0f9;
    /*color: #fdf5ff;*/
}

.question-badge {
    visibility: hidden;
    opacity: 0;
    transition:visibility 0.5s linear,opacity 0.5s linear;
}
.question-badge.answered {
    visibility: visible;
    opacity: 1;
}
.question-badge-content {
    position: absolute;
    right: 14px;
    top: 10px;
    font-size: 32px;
    font-style: italic;
    color: #998aab;
}

.question-badge-bg {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 0;
    height: 0;
    border-top: 75px solid #f0f1fb;
    border-left: 75px solid transparent;
}

#points-badge {
    position: fixed;
    right: 42px;
    bottom: 32px;
    height: 62px;
    width: 85px;
    border-radius: 50%;
    background: #11557C;
    box-shadow: 0 5px 6px hsla(0, 0%, 0%, .15);
    padding-top: 33px;
    padding-left: 10px;
    text-align: center;
}
#points {
    color: white;
    font-size: 28px;
}
#points-text {
    color: white;
    font-size: 14px;
}


/* Survey results */

.answers-badge {
    visibility: hidden;
    opacity: 0;
    transition:visibility 0.5s linear,opacity 0.5s linear;
}
.answers-badge.answered {
    visibility: visible;
    opacity: 1;
}
.answers-badge-content {
    position: absolute;
    right: 14px;
    top: 10px;
    font-size: 18px;
    color: #998aab;
}

.answers-badge-bg {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 0;
    height: 0;
    border-top: 75px solid #f0f1fb;
    border-left: 75px solid transparent;
}

.no-answers {
    text-align: center;
    color: #767677;
}


.text-answer {
    padding-bottom: 18px;
    padding-left: 2px;
    margin-left: 24px;
    margin-top: 48px;
    border-left: solid 4px #189be6; /* #f0f1fb;*/
    width: 600px;
}
.text-answer-bullet {
    float: right;
    font-size: 48px;
    color: #f0f1fb;
}
.text-answer-title {
    float: right;
    font-size: 13px;
    font-weight: bold;
    color: #77737b;
}
.text-answer-content {
    font-size: 17px;
    padding-left: 8px;
}
#survey-stopped-description {
    color: red;
    display: none;
}
#stop-survey-btn, #run-survey-btn {
    display: none
}

/* Charts */

#chart-pricing {
    display: inline;
}
.chart-label-y {
    transform: rotate(-90deg);

    /* Safari */
    -webkit-transform: rotate(-90deg);
    /* Firefox */
    -moz-transform: rotate(-90deg);
    /* IE */
    -ms-transform: rotate(-90deg);
    /* Opera */
    -o-transform: rotate(-90deg);
    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

/* Home */

.home-title {
    float: left;
}
.new-survey-button {
    float: right;
}
.surveys-list {
    margin-top: 24px;
    padding-top: 12px;
}
.survey-link {
    padding-bottom: 24px;
    margin-bottom: 24px;
}
.survey-link-name {
    float: left;
    color: #189be6;
    font-size: 18px;
}
.survey-link-name:hover {
    text-decoration: underline;
}
.survey-link-info {
    /* Contains tag and survey-link-date divs */
    float: right;
    text-align: right;
}
.survey-link-date {
    color: #485F6E;
    text-align: right;
    text-decoration: none;
    font-weight: bold;
}
.survey-link-date:hover {
    text-decoration: underline;
}

#sign-out-link, #account-link {
    display: none;
}

/* Can contact page */

.input-group {
    border: solid 1px #f0f0f0;
    border-radius: 7px;
    padding: 12px;
}

/* Tags */

.tag {
    background: #e4e4e4;
    color: #5f5f5f;
    font-size: 13px;
    border-radius: 3px;
    padding: 5px;
    margin-right: 8px;
}
.tag-idea {
    background: #c3e0ff;
    color: #45505d;
}
.tag-landing-page {
    background: #d5cefb;
    color: #555363;
}
.tag-user-survey {
    background: #fbcece;
    color: #6d5959;
}