/* Sidebar */
#sidebar {
   position: absolute;
   margin: var(--margin);;
   z-index: 5000;
   width: 325px;
   max-height: calc(100vh - 2 * var(--margin));
   background: var(--background);
   overflow-y: auto;
}

.group {
   margin: 20px 0;
   width: 100%;
}

/* Header Section*/

.header {
   padding: var(--padding);
   background: var(--secondary-background);
}


.gradient-line {
   height: 6px;
   width: 100%;
   background: var(--gradient);/* var(--accent); /*var(--gradient);*/
}

/* Tabs */

.tabs {
   background: var(--secondary-background);
   user-select: none;
}

.tab-container {
   display: grid;
   grid-template-columns: 1fr 1fr;
}

.tab {
   text-align: center;
   padding: 10px 0;
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
   color: var(--secondary-text);
}

.tab:hover {
   color: var(--primary-text);
}

.tab-active {
   color: var(--primary-text);
}

.tab-bar {
   height: 2px;
   background: var(--accent);
   width: 50%;
   transition: .3s all ease-in-out;
   left: 0%;
}


/* Content Section */

.content {
   position: relative;
   box-sizing: border-box;
   overflow-x: hidden;
   transition: .3s all ease-in-out;
}

.content-group {
   position: absolute;
   top: 0;
   
   /* left: 0; */
   padding: 0 var(--padding);
   width: 100%;
   box-sizing: border-box;
   transition: .3s all ease-in-out;
}

::-webkit-scrollbar {
   width: 0px;  /* Remove scrollbar space */
   background: transparent;  /* Optional: just make scrollbar invisible */
}

#content-group-1 {

}

#content-group-2 {
   transform: translateX(100%);
}

.h2-row {
   display: flex;
   justify-content: space-between;
}

.h2-val {
   font-weight: 500;
   transition: .3s all ease-in-out;
   color: var(--primary-text);
   font-size: 14px;
}

/* Selector Component */

.selector-container {
   background: var(--secondary-background);
   display: grid;
   margin: 10px 0;
   grid-template-columns: repeat(2, 1fr);
}

.selector-option {
   padding: var(--input-padding) 0;
   color: var(--secondary-text);
   text-align: center;
   cursor: pointer;
   font-size: 14px;
   font-weight: 500;
   transition: .2s all ease-in-out;
   border-top: 2px solid transparent;
}

.selector-active {
   border-top: 2px solid var(--accent) !important;
   color: var(--primary-text);
}

/* Hour Filter */

.graph-container {
   display: relative;
   height: 75px;
   margin-bottom: 5px;
   box-sizing: border-box;
}

.graph {
   box-sizing: border-box;
   display: grid;
   grid-template-columns: repeat(24, 1fr);
   height: 75px;
   grid-gap: 3px;
   position: absolute;
   width: calc(100% - var(--padding) * 2);
}

.no-graph-text {
   position: absolute;
   height: 75px;
   width: calc(100% - 40px);
   opacity: 0;
   z-index: 5;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: .3s all ease-in-out;
   text-align: center;
   font-size: 13px;
}

.bar-container {
   display: flex;
   flex-direction: column-reverse
}

.bar {
   background: var(--primary-text);
   transition: .3s height ease-in-out;
   border-radius: 1px;
}

.graph-labels {
   display: grid;
   grid-gap: 11px;
   grid-template-columns: repeat(6, 1fr);
   font-size: 12px;
}

.graph-slider {
   margin: var(--margin) 0;
}

/* Theme tiles */

.theme-tiles {
   display: grid;
   width: 100%;
   grid-template-columns: 1fr 1fr;
   grid-gap: var(--padding);
}

.theme-tile {
   height: 75px;
   border-radius: 3px;
   border: 2px solid transparent;
   box-shadow: 0px 2px 10px #DCDCDC;
   cursor: pointer;
   background-repeat: no-repeat;
   background-size: cover;
   transition: .1s border ease-in-out;
   box-sizing: border-box;
   overflow: hidden;
}

.theme-tile img {
   width: 105%;
   pointer-events: none;
}

.theme-tile-active {
   border: 2px solid var(--accent);
}