:root {
  --item-bg: #e9e9e9;
  --item-bg-hover: #f9f9f9;
  --item-border: #ccc;
  --placeholder-border:#c1780e;
  --placeholder-bg: #ffe8af;
  --ontrack-green: #b3c022;
  --ontrack-green-light: #99CD3D;
  --ontrack-green-dark: #616900;
  --draggable-icon: url(../images/draggable.gif);
  --body-padding: 40px;
}

body {
  margin: 0;
  padding: var(--body-padding);
  font-family: Arial, Helvetica, sans-serif;
}

.m-b-5 {
  margin: 0 0 5px 0;
}

.m-b-10 {
  margin: 0 0 10px 0;
}

/*************/
/* Accordion */
/*************/

#accordion {
  /* width: calc(50vmax - 2 * var(--body-padding));
  max-width: 400px; */
  width: 300px;
  float: left;
}

#accordion > div > div {
  padding: 0;
  background-color: var(--item-border);
}

#accordion > div > h3 {
  margin: 5px 0 0 0;
}

#accordion > div > h3[aria-selected=true] {
  color: #fff !important;
  border: 1px solid var(--ontrack-green-dark);
  background: var(--ontrack-green);
  transition: all 0.15s ease;
}

#accordion > div > h3[aria-selected=false] {
  color: #454545 !important;
  transition: all 0.15s ease;
}

/*********/
/* Items */
/*********/

ul.sortable { 
  list-style-type: none; 
  margin: 0; 
  padding: 0; 
  width: auto;
  height: fit-content;
  overflow-y: hidden;
}

ul.sortable li {
  background-color: var(--item-bg);
  padding: 10px 10px 10px 15px; 
  font-size: 1rem;
  transition: background-color 0.15s ease;
}

ul.sortable li:hover {
  background-color: var(--item-bg-hover);
  transition: background-color 0.15s ease;
}

ul.sortable li:not(:last-child) {
  margin: 0 0 1px 0; 
}

.draggable {
  background-image: var(--draggable-icon);
  display: block;
  width: 18px;
  height: 18px;
  float: left;
  margin: 1px 5px 0 0;
  cursor: move;
}

.selected {
  border: 1px solid var(--item-border);
  /* box-shadow: 0px 0px 5px 2px #00000033; */
}

.ui-sortable-placeholder {
  border: 2px dashed var(--placeholder-border);
  background-color: var(--placeholder-bg) !important;
  height: 16px;
}

.ui-widget-content {
  border: 1px solid var(--item-border) !important;
}

ul#sortable-right {
  background: var(--item-border);
  border: 1px solid var(--item-border);
  height: fit-content;
  width: 300px;
  min-width: 300px;
  margin: 40px 0px 0px 20px;
}

@media only screen and (max-width: 640px) {
  #accordion {
    width: 100%;
  }
  ul#sortable-right {
    width: 100%;
    margin: 40px 0px 0px 0px;
  }
}