/*Reset paddings and margins*/
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
}

body {
    /* background-color: whitesmoke; */
    /* padding: 5px */
    background-color: #f0f1f6;
}

button {
    padding: 2px
}

#app {
    font-size: 13px;
    font-family: "Roboto", sans-serif;
    color: #414141;
    width: 100vw;
    height: 100vh;
    cursor: default;
    display: flex;
    /* flex-direction: row; */
}

.container {
    display:flex;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    border-radius: 0.5vw;
    margin-left: 0.7vw;
    margin-top: 0.7vw;
}

.container-title {
    padding-left: 4px;
    flex:90%;
}

.help {
    /* flex:10%; */
    padding-right: 4px;
    text-align: right;
    cursor: pointer;
}

.full-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.row {
    width: 100%;
    display: flex;
    flex-direction: row;
    /* box-shadow: 5px 2px 8px 0 rgba(0, 0, 0, 0.2); */
    align-items: stretch;
}

.column {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

#distribution-container {
    width: 98%;
    height: 100%;
    flex-direction: column;
    background-color: white;
    /* margin: 5px; */
    /* border-radius: 4px; */
}

#doc-list-container {
    display: flex;
    flex-direction: column;
    height:99%;
    align-items: stretch;
    background-color: white;
    /* margin: 5px; */
    /* border-radius: 4px; */
}

#filter-container {
    height: 15%;
    flex-direction: row;
    background-color: white;
    /* margin: 5px; */
    /* border-radius: 4px; */
}

#overview-container {
    width: 24%;
    flex-direction: column;
    background-color: white;
    /* margin: 5px; */
    /* border-radius: 4px; */
}

#text-container {
    width: 100%;
    flex-direction: column;
    background-color: white;
    margin-right: 0.7vw;
    /* margin: 5px; */
    /* border-radius: 4px; */
}

#stance-by-topic-container {
    height: 95%;
    flex-direction: column;
    background-color: white;
    /* margin: 5px; */
    /* border-radius: 4px; */
}

#adu-type-container {
    height: 99%;
    flex-direction: column;
    background-color: white;
    /* margin: 5px; */
    /* border-radius: 4px; */
}

#documents-container {
    /* height: 49%; */
    height: 98%;
    width: 100%;
    flex-direction: column;
    background-color: white;
    margin-right: 0.7vw;
    /* margin: 5px; */
    /* border-radius: 4px; */
}

#positions-container {
    height: 98%;
    flex-direction: column;
    background-color: white;
    margin-right: 0.7vw;
    /* margin: 5px; */
    /* border-radius: 4px; */
}

#annotations-container {
    width: 100%;
    flex-direction: column;
    background-color: white;
    margin-right: 0.7vw;
    /* margin: 5px; */
    /* border-radius: 4px; */
}

#argument-map-container {
    flex-direction: column;
    background-color: white;
    height: 100%;
    /* margin: 5px; */
    /* border-radius: 4px; */
}

#overview-container>.header,
#distribution-container>.header {
    width:100%;
    padding: 5px;
    height: 15%;
    /* border-bottom: 2px solid lightgray; */
    display: flex;
    flex-direction: row;
}

#text-container>.header {
    width:100%;
    padding: 5px;
    height: 20%;
    /* border-bottom: 2px solid lightgray; */
    display: flex;
    flex-direction: row;
}

#doc-list-container>.header,
#documents-container>.header,
#distribution-container>.header, 
#argument-map-container>.header {
    width:100%;
    padding: 5px;
    height: 4%;
    /* border-bottom: 2px solid lightgray; */
    display: flex;
    flex-direction: row;
}

#stance-by-topic-container>.header,
#adu-type-container>.header,
#positions-container>.header {
    width:100%;
    height: 13%;
    padding: 5px;
    /* border-bottom: 2px solid lightgray; */
    display: flex;
    flex-direction: row;
}

.no-document {
    color: rgb(0, 176, 240);
    margin: 8px;
}

/* Style the tab */
.tab {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    border-bottom: 5px solid #fff;
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);
}

/* Style the buttons that are used to open the tab content */
.tab-btn {
    background-color: #e7e4e4;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    border-radius: 0vw 0.7vw 0vw 0vw;
    color: #414141;
    width: 10vw;
}

/* Change background color of buttons on hover */
.tab-btn:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
.tab-btn.active {
    background-color: rgb(255, 255, 255);
    box-shadow: 0 0px 0px 0 rgb(0 0 0 / 20%);
}

.doc-title {
    margin-left: 10px;
    margin-bottom: 5px;
}

.tab button:last-of-type {
    margin-left: auto;
}

.remove-doc-btn {
    cursor: pointer;
    border: none;
    background-color: transparent;
}

.remove-doc-btn:hover {
    cursor: pointer;
    border: none;
    background-color: rgb(245, 245, 245);
}