/* 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,.disgusto-color,.cls-11,.accettazione-color,.fiducia-color,.gioia-color,.cls-15,.apprensione-color,.paura-color,.cls-18,.serenità-color,.cls-2,.cls-20,.pensierosità-color,.tristezza-color,.cls-24,.irritazione-color,.rabbia-color,.cls-27,.cls-28,.distrazione-color,.cls-3,.sorpresa-color,.estasi-color,.ripugnanza-color,.ammirazione-color,.angoscia-color,.terrore-color,.cls-4,.vigilanza-color,.stupore-color,.collera-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,.interesse-color,.aspettativa-color,.cls-8,.noia-color{stroke-width:0.5px;}
.disgusto-color,.cls-11,.accettazione-color,.fiducia-color,.gioia-color,.cls-15,.apprensione-color,.paura-color,.cls-18,.serenità-color,.cls-2,.cls-20,.pensierosità-color,.tristezza-color,.cls-24,.irritazione-color,.rabbia-color,.cls-27,.cls-28,.distrazione-color,.sorpresa-color,.estasi-color,.ripugnanza-color,.ammirazione-color,.angoscia-color,.terrore-color,.cls-4,.vigilanza-color,.stupore-color,.collera-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,.interesse-color,.aspettativa-color,.cls-8,.noia-color{stroke:#231f20;}
.cls-3{stroke:#fff;}
.cls-4{fill:#00b3f0;}
.cls-5{fill:#ffdeb5;}
.interesse-color{fill:#fcc487;}
.aspettativa-color{fill:#f9ad66;}
.cls-8{fill:#cbbedd;}
.noia-color{fill:#b9aad3;}
.disgusto-color{fill:#a390c4;}
.cls-11{fill:#d8e8b4;}
.accettazione-color{fill:#cadf8b;}
.fiducia-color{fill:#abd26a;}
.gioia-color{fill:#ffdc7b;}
.cls-15,.cls-32{fill:#9fd4b0;}
.apprensione-color,.cls-31{fill:#7ac698;}
.paura-color{fill:#30b575;}
.cls-18{fill:#fffbd4;}
.serenità-color{fill:#ffed9f;}
.cls-20{fill:#c6dcf2;}
.pensierosità-color,.pensiveness-text-bg{fill:#a0c0e5;}
.tristezza-color{fill:#74a8da;}
.cls-24{fill:#f9bab0;}
.irritazione-color{fill:#f48d80;}
.rabbia-color{fill:#f2736d;}
.cls-27{fill:#d886b8;}
.cls-28{fill:#bdd7e9;}
.distrazione-color{fill:#89c7e4;}
.sorpresa-color{fill:#36aed7;}
.cls-33,.cls-56{fill:#f9baae;}
.cls-34{fill:#f59284;}
.estasi-color{fill:#ffca05;}
.ripugnanza-color{fill:#8973b3;}
.ammirazione-color{fill:#8ac650;}
.angoscia-color{fill:#2983c5;}
.terrore-color{fill:#00a551;}
.vigilanza-color{fill:#f6923d;}
.stupore-color{fill:#0099cd;}
.collera-color{fill:#f05b61;}
/* Intermediate/combination emotion colors */
.aggressività-color{fill:#f3774f;}
.ottimismo-color{fill:#fbae21;}
.disprezzo-color{fill:#bd678a;}
.soggezione-color{fill:#009f8f;}
.amore-color{fill:#c5c82b;}
.rimorso-color{fill:#597bbc;}
.disapprovazione-color{fill:#158ec9;}
.sottomissione-color{fill:#45b651;}

/* Intermediate emotions: gray by default, show blended color on hover */
.emotion-container:hover .intermediate-letter.aggressività{fill:#f3774f;}
.emotion-container:hover .intermediate-letter.ottimismo{fill:#fbae21;}
.emotion-container:hover .intermediate-letter.disprezzo{fill:#bd678a;}
.emotion-container:hover .intermediate-letter.soggezione{fill:#009f8f;}
.emotion-container:hover .intermediate-letter.amore{fill:#c5c82b;}
.emotion-container:hover .intermediate-letter.rimorso{fill:#597bbc;}
.emotion-container:hover .intermediate-letter.disapprovazione{fill:#158ec9;}
.emotion-container:hover .intermediate-letter.sottomissione{fill:#45b651;}
.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, .emotion-container:hover > g > .filled-shape, .explore-shape:hover > .explore-arrow {
    fill: #FFFFFF;
}

/* Intermediate emotions keep their blended color on hover (no color change) */

.intermediate-word-bounding-box {
    fill: #FFFFFF;
    opacity: 0;
    cursor: pointer;
}

#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;
}