/* TASKING STRUCTURES */
  .jobQueue {
    margin-top: 1%;
    margin-left: 2%;
    float: left;
    width: 72%;
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 0% 2% 2% 1%;

}

.analytics {
    background-color: transparent !important;
    border-radius: 8px;
    border: 1.5px solid var(--secondary-accent);
    padding: 10px 10px 10px 10px;
    float: right;
    margin-top: 1%;
    margin-right: 3.5%;
    height: 85vh;
    width: 22%;

    overflow: auto;
    overflow-x: hidden;
}

.neuvueRow {
  display: flex
}

/* Clear floats after the columns */
.neuvueRow:after {
  content: "";
  display: table;
  clear: both;
}

/* Left half of the the task category header: ex. Soma Splitting Tasks */
.jobHeader{
  background-color: var(--complete-color);
  border-radius: 8px 0 0 8px;
  padding: 0.25vh 1vw;
  float: left;
  margin-top: 1%;
  left:0;
  flex-grow: 1;
  height: 3.2vh;
  margin: 1% 0 1% 0%;
  float: left;
  font-family: var(--header-font);
  color: var(--background);
  font-size: 1.9vh;
  text-align: left;
  font-weight: normal;
  cursor: pointer;
}

.jobHeader.active, .jobHeader:hover {
  background-color: var(--complete-color-actived);
  color:var(--background);
}

#pinkyHeader {
  background-color: var(--secondary-accent);
}

/* Task category header buttons */
.header-sizing {
  margin: 1% 0 1% 0.5%;
  background-color: transparent;
  right:0;
  height: 3.2vh;
}

.header-outline {
  background-color: transparent;
  right:0;
  height: 3.2vh;
  border: 1.5px solid var(--complete-color);
  padding: 0.2vh 0.2vw;
  float: right;
  font-family: var(--header-font);
  font-size: 1.5vh;
  cursor: pointer;
  color: var(--complete-color);
}

.header-outline:hover{
  background: var(--primary-accent);
  border-color: transparent;
  color: var(--background);
}

.header-box-text{
  position: relative;
  width:100%;
  height:100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  outline: none;
  border: none;
  color: var(--complete-color);
}

.header-box-text:hover {
  color: var(--background);
}

.rightBorderRounded {
  border-radius: 0 8px 8px 0;
}

/* Override toast transparency */
#toast {
  background-color: white;
}

/* Tables for the content */
table {
  background-color: transparent !important;
  border-radius: 8px;
  padding: 2%;
  font-size: 1.65vh;
  position: relative;
  width: 100%;
  font-family: var(--header-font);
  color: var(--primary-accent);
  font-weight: normal;
  border-collapse: collapse;
}

th {
  background-color: var(--background);
  padding: 8px !important;
  text-align: left;
  border-bottom: 1px solid var(--secondary-accent);
  position: sticky;
  top: 0;
}

td {
  padding: 1% !important;
  background-color: transparent !important;
  text-align: left;
}

tr:hover {
  background-color: var(--transparent-hover);
  border-radius: 0px;
}
/*
tbody.pending >:nth-child(2) {
  color: var(--complete-color) !important;
}
*/

/* Tab Container */
.bin{
  width: 100%;
  display:block;
}

.tab {
  overflow: hidden;
  background-color: transparent;
  width:100%;
}

/* Tabs ex: 'In Progress', 'Pending', 'Closed' */
.tab button {

  background-color: transparent !important;
  color: var(--primary-accent);
  padding: 0.8vh 1vw;
  border: 1.5px solid var(--transparent-hover);
  border-bottom: none;
  outline: none;
  text-align: center;
  cursor: pointer;
  transition: 0.3s;
  font-size: 1.5vh;
  border-radius: 8px 8px 0px 0px;
  min-width: 10%;

}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: var(--transparent-hover) !important;
  border:transparent;
  color: var(--primary-accent);
}

/* Create an active/current "tab button" class */
.tab button.active {
  background-color: var(--secondary-accent) !important;
  border:transparent;
  color: var(--primary-accent);
}

/* Style the tab content */
.tabcontent {
  align-items: center;
  float: center;
  display: block;
  font-size: 1.2vh;
  border-radius: 0px 8px 8px 8px;
  border: 1.5px solid var(--secondary-accent);
  background-color: var(--table-background) !important;
  max-height: 30vh;
  min-height: 20vh;
  overflow: -moz-scrollbars-vertical;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;

}

.analyticsSubHeader {
  font-size: 2vh;
  color: var(--primary-accent);
}

/* Controls the style of the scrollbars */

::-webkit-scrollbar {
  -webkit-appearance: none;
  border-radius: 8px;
  width: 8px;
}
::-webkit-scrollbar-thumb {
  border-radius: 4px;
  margin: 5% 5%;
  background-color: var(--transparent-hover);
}

.tags {
  display: inline-block;
  position: relative;
  width: 3vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}
.container-and-tabs{
  display: flex;
  flex-direction: row;
}
.tab-holder{
  margin-top: 2vh;
  flex-direction: column;
  left:0;
  margin-left: 1vw;
  width: 16vw;
  border-radius: 8px;
  border: 1.5px solid var(--secondary-accent);
  overflow-y: scroll;
  height: 87vh;
}
.tab-item{
  font-size: 12pt;
  padding: 5px 20px;
  border: transparent;
  color: var(--navbar-text);
  background-color: transparent;
  width: 15vw;
  text-align: left;
}
.tab-item:hover{
  color: var(--primary-accent-activated);
}
.sub-h2{
  padding: 5px 35px;
}
.sub-h3{
  padding: 5px 50px;
}
.tab-header{
  color: var(--navbar-text);
  font-size: 20pt;
  padding: 5px 20px;
  font-weight: 600;
}

.getting-started-container {
  background-color: transparent !important;
  border-radius: 8px;
  border: 1.5px solid var(--secondary-accent);
  padding: 10px 10px 10px 10px;
  float: center;
  height: 87vh;
  margin-top: 2vh;
  margin-left: 3vw;
  width: 70vw;
  right: 0;
  overflow: auto;
  overflow-x: hidden;
}

.getting-started-content{
  border-radius: 8px;
  padding: 20px 30px 20px 30px;
  background-color: var(--transparent-card-items-background);
  margin: 1%;
  width: 98%;
  min-height: 97%;
  font-size: 14pt;
  color: var(--primary-accent);
}
.getting-started-content h1 {
  font-size: 26pt;
  font-weight: 600;
}
.getting-started-content h2 {
  font-size: 22pt;
  font-weight: 500;
}
.getting-started-content h3 {
  font-size: 20pt;
  font-weight: 400;
}

.changelog {
  font-size: 12pt;
}

.changelogLine {
  color: var(--transparent-analytics);
  width: 90%;
  left: 5%;
}

.bg-pink {
  background-color: #d63384;
}

.text-pink {
  color: #d63384;
}