@import 'root.css';

.background,.hover-background:hover {
	color:var(--black)!important;
	background-color:var(--background)!important;
}

.left-panel,.hover-left-panel:hover {
	color:var(--black)!important;
	background-color:var(--left-card)!important;
}

.right-panel,.hover-right-panel:hover {
	color:var(--black)!important;
	background-color:var(--right-card)!important;
}

.bottom-bar,.hover-bottom-bar:hover {
	color:var(--black)!important;
	background-color:var(--bottom-bar)!important;
}

.progress-bar,.hover-progress-bar:hover{
	color:var(--white)!important;
	background-color:var(--progress-bars)!important;
}

.left-card-title { 
	color:var(--card-title); 
}

.right-card-title { 
	color:var(--card-title); 
}

.job-title { 
	color:var(--job-title); 
}

.dates,.dates-hover:hover{
	color:var(--dates)!important;
}

.icons,.icons-hover:hover{
	color:var(--icons)!important;
	font-size: 24px!important;
}

/* needs refinement */

.collapsible {
  background-color: var(--right-card);
  color: var(--job-title);
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
}

.active, .collapsible:hover {
  background-color: var(--dd-hover);
}

.content {
  /* padding: 0 18px; */
  padding: 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

.collapsible:after {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  color: white;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
}

.row {
  display: flex;
}

.column {
  flex: 33.33%;
  padding: 5px;
}

.graph-info {
  width: 100%;
  text-align: center;
  color: slategrey;
  opacity: 0.7;
  font-size: 10px;
}