:root {
    --bg-darkprime: rgba(38,38,38,1);
}

#speechContent {
}

.protocol-tree-content {
    border-right: 1px gray solid;
    background-color: rgba(125,125,125, 0.2);
    position: relative;
    border-right: 1px gray solid;
    border-bottom: 1px gray solid;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

.protocol-tree {
    overflow-y: auto;
    max-height: 92vh;
    width: 30vw;
    min-width: 200px;
}

.close-open-btn {
    position: absolute;
    top: 2.5%;
    height: 40px;
    left: 100%;
    width: 40px;
    border-radius: 0% 50% 50% 0%;
    background-color: var(--bg-darkprime);
    z-index: 1 !important;
    justify-content: center;
    display: flex;
    transition: 0.25s;
    align-items: center;
    cursor: pointer;
}

    .close-open-btn:hover {
        transition: 0.25s;
    }

    .close-open-btn i {
        font-size: 20px;
        margin-right: 10px;
        color: white;
    }

.tree-item {
    padding-left: 8px;
    padding-right: 8px;
    cursor: pointer;
    transition: 0.15s;
    border-bottom: rgba(125, 125, 125, 0.2) 1px dashed;
}

    .tree-item:hover {
        background-color: white;
        color: black !important;
        border-left: gold 8px solid;
        color: black;
        transition: 0.15s;
    }

    .tree-item .wrapper {
        align-items: center;
        align-content: center;
    }

    .tree-item .loader {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
        background-color: white;
        padding-left: 15px;
        display: none;
    }

/*Used when the item should be highlighted an marked.*/
.tree-item-marked {
    background-color: gold !important;
    color: white !important;
}

.item-divider {
    background-color: var(--bg-darkprime);
    padding: 3px;
    color: white;
    text-align: center;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

    .item-divider label {
        margin: 0;
        padding: 0;
    }


.protocol-item {
    align-items: center;
}

    .protocol-item .poll-wrapper {
        padding-left: 2px;
        padding-right: 2px;
        margin-left: 3px;
        margin-right: 3px;
        align-items: center;
        /*border-bottom: gold 2px solid;*/
    }

    .protocol-item .icon {
        margin-right: 3px;
    }

    .protocol-item .polls {
        border-radius: 30%;
        font-weight: bold;
    }

.agenda-item {
    margin-left: 15px;
}

    .agenda-item[data-id="00000000-0000-0000-0000-000000000000"] {
        font-weight: bold;
    }

        .agenda-item[data-id="00000000-0000-0000-0000-000000000000"] i {
            color: black;
        }

.poll-item {
    margin-left: 15px;
}

    .poll-item:hover {
    }

.speech-item {
    padding-top: 2px;
    padding-bottom: 2px;
    margin-left: 15px;
    margin-left: 15px;
    padding-left: 15px;
    background-color: rgba(255,255,255,0.6);
}

    .speech-item:hover .speech-categories {
        display: block !important;
        transition: 0.15s;
    }

    .speech-item .speech-categories {
        transition: 0.15s;
        border-left: 1px lightgray solid;
        padding-left: 6px;
        display: none;
        font-size: small;
    }

    .speech-item .subcategory {
        padding-left: 12px;
        position: relative;
    }

        .speech-item .subcategory::before {
            content: '';
            left: -6px;
            top: 50%;
            height: 1px;
            width: 14px;
            background-color: lightgray;
            position: absolute;
        }

.read-more-item {
    text-align: right;
    font-style: italic;
    cursor: pointer !important;
    margin-left: 15px;
    padding-right: 8px;
    transition: 0.15s;
    color: rgba(0,0,0,0.5);
    font-size: small;
}

    .read-more-item:hover {
        transition: 0.15s;
        background-color: transparent !important;
        color: black;
    }

.expanded-item {
    background-color: var(--bg-darkprime);
    color: white;
}

.expanded-item .speech-categories{
    display:block;
}

.agenda-item-inspector {
    position: absolute;
    border-radius: 6px;
    border: gray 1px solid;
    background-color: white;
    box-shadow: rgba(0, 0, 0, 0.7) 0px 2px 7px;
    z-index: 9999999;
    padding: 8px;
    display: none;
}

    .agenda-item-inspector .content {
        max-height: 300px;
        max-width: 350px;
        overflow-y: auto;
        font-size: small;
        overflow-x: no-content;
    }

    .agenda-item-inspector .close {
        cursor: pointer !important;
    }

.fulltext-analysis-div {
    overflow-y: auto;
    height: calc(100vh - 32px);
    width: 100%;
    max-width: 1000px;
    position: relative;
    /*border: 1px gray solid;*/
}

    .fulltext-analysis-div .fulltext-loader {
        z-index: 5;
    }

    .fulltext-analysis-div .statistics-loader {
        z-index: 3;
        position: absolute !important;
    }

    .fulltext-analysis-div .loader {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: rgba(255,255,255,0.8);
        top: 0;
        left: 0;
    }

        .fulltext-analysis-div .loader .lds-ripple {
            position: absolute;
            left: calc(50% - 40px);
            top: calc(50% - 40px);
        }

        .fulltext-analysis-div .loader p {
            position: absolute;
            top: 55%;
            width: 100%;
            text-align: center;
        }

.empty-message {
    position: absolute;
    top: 47%;
    width: 100%;
    text-align: center;
}

.analysis-wrapper {
    /*background-color:lightgray;*/
    position: absolute;
    height: 100%;
    width: 100%;
}

    .analysis-wrapper .breadcrumbs {
        height: 30px;
        font-size: 15px;
        display: flex;
        align-items: center;
        position: absolute;
        padding-left: 5px;
        padding-right: 5px;
        background-color: var(--bg-darkprime);
        color: white;
        justify-content: space-between;
        top: 165px;
        width: 100%;
    }

        .analysis-wrapper .breadcrumbs span {
            text-overflow: ellipsis !important;
            max-height: 30px;
        }

    .analysis-wrapper .analysis-menu-header {
        position: absolute;
        top: 195px;
        display: flex;
        justify-content: stretch;
        background-color: lightgray !important;
        align-items: center;
        border-left: gray 1px solid;
        box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
        border-right: gray 1px solid;
        color: black;
        height: 30px;
        width: 100%;
        cursor: default;
        z-index: 4 !important;
    }

        .analysis-wrapper .analysis-menu-header button {
            height: 30px;
            width: 100%;
            padding-top: 0 !important;
            padding-bottom: 0 !important;
            margin: 0px;
            border-radius: 0;
            background-color: lightgray;
            transition: 0.25s;
        }

            .analysis-wrapper .analysis-menu-header button:hover {
                color: black;
                background-color: white;
                transition: 0.25s;
            }

        .analysis-wrapper .analysis-menu-header .selected-btn {
            color: black;
            background-color: white;
        }

    .analysis-wrapper .header {
        position: absolute;
        width: 100%;
        height: 165px;
    }

        .analysis-wrapper .header .quote {
            position: absolute;
            left: 0;
            top: calc(100% - 3.5rem);
            color: black;
            z-index: 3 !important;
            font-size: 7rem;
            font-family: Georgia, "Times New Roman", Times, serif !important;
            text-shadow: 2px 2px white;
            margin: 0;
        }

        .analysis-wrapper .header .header-card {
            border: 1px gray solid;
            transition: 0.15s;
            box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
            margin-top: 30px;
            z-index: 1 !important;
            background-color: white;
            padding-top: 3px;
            padding-bottom: 3px;
            padding-left: 8px;
            padding-right: 8px;
        }

            .analysis-wrapper .header .header-card .expanded {
                display: none;
            }

            .analysis-wrapper .header .header-card .not-expanded {
            }

            .analysis-wrapper .header .header-card:hover {
                transition: 0.15s;
                background-color: white;
                border: 1px black solid;
                margin-top: 0;
                z-index: 3 !important;
            }

                .analysis-wrapper .header .header-card:hover .expanded {
                    display: block;
                    transition: 0.15s;
                }

                .analysis-wrapper .header .header-card:hover .not-expanded {
                    display: none;
                    transition: 0.15s;
                }

        .analysis-wrapper .header .design-div {
            position: absolute;
            height: 60%;
            width: 100%;
            bottom: 0;
            left: 0;
            background: linear-gradient(-45deg, var(--bg-darkprime), gray, gray, var(--bg-darkprime));
            background-size: 400% 400%;
            border-radius: 100% 100% 0% 0%;
            z-index: 1;
        }

        .analysis-wrapper .header .name-badge {
            position: absolute;
            left: calc(50% - 100px);
            width: 200px;
            font-size: 15px;
            z-index: 3;
            background-color: var(--bg-darkprime);
            color: white;
            padding-top: 3px;
            padding-bottom: 3px;
            padding-left: 8px;
            padding-right: 8px;
            bottom: 0;
            text-align: center;
        }

        .analysis-wrapper .header .portrait {
            width: 150px !important;
            height: 150px !important;
            object-fit: cover;
            border-radius: 50%;
            border: 1px solid var(--bg-darkprime);
            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
            transition: 0.25s;
            z-index: 2 !important;
        }

            .analysis-wrapper .header .portrait:hover {
                transition: 0.25s;
                transform: scale(1.05, 1.05);
                cursor: pointer;
            }

    .analysis-wrapper .analysis-content {
        height: calc(100% - 220px);
        overflow-y: auto;
        /*font-family: Georgia, "Times New Roman", Times, serif !important;*/
        width: 100%;
        position: absolute;
        color: black;
        top: 195px;
        bottom: 25px;
        border: 1px gray solid;
        padding-top: 40px;
        padding-left: 8px;
        padding-right: 8px;
        padding-bottom: 16px;
        font-size: 20px;
        font-display: block;
        line-height: 40px;
        cursor: default;
    }

.fulltext-analysis-div .legend {
    position: absolute;
    bottom: 0;
    height: 30px;
    align-items: center;
    width: 100%;
    display: flex;
    border-left: gray 1px solid;
    border-bottom: gray 1px solid;
    border-top: gray 1px solid;
    border-right: gray 1px solid;
    justify-content: space-evenly;
    background-color: white;
}

.fulltext-analysis-div .english-speech-view {
    height: calc(100% - 220px);
    overflow-y: auto;
    width: 100%;
    position: absolute;
    top: 195px;
    padding-top: 40px;
    padding-left: 8px;
    padding-right: 8px;
    padding-bottom: 16px;
    border: 1px gray solid;
    cursor: default;
}

    .fulltext-analysis-div .english-speech-view .english-speech {
        font-size: 16px;
        font-display: block;
        line-height: 27px;
    }

.fulltext-analysis-div .speech-statistics-view {
    height: calc(100% - 220px);
    overflow-y: auto;
    width: 100%;
    position: absolute;
    top: 195px;
    padding-top: 40px;
    padding-left: 8px;
    padding-right: 8px;
    padding-bottom: 16px;
    cursor: default;
}

.fulltext-analysis-div .analysis-loading-div {
    position: absolute;
    bottom: 0;
    height: 30px;
    align-items: center;
    width: 100%;
    border-left: gray 1px solid;
    border-bottom: gray 1px solid;
    border-top: gray 1px solid;
    border-right: gray 1px solid;
    background-color: white;
}

    .fulltext-analysis-div .analysis-loading-div .progress {
        border-radius: 0 !important;
        height: 100% !important;
        position: relative;
        width: 100%;
    }

    .fulltext-analysis-div .analysis-loading-div p {
        position: absolute;
        margin-bottom: 0;
        left: 8px;
        font-size: 15px;
        color: var(--bg-darkprime);
        transform: translateY(50%);
    }

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.token {
    transition: 0.15s;
}

    .token:hover {
        background-color: gray;
        color: white;
        transition: 0.15s;
        border-radius: 3px;
        box-shadow: rgba(0, 0, 0, 0.25) 0px 2px 7px;
    }

.fulltext-analysis-div .shout {
    padding-left: 1.2em;
    padding-right: 1.2em;
    padding-top: 3px;
    padding-bottom: 3px;
    border-left: var(--bg-darkprime) 4px solid;
    transition: 0.15s;
    background-color: gray;
    color: white;
    line-height: normal !important;
    font-size: 15px;
    border-radius: 5px;
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 2px 7px;
    align-items: center;
}

    .fulltext-analysis-div .shout:hover {
        transition: 0.15s;
        background-color: var(--bg-darkprime);
    }

        .fulltext-analysis-div .shout:hover .open-speaker-inspector {
            text-decoration: underline;
            cursor: pointer;
        }

.fulltext-analysis-div .shout-img {
    transition: 0.15s;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 2px 7px;
    border-radius: 50%;
    object-fit: cover;
    width: 40px !important;
    height: 40px !important;
}

.sentence {
    font-style: normal;
    transition: 0.25s;
    /*border-radius: 5px;*/
    border: 1px solid transparent;
}

.hovered-sentence {
    border: 1px gray solid;
    transition: 0.25s;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 2px 7px;
}

.neu-sentence {
    background-color: rgba(0, 152, 255, 0.1);
}

.neg-sentence {
    background-color: rgba(255, 0, 0, 0.09);
}

.pos-sentence {
    background-color: rgba(9, 160, 21, 0.1);
}

.sentiment-question {
    transition: 0.15s;
    color: gray;
}

    .sentiment-question:hover {
        transform: scale(1.1, 1.1);
        transition: 0.15s;
    }

/*Named entityt classes*/
.entity {
    border-radius: 3px;
    text-decoration: underline;
    font-weight: normal !important;
}

.PER {
    /*background-color: gold;*/
    text-decoration-color: orange;
}

.ORG {
    text-decoration-color: steelblue;
}

.LOC {
    text-decoration-color: green;
}

.MISC {
    text-decoration-color: gray;
}