/* These classes are defined by the SVG stuff. */
.cls-1,.cls-2,.cls-3,.cls-48{fill:none;}
.cls-1{stroke:#b2b4b7;stroke-dasharray:6 4;}
.cls-1,.disgust-color,.cls-11,.acceptance-color,.trust-color,.joy-color,.cls-15,.apprehension-color,.fear-color,.cls-18,.serenity-color,.cls-2,.cls-20,.pensiveness-color,.sadness-color,.cls-24,.annoyance-color,.anger-color,.cls-27,.cls-28,.distraction-color,.cls-3,.surprise-color,.ecstasy-color,.loathing-color,.admiration-color,.grief-color,.terror-color,.cls-4,.vigilance-color,.amazement-color,.rage-color,.cls-43,.cls-44,.cls-45,.cls-46,.cls-47,.cls-49,.cls-5,.cls-50,.cls-51,.cls-52,.cls-53,.cls-54,.cls-55,.cls-56,.cls-57,.interest-color,.anticipation-color,.cls-8,.boredom-color{stroke-width:0.5px;}
.disgust-color,.cls-11,.acceptance-color,.trust-color,.joy-color,.cls-15,.apprehension-color,.fear-color,.cls-18,.serenity-color,.cls-2,.cls-20,.pensiveness-color,.sadness-color,.cls-24,.annoyance-color,.anger-color,.cls-27,.cls-28,.distraction-color,.surprise-color,.ecstasy-color,.loathing-color,.admiration-color,.grief-color,.terror-color,.cls-4,.vigilance-color,.amazement-color,.rage-color,.cls-43,.cls-44,.cls-45,.cls-46,.cls-47,.cls-49,.cls-5,.cls-50,.cls-51,.cls-52,.cls-53,.cls-54,.cls-55,.cls-56,.cls-57,.interest-color,.anticipation-color,.cls-8,.boredom-color{stroke:#231f20;}
.cls-3{stroke:#fff;}
.cls-4{fill:#00b3f0;}
.cls-5{fill:#ffdeb5;}
.interest-color{fill:#fcc487;}
.anticipation-color{fill:#f9ad66;}
.cls-8{fill:#cbbedd;}
.boredom-color{fill:#b9aad3;}
.disgust-color{fill:#a390c4;}
.cls-11{fill:#d8e8b4;}
.acceptance-color{fill:#cadf8b;}
.trust-color{fill:#abd26a;}
.joy-color{fill:#ffdc7b;}
.cls-15,.cls-32{fill:#9fd4b0;}
.apprehension-color,.cls-31{fill:#7ac698;}
.fear-color{fill:#30b575;}
.cls-18{fill:#fffbd4;}
.serenity-color{fill:#ffed9f;}
.cls-20{fill:#c6dcf2;}
.pensiveness-color,.pensiveness-text-bg{fill:#a0c0e5;}
.sadness-color{fill:#74a8da;}
.cls-24{fill:#f9bab0;}
.annoyance-color{fill:#f48d80;}
.anger-color{fill:#f2736d;}
.cls-27{fill:#d886b8;}
.cls-28{fill:#bdd7e9;}
.distraction-color{fill:#89c7e4;}
.surprise-color{fill:#36aed7;}
.cls-33,.cls-56{fill:#f9baae;}
.cls-34{fill:#f59284;}
.ecstasy-color{fill:#ffca05;}
.loathing-color{fill:#8973b3;}
.admiration-color{fill:#8ac650;}
.grief-color{fill:#2983c5;}
.terror-color{fill:#00a551;}
.vigilance-color{fill:#f6923d;}
.amazement-color{fill:#0099cd;}
.rage-color{fill:#f05b61;}
.cls-43{fill:#7158a4;}
.cls-44{fill:#0071bb;}
.cls-45{fill:#faaf40;}
.cls-46{fill:#ed2e4e;}
.cls-47{fill:#0094d9;}
.cls-49{fill:#2caee4;}
.cls-50{fill:#bcdcf4;}
.cls-51{fill:#8ac8ed;}
.cls-52{fill:#acceed;}
.cls-53{fill:#7eaddc;}
.cls-54{fill:#f69c8d;}
.cls-55{fill:#f27060;}
.cls-57{fill:#e82d4c;}
.central-letter{fill:#231f20;}
.intermediate-letter{fill:#80868b;}

@keyframes kaboom {
  50% {
    fill: #FFFFFF;
    /*transform: scale(1.2);*/
    /*stroke: black;*/
  }
}

.petal-shape.animate-at-start {
    /*transform-origin: center center;*/
    -webkit-animation: kaboom 3s ease infinite;
    -moz-animation: kaboom 3s ease infinite;
    -ms-animation: kaboom 3s ease infinite;
    -o-animation: kaboom 3s ease infinite;
    animation: kaboom 3s ease infinite;
}

@media only screen and (min-width: 641px) {
    .main-container, #explore-and-more-info-container {
        flex-direction: row;
    }
    .column, #explore-container, #more-info-container {
        width: 50%;
    }
    #placeholder-container {
        position: absolute;
        top: 30%;
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

}

@media only screen and (max-width: 641px) {
    .main-container, #explore-and-more-info-container {
        flex-direction: column;
    }
    .column, #explore-container, #more-info-container {
        box-sizing: border-box;
        width: 100%;
    }
}

.main-container {
    box-sizing: border-box;
    position: absolute;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 700px;
}

.column {
    display: flex;
    flex-direction: column;
    /*padding: 35px;*/
    height: 100%;
    position: relative;
}

.emotion-container:hover > .filled-shape, .explore-shape:hover > .explore-arrow {
    fill: #FFFFFF;
}

/*.intermediate-emotion-container:hover > .intermediate-letter {
    fill: red;
}*/

.intermediate-word-bounding-box {
    fill: #FFFFFF;
}

#placeholder-text, #placeholder-title {
    padding-left: auto;
    padding-right: auto;
    padding-top: auto;
}

#placeholder-title {
    color: #729fcf;
    font-size: 40px;
}

#placeholder-text {
    font-size: 20px;
}

#content {
    position: absolute;
    top: 10%;
    width: 90%;
}

#emotion-title {
    width:90%;
    text-align: center;
    color: white;
    border-radius: 30px;
    font-size: 30px;
    padding:12px;
}

.intermediate#emotion-title {
    border: 1px solid black;
    color: black;
}

/*#emotion-description {
    text-align: center;
    font-size: 20px;
}*/


.label {
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Likely future */
}

#explore-and-more-info-container {
    display: flex;
    margin-bottom: 15px;
    width: 90%;
    /*justify-content: space-between;*/
}

#base-emotion-explore-container, #intermediate-emotion-explore-container, #more-info-container {
    /*width:50%;*/
    display: flex;
    flex-direction: column;
}

#more-info-container {
    justify-content: space-between;
}

.explore-shape {
    margin-left:auto;
    margin-right:auto;
    width: 80px;
}

.enabled.explore-shape:hover {
    cursor: hand;
    cursor: pointer;
}

.enabled.explore-shape:hover .explore-arrow {
    fill: white !important;
    stroke: black;
}

.enabled.explore-shape:hover .label {
    fill: black !important;
    stroke: black !important;
}

#opposite-text, #change-intensity-text, #intensity-text {
    text-align: center;
}

.explore-shape, #change-intensity-text, #intensity-text, #opposite-text, #opposite-button, #combo-emotion-0-button, #combo-emotion-1-button {
    margin-top: 5px;
    margin-bottom: 5px;
}

#change-intensity-text, #more-info-text {
    font-size: 18px;
}

#opposite-button  {
    text-align: center;
    color: white;
    border-radius: 15px;
    font-size: 15px;
    padding:6px;
    padding-left:12px;
    padding-right:12px;
    margin-right: auto;
    margin-left: auto;
}

#opposite-button:hover {
    cursor: hand;
    cursor: pointer;
    color: black;
    border-radius: 15px;
    border: 1px solid black;
    padding:5px;
    background-color: white !important;
}

#combo-emotion-0-button, #combo-emotion-1-button  {
    text-align: center;
    width:90%;
    color: white;
    border-radius: 18px;
    font-size: 18px;
    padding:6px;
}

#combo-emotion-0-button:hover, #combo-emotion-1-button:hover {
    cursor: hand;
    cursor: pointer;
    color: black;
    border-radius: 18px;
    border: 1px solid black;
    padding:5px;
    background-color: white !important;
}

#combo-emotion-0-button {
    margin-bottom: 0px;
}

#combo-emotion-1-button {
    margin-top: 0px;
}

#plus, #minus {
    fill: #FFFFFF;
    stroke: #FFFFFF;
}

.temp-div {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 10px;
    font-size: 15px;
    height:40px;
    align-items: center;
    border: 1px solid #D3D3D3;
    border-radius: 15px;
    /*width: 90%;*/
    /*background-color: #D3D3D3;*/
    margin-bottom: 5px;
    margin-top: 5px;
}

.temp-div:hover {
    background-color: #D3D3D3;
}

a.div-link {
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   text-decoration: none;
   /* Makes sure the link doesn't get underlined */
   z-index: 10;
   /* raises anchor tag above everything else in div */
   background-color: white;
   /*workaround to make clickable in IE */
   opacity: 0;
   /*workaround to make clickable in IE */
   filter: alpha(opacity=0);
   /*workaround to make clickable in IE */
}

#sei-container {
    text-align: center;
    height: 30px;
    width: 90%;
    border-radius: 15px;
    font-size: 15px;
    padding:12px;
    background-color: #D3D3D3;
}