/* TABS */

:root{
  --tab-padding-left:20px;
}

#main-tabs {
  padding-left: var(--tab-padding-left);
  background-color: var(--navbar-bg-color);
}

#main-tabs>.tab {
  margin: 0;
  padding: 0;
  width: 100%;
  border-radius: 7px 7px 0px 0px;
  padding: 7px 10px;
  margin-right: 10px;
  width: auto;
  background-color: var(--tab-not-selected);
  border: none;
  font-family: "Red Hat Display", serif;
  font-style: italic;
  font-weight: bold;
  color: var(--font-not-selected);
}

#main-tabs>.tab:hover {
  color: var(--font-color);
  background-color: var(--hover-bg-color);
}

#main-tabs>.tab--selected, #main-tabs>.tab--selected:hover {
  color: var(--font-color);
  background-color: var(--tab-selected);
}

#main-tabs-parent>.tab-content{
  height: 82vh;
}

.tab-content{
  padding:1vh var(--tab-padding-left);
}

.tab-content:not(.tab-content-empty) {
  width: 100%;
  height: 100%;
  background-color: var(--content-bg-color);
}

/* SECONDARY TABS */

.tab-parent:not(#main-tabs-parent)>.tab-container {
  padding-left: var(--tab-padding-left);
  font-size: 13px;
}

.tab-parent:not(#main-tabs-parent)>.tab-container>.tab {
  margin: 0;
  padding: 0;
  width: 100%;
  padding: 5px 10px;
  margin-right: 10px;
  width: auto;
  background-color: var(--tab-not-selected);
  border: transparent !important;
  border-bottom: none !important;
  border-radius: 0px !important;
  z-index: 999;
}

.tab-parent:not(#main-tabs-parent)>.tab-container>.tab:hover {
  background-color: var(--hover-bg-color);
}

.tab-parent:not(#main-tabs-parent)>.tab-container>.tab--selected {
  background-color: var(--item-bg-color);
  border-top: solid var(--logo-blue) !important;
  color: var(--main-color);
}

:not(.dissociated-tab-parent)>.tab-parent:not(#main-tabs-parent),
.dissociated-tab-parent {
  height: 100%;
}

.tab-parent:not(#main-tabs-parent)>.tab-content:not(.tab-content-empty),
.dissociated-tab-parent .dissociated-tab-content {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 10px;
  border-radius:10px;
  overflow: hidden;
  background-color: var(--item-bg-color);
  box-shadow: 2px 3px 6px 0px var(--shadow-color);
}