/* entire body */
body{
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* Main container split */
main {
        display: flex;
        justify-content: flex-start; 
        align-items: flex-start;  
        gap: 20px;
    }

/* selected emotions */
.emotion-selections{
        flex-wrap: wrap;
        height: 60px;
        width: 400px;
        border: 2px solid black;
}

.emotion-selections #select-list > li{
        display: inline-block;
        position: relative;
        top: -22px;
        padding-right: 45px;
}

/* Passive showcase*/

.passive-showcase{
        text-align: center;
        height: 120px;
        width: 400px;
        border: 2px solid black;
}
.passive-showcase #passive-name{
        font-size: larger;
        font-weight: bold;
        position: relative;
        top: -19px;
        height: 25px;
        border-bottom: 1px solid black;
        padding-bottom:10px;
        background-color: gold;
}
.passive-showcase #passive-tip{
        position: relative;
        top: -20px;

}

/* Emotion Selector */

.emotion-selector{
        width: 400px;
        border: 2px solid black;

}

.emotion-selector .tooltip > img:hover {
        background-color: gray;

}

/* emotion image */
.emotion {
        width: 50px;
        height: 50px;
        background-color: lightgray;
        border: 1px solid black;
        margin: 10px;
        border-radius: 6px;
        position: relative;
        display: inline-block;
}

/* image tooltip */
.tooltip {
        position: relative;
        display: inline-block;
}

.tooltip .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: black;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 4px 0;
        position: absolute;
        z-index: 1;
}

.tooltip:hover .tooltiptext {
        visibility: visible;
}

/* Emotion selection boxes*/
.my-emotions{
        flex-wrap: wrap;
        text-align: center;
        border: 2px solid black;
        padding: 8px 0;
}

.emotion_quant{
        width: 40px;
        margin-right: 12px;
}


/* Passive List & table */
.passives-list{
        border: 2px solid black;
        height: auto;
        max-height: calc(100vh - 240px);
        overflow: scroll;      
}

th#table-name{
        width: 180px;
}
th#table-description{
        width: 1048px;
}
th#table-emotions{
        width: 310px;
}

tr,td{
        border: 1px solid black;
        padding-right: 20px;
        padding-left: 10px;
}

th{
        position: sticky;
        top:0;
        background-color: white;
}

/* Search Box */
#searchBox{
        margin-bottom: 4px;
        border: 2px solid black;
        width: 300px;
        padding: 4px;
}

/* Clear Button */
#clear-selection{
        display: block;
        text-align: center;
        height: 52px;
        width: 400px;
        cursor: pointer;
}