.panel {
  padding          : 20px;
  color            : var(--foreground);
  background-color : var(--background);
  box-shadow       : 2px;
  font-family      : "Lucida Grande",
                     sans-serif;
  font-size        : 18px;
  font-smoothing   : antialiasing;
  line-height      : var(--line-size);
}

/* The container */

.container {
  display             : block;
  position            : relative;
  margin-bottom       : 12px;
  padding-left        : 35px;
  font-size           : 22px;
  -moz-user-select    : none;
  -ms-user-select     : none;
  -webkit-user-select : none;
  user-select         : none;
  cursor              : pointer;
}

/* Hide the browser's default radio button */

.container input {
  position : absolute;
  opacity  : 0;
  cursor   : pointer;
}

/* Create a custom radio button */

.checkmark {
  position         : absolute;
  top              : 0;
  left             : 0;
  width            : 25px;
  height           : 25px;
  border-radius    : 50%;
  background-color : #eee;
}

/* On mouse-over, add a grey background color */

.container:hover input ~ .checkmark {
  background-color : #ccc;
}

/* When the radio button is checked, add a blue background */

.container input:checked ~ .checkmark {
  background-color : #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */

.checkmark:after {
  content  : "";
  display  : none;
  position : absolute;
}

/* Show the indicator (dot/circle) when checked */

.container input:checked ~ .checkmark:after {
  display : block;
}

/* Style the indicator (dot/circle) */

.container .checkmark:after {
  top           : 9px;
  left          : 9px;
  width         : 8px;
  height        : 8px;
  border-radius : 50%;
  background    : white;
}

.filepath {
  color     : var(--foreground);
  opacity   : 0.6;
  font-size : 10px;
}

/* Style the tab pane */

.tab {
    overflow: hidden;
    border: 1px solid var;
    background-color: var(--foreground);
}

/* Style the buttons that are used to open the tab content */
.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
}

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

/* Create an active/current tablink class */
.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.panel {
    display: none;
    padding: 6px 12px;
}
