.block-masterplanner h2.block-title .label, .block-masterplanner h2.block-title-current .label, #middle .course-container summary, .inactive {
  user-select: none !important;
  touch-action: none !important;
}

.masterplanner #container_basics,
.masterplanner #container_user,
.masterplanner #masterplan,
.masterplanner #container_basics_static {
  box-shadow: 0 0 5px 1px rgba(120, 110, 100, 0.3);
}

.inactive {
  opacity: 0.4;
  pointer-events: none;
}

#middle li.dropdowm-item-wrapper {
  padding-left: 0 !important;
}

.node li.plan_item {
  margin-left: 0 !important;
}

.hidden {
  display: none !important;
}

.devmode {
  display: none;
}

.hatched, .draggable_course[data-scheduled="0"],
.draggable_course[data-course-options=compulsory-elective] {
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.4) 25%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0.4) 75%, rgba(255, 255, 255, 0.4) 100%);
  background-size: 2.83px 2.83px;
}

@media only screen and (max-width: 1180px) {
  #edit-submit {
    margin-left: 30px;
  }
}

button {
  cursor: pointer;
}

@media only screen and (max-width: 1180px) {
  .masterplanner #admin-menu {
    display: none !important;
  }
  body.masterplanner.admin-menu {
    margin-top: 0 !important;
  }
  .masterplanner h2.section-title {
    margin-left: 20px;
    margin-bottom: 26px;
    font-size: 2rem;
  }
  .masterplanner .tabs ul.primary {
    padding-left: 20px;
    margin-top: 10px;
  }
  .masterplanner #middle {
    box-shadow: none;
  }
}
.masterplanner #node-form label {
  font-size: 14px;
}

.masterplanner .form-radios .form-item {
  font-size: 14px;
}
.masterplanner .form-radios .form-item input {
  vertical-align: top;
  margin-right: 6px;
}

.masterplanner.overview #content {
  box-shadow: none;
  background-color: transparent;
  padding: 0;
  border-top: none;
}
@media only screen and (max-width: 768px) {
  .masterplanner.overview #content {
    width: calc(100% - 274px) !important;
    margin-left: 0 !important;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1024px) {
  .masterplanner.overview #content {
    margin-left: 0 !important;
    margin-right: 2px !important;
  }
}

.masterplanner fieldset.collapsible,
html.js #node-form #comments fieldset.collapsible {
  display: none;
}

/* hide form elements */
/* #edit-title-wrapper (the node title) removed from this list */
#edit-specialisation-wrapper,
#edit-specialisation-2nd-check-wrapper,
#edit-specialisation-2nd-wrapper,
#edit-mentor-wrapper,
#edit-research-area-wrapper,
#container_edu_minor,
#edit-programme-wrapper,
#edit-remarks-student-wrapper,
#edit-remarks-mentor-wrapper,
#message_container {
  display: none;
  margin: 10px 0 10px 0;
}

.masterplanner #edit-specialisation-wrapper,
.masterplanner #edit-specialisation-2nd-check-wrapper,
.masterplanner #edit-specialisation-2nd-wrapper,
.masterplanner #edit-research-area-wrapper,
.masterplanner #container_edu_minor,
.masterplanner #edit-programme-wrapper {
  border-top: 1px dotted #ccc;
  padding: 15px 0 10px 0;
}
.masterplanner #edit-mentor-wrapper {
  padding: 5px 0 10px 0;
  border-top: 1px dotted #ccc;
  border-bottom: 1px dotted #ccc;
}

.masterplanner #container_basics,
.masterplanner #container_user,
.masterplanner #masterplan,
.masterplanner #container_basics_static {
  background-color: #fff;
  padding: 20px 30px;
  margin-top: 10px;
  margin-bottom: 30px;
  border-top: 5px solid #7f88ab;
}
@media only screen and (max-width: 1024px) {
  .masterplanner #container_basics,
  .masterplanner #container_user,
  .masterplanner #masterplan,
  .masterplanner #container_basics_static {
    padding: 20px 20px;
    margin-bottom: 1px;
    box-shadow: none;
    margin-top: 2px;
  }
}

.node.masterplan #container_basics,
.node.masterplan #container_user,
.node.masterplan #masterplan,
.node.masterplan #container_basics_static {
  margin-top: 10px;
  margin-bottom: 30px;
}

@media only screen and (max-width: 1024px) {
  .masterplanner #masterplan {
    border-top: none;
  }
}

.masterplans #container_basics,
.masterplans #container_user,
.masterplans #masterplan,
.masterplans #container_basics_static {
  margin-top: 10px;
  margin-bottom: 30px;
}

.masterplanner #masterplan {
  transition: opacity 0.3s;
}

#container_basics_static .label,
#container_user .label {
  font-size: 14px;
  font-weight: normal;
  font-family: "Vestula Semibold";
}

#container_basics_static .value,
#container_user .value {
  font-size: 14px;
  font-family: "Vestula Regular";
}

#container_status {
  background-color: #ffffdd;
  padding: 15px 10px 15px 15px;
  margin-top: 10px;
  margin-bottom: 15px;
}

#container_status .label {
  font-weight: bold;
}

#disclaimer {
  margin-top: 25px;
  color: #999;
  font-size: 14px;
}

#masterplan {
  padding-bottom: 20px;
}

.containerTitle {
  font-family: "Vestula Regular", Georgia, Times, serif;
  font-size: 18px;
  color: #fff;
}

/* Programme info fieldset */
#container_basics fieldset {
  padding: 0 !important;
  border: 0 !important;
}

#container_basics fieldset,
#container_user fieldset,
#masterplan fieldset,
#container_basics_static fieldset {
  border: 0px !important;
  margin: 0 !important;
  padding: 1em 0 !important;
}

#masterplan label {
  text-transform: uppercase;
  font-family: "Vestula Regular", Georgia, Times New Roman, serif;
}

#container_user .label, #container_basics fieldset .label {
  font-family: "Vestula Semibold";
  font-weight: normal;
  font-size: 15px;
}

#container_basics fieldset .label {
  display: block;
  width: 25%;
}

#container_basics fieldset .value {
  font-family: "Vestula Regular";
}

/* ---------------- course catalog ---------------- */
#middle .course-container {
  padding-left: 0;
  line-height: 1.5em;
}
.course-container.cat_18 {
  display: none;
}

.block-masterplanner h2.block-title, .block-masterplanner h2.block-title-current {
  margin-top: 18px;
  display: inline-block;
}
.block-masterplanner h2.block-title .label, .block-masterplanner h2.block-title-current .label {
  color: #0c2577;
  margin-right: 5px;
}
@media only screen and (max-width: 1024px) {
  .block-masterplanner h2.block-title .label, .block-masterplanner h2.block-title-current .label {
    display: none;
  }
}
.block-masterplanner h2.block-title .dropdown, .block-masterplanner h2.block-title-current .dropdown {
  display: inline;
  margin-left: 5px;
}
.block-masterplanner h2.block-title a,
.block-masterplanner h2.block-title .dropdown-toggle, .block-masterplanner h2.block-title-current a,
.block-masterplanner h2.block-title-current .dropdown-toggle {
  font-family: "Vestula Semibold";
  font-size: 14px;
  color: #667988;
  background-color: #fff;
  padding: 2px 5px;
  border: 1px solid #667988;
  border-radius: 4px;
  transition: all 0.3s;
}
.block-masterplanner h2.block-title a:hover,
.block-masterplanner h2.block-title .dropdown-toggle:hover, .block-masterplanner h2.block-title-current a:hover,
.block-masterplanner h2.block-title-current .dropdown-toggle:hover {
  text-decoration: none;
  background-color: #667988;
  color: #fff;
}
.block-masterplanner h2.block-title a.active,
.block-masterplanner h2.block-title .dropdown-toggle.active, .block-masterplanner h2.block-title-current a.active,
.block-masterplanner h2.block-title-current .dropdown-toggle.active {
  border-radius: 4px;
  border: 1px solid #0c2577;
  background-color: #0c2577;
  color: #fff;
  padding: 2px 5px;
}
.block-masterplanner h2.block-title a.toggle-current,
.block-masterplanner h2.block-title a.toggle-inbetween, .block-masterplanner h2.block-title-current a.toggle-current,
.block-masterplanner h2.block-title-current a.toggle-inbetween {
  margin-left: 5px;
}

.block-masterplanner h2.block-title-current {
  margin-left: 4px;
}

.course-grid:after {
  clear: both;
  content: "";
  display: block;
  height: 0;
  overflow: hidden;
}

.course-grid { /* class added to li element to force style on draggable "clone" */
  color: #333;
  float: left;
  font-family: "Vestula Regular", Verdana, Helvetica, sans-serif;
  font-weight: normal;
}
@media only screen and (max-width: 768px) {
  .course-grid {
    width: 56px;
    height: 56px;
    font-size: 13px !important;
  }
}
@media only screen and (min-width: 769px) {
  .course-grid {
    width: 78px;
    height: 78px;
    font-size: 14px !important;
  }
}
.course-grid {
  line-height: 16px;
  margin: 1px 1px 0 0;
  overflow: hidden;
  /* border: 1px solid #eee; */
  display: block; /* make the whole square active for mouseovers */
  padding: 0 0 1px 1px !important;
  background-color: #fff;
  position: relative;
  box-sizing: border-box;
  transition: width 0.3s;
}

.course-grid, .course-list {
  transition: width 0.3s;
}

/* https://css-tricks.com/how-nth-child-works/ */
li.course-grid:nth-child(5n+1) {
  margin-left: 1px !important;
} /* 0, 6, 12, ... */
#middle li.course-list {
  padding-left: 10px !important;
}

/* li.course-list .link { z-index: 2; position: relative; right: 5px; top: 2px; width: 20px; } */
.course-list .link {
  display: none;
}

.course-grid .link {
  display: none;
}

/* a in course browser: useless? => draghandle */
.course-grid a {
  text-decoration: none !important;
}

/* masterplan styles */
.masterplans h2,
.node.masterplan h2 {
  margin-bottom: 0 !important;
}

#masterplan h3, #node-form h3 {
  font-family: "Vestula Regular";
  font-size: 14px;
}

.masterplans #masterplan h3,
.node.masterplan #masterplan h3 {
  margin-top: 0;
}

#masterplan #list { /* display: none; */ }

#masterplan #message_container {
  display: none;
  margin-bottom: 30px;
}

#masterplan .course_container {
  box-sizing: border-box;
  background-image: linear-gradient(45deg, #fcfcfc 20.83%, #f7f7f7 20.83%, #f7f7f7 50%, #fcfcfc 50%, #fcfcfc 70.83%, #f7f7f7 70.83%, #f7f7f7 100%);
  background-size: 16.97px 16.97px;
  background-color: #fafafa;
  list-style-type: none;
  list-style-image: none;
  list-style-position: outside;
  padding: 5px;
  margin: 7px 0 20px 0;
  transition: background-color 0.3s;
}
#masterplan .course_container.ex-over {
  background-image: linear-gradient(45deg, #fcfcfc 20.83%, #f0f0f0 20.83%, #f0f0f0 50%, #fcfcfc 50%, #fcfcfc 70.83%, #f0f0f0 70.83%, #f0f0f0 100%);
}

#masterplan #list #plan_research_projects {
  min-height: 76px;
}

#masterplan #list #plan_compulsory_components {
  min-height: 111px;
}

#masterplan #list #plan_internship,
#masterplan #list #plan_extracurricular_courses {
  min-height: 105px;
}

#masterplan #list #plan_specialisation_components {
  min-height: 45px;
}

#masterplan #list #plan_elective_courses {
  min-height: 205px;
}

#masterplan #list #plan_core_courses {
  min-height: 140px;
}

#masterplan .plan_item {
  margin-bottom: 1px;
  list-style-type: none;
  list-style-image: none;
  list-style-position: outside;
  /* fix positioning inside & collapsing of div when using floats */
  clear: both;
  overflow: hidden;
}

.masterplanner #masterplan .components-wrapper label {
  font-size: 14px !important;
}

.plan_item {
  font-family: "Vestula Regular";
  padding: 5px;
  color: #fff;
  box-sizing: border-box;
  height: 34px;
  width: 612px; /* fixed width to enable fixed dragged item dimensions; => define draggable objects grid classes? */
  transition: width 0.3s; /* transitions on plan_item or course browser item or both? */
  position: relative;
}

.node .plan_item {
  width: auto;
  height: auto;
}

.draghandle {
  touch-action: none;
  cursor: grab;
  margin-left: -5px;
  /* display: inline-block; */
  margin-right: 0;
}
@media only screen and (max-width: 768px) {
  .draghandle a {
    color: transparent;
  }
}
@media only screen and (min-width: 769px) {
  .draghandle a {
    color: #fff;
  }
}
.draghandle a:focus, .draghandle a:active, .draghandle a:hover, .draghandle a:visited {
  color: #fff;
  text-decoration: none;
}

.plan_item .draghandle {
  display: none;
  transform: translate(0, 1px);
}

.plan_item a.delete {
  transition: all 0.25s ease-in-out;
}

.plan_item a.delete:hover {
  opacity: 1;
  color: #fff;
  text-decoration: none;
}

/*
.plan_item .button-ellipsis-wrapper {
    float: right; 
    cursor: pointer;
    background-color: rgba();

    .button-ellipsis {
        font-size: 1.1em; 
        color: #fff;
    }
}
*/
.plan_item .button-ellipsis {
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border-width: 0;
  padding-top: 5px;
  margin-top: 2px;
  float: right;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0);
  font-size: 14px;
  color: #fff;
  transition: all 0.25s ease-in-out;
}
.plan_item .button-ellipsis:hover {
  background-color: rgba(255, 255, 255, 0.4);
}

.menu-ellipsis {
  list-style: none !important;
  margin: 0 !important;
}
.menu-ellipsis li {
  margin: 1px 0 !important;
  display: block;
  overflow: hidden;
}
.menu-ellipsis li a {
  padding: 2px 4px !important;
}

#masterplan #totals_wrapper {
  display: block;
  overflow: hidden;
  margin-top: 5px;
  margin-bottom: 30px;
}

#total_label, #total_extra_label {
  margin-bottom: 5px;
  font-weight: normal;
  font-family: "Vestula Regular";
  font-size: 15px;
  padding-top: 2px;
  padding: 5px 15px;
  border-radius: 15px;
  color: #fff;
  background-color: #666;
  float: right;
  clear: right;
}

.masterplans #total_label {
  background-color: #666;
}

#total_extra_label {
  display: none;
  color: #666;
  background-color: rgba(255, 255, 255, 0);
}

#validation_messages_container {
  border-radius: 3px;
  background-color: #eaf0f3;
  border-left: 5px solid #8899bb;
  font-family: "Vestula Regular";
  font-size: 15px;
  color: #333;
  padding: 10px 25px;
  margin: 1em 0;
}
@media only screen and (max-width: 1024px) {
  #validation_messages_container {
    margin: 1em 1em;
  }
}
#validation_messages_container p {
  font-size: 0.875rem;
  margin-bottom: 1em !important;
}
#validation_messages_container p:last-child {
  margin-bottom: 0 !important;
}
#validation_messages_container.warn {
  background-color: #fdf2f2;
  border-left: 5px solid #f92424;
}

.masterplanner #validation_messages_container {
  box-shadow: 0 0 5px 1px rgba(120, 110, 100, 0.3);
}

.masterplans #validation_messages_container {
  display: block;
  margin-bottom: 50px;
}
.masterplans #validation_messages_container ul {
  margin-bottom: 0;
}

.droppable-status {
  background-color: #666;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-block;
  float: right;
  color: #fff;
  margin-left: 5px;
}
.droppable-status a {
  color: #fff;
  font-size: 0.9em;
}
.droppable-status a:hover {
  color: #fff;
  text-decoration: none;
}
.droppable-status a.fa-unlock {
  transform: translate(3px, 0);
}
.droppable-status a.fa-lock {
  transform: translate(2px, 0);
}

.tippy_category {
  margin-right: 3px;
}
.tippy_category a {
  color: #666 !important;
}
.tippy_category a:hover {
  text-decoration: none !important;
}

@media only screen and (max-width: 768px) {
  .edit-plan-refresh-btn {
    float: left;
  }
}
@media only screen and (min-width: 769px) {
  .edit-plan-refresh-btn {
    float: right;
  }
}
.edit-plan-refresh-btn {
  margin-top: 25px;
  margin-left: 5px;
  display: inline-block;
  overflow: hidden;
}
.edit-plan-refresh-btn a {
  padding: 4px 8px 5px 8px;
  color: #667988;
  background-color: none;
  border: 1px solid #667988;
  display: block;
}
.edit-plan-refresh-btn a:hover {
  color: #fff;
  background-color: #667988;
  text-decoration: none;
}

#edit-programme-info-btn, #continue_button, .masterplanner-form .form-submit {
  border-radius: 3px;
  border: 1px solid #2a4088 !important;
  padding: 4px 8px 5px 8px;
  background-color: #2a4088;
  text-align: center;
  /* first prevent parent element from collapsing */
  /* float: right; */
  margin-top: 25px;
  border: none;
  color: #fff;
  font-family: "Vestula Regular";
  font-size: 14px;
  cursor: pointer;
  float: left;
}

#edit-programme-info-btn a, #continue_button a {
  text-decoration: none !important;
  color: #fff !important;
  display: block;
}

#edit-programme-info-btn a:hover {
  text-decoration: underline;
}

#edit-programme-info-btn, #continue_button {
  width: 150px;
}

.btn-cont {
  float: right;
  margin-right: 260px;
}

.label-credits {
  border-radius: 8px;
  background-color: #fff;
  color: #8592bb;
  padding: 1px 5px 1px 5px;
  margin-left: 6px;
  font-size: 13px;
}

.masterplans .label-credits {
  color: #666 !important;
}

.deleteItem {
  margin-top: 0px;
}

/* jQuery droppable */
.drophover {
  outline: #999 2px dotted;
  background-color: #911;
}

.dropactive {
  outline: #999 2px dotted;
}

.course_browser {
  display: block;
  overflow: hidden;
  width: 100%;
}

.course_browser h3 {
  font-family: "Vestula Regular";
}

#course_browser_wrapper { /* opacity: 0.4; pointer-events: none */ /* disable all interactions initially */
}

#course_browser_wrapper h3,
.course-container summary {
  cursor: pointer;
  font-family: "Vestula Regular";
  font-weight: normal;
}
@media only screen and (max-width: 768px) {
  #course_browser_wrapper h3,
  .course-container summary {
    font-size: 14px;
    line-height: 1.3em;
    margin-top: 6px;
  }
}
@media only screen and (min-width: 769px) {
  #course_browser_wrapper h3,
  .course-container summary {
    font-size: 14px;
    line-height: 1.3em; /* font-size: 1px; line-height: 1.5em; */
    margin-top: 10px;
  }
}

.course_browser_details_wrapper {
  width: 100%;
  height: 120px;
  background-color: #999;
}

.course_browser_details_wrapper .details_title {
  color: #fff;
  font-size: 14px;
  font-family: "Vestula Regular", Georgia;
  display: block;
}

.course_browser_details_wrapper .details_code {
  color: #fff;
  display: block;
}

.course_browser_details_wrapper .details_credits, .course_browser_details_wrapper .details_level {
  color: #fff;
  display: block;
}

.ui-tabs-panel li.image-grid {
  margin: 1px 1px 0 0 !important;
} /* change to border */
#course_browser_course_year {
  text-align: right;
  margin-right: 10px;
  font-size: 12px;
}

#course_view_toggle {
  display: none;
  clear: both;
  height: 1.3em;
  margin-bottom: 5px;
}

#course_view_toggle_wrapper {
  float: right;
}

#course_view_toggle, #course_view_toggle a {
  font-size: 15px;
  font-family: FontAwesome;
  color: #666;
  background: #fff;
}

#course_view_toggle a {
  padding: 2px 8px 0 8px;
  border: 1px solid #666;
  border-radius: 3px;
  transition: all 0.25s ease-out;
}

#course_view_toggle a.grid {
  float: left;
  margin: 0 5px 0 0;
}

#course_view_toggle a.list {
  float: right;
  margin: 0;
}

#course_view_toggle .selected, #course_view_toggle a:hover {
  background-color: #666;
  color: #fff;
  transition: all 0.25s ease-out;
}

/* Course Browser list view */
.course-list { /* width: 418px; */
  padding: 4px;
  background-color: #fff;
  font-family: "Vestula Regular", Verdana, Helvetica;
  font-weight: normal;
  margin-bottom: 1px;
}

.course-list .desc {
  display: none;
  margin-left: 5px;
  font-size: 15px;
} /* dragged clone */
.course-list .code, .plan_item .code {
  display: inline-block;
  margin-left: 0;
  font-family: "Vestula Semibold";
  font-size: 15px;
  margin-right: 5px;
}

.course-grid .desc {
  display: none;
  margin-left: 5px;
  color: rgb(157, 138, 10);
}

.course-grid .code {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.draggable_course .code, .planned_course .code {
  color: #fff;
}

.course-list {
  list-style: none;
  list-style-position: outside;
}

.course_browser {
  margin-bottom: 3px !important;
  cursor: grab;
}

/* hide course UI elements in course browser */
.course_browser .deleteItem, .course_browser .label-credits, .course_browser .slide, .course_browser .cog, .course_browser .edit-course {
  display: none;
}

.course_browser .draghandle {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 9;
}
.course_browser .draghandle a {
  position: absolute;
  top: 50%;
  font-size: 0.7em;
}
@media only screen and (min-width: 769px) {
  .course_browser .draghandle a {
    transform: translate(4px, -5px);
  }
}

.planned_course {
  cursor: auto;
  opacity: 0.4;
}
.planned_course .draghandle {
  display: none;
}

/* floating, scrolling Course Browser wrapper */
#course_browser_tabs {
  position: absolute;
  top: 100px;
  margin-top: 0;
}

#course_browser_tabs.fixed {
  position: fixed;
  top: 0;
}

#course-browser-wrapper .ui-tabs .ui-tabs-nav li {
  width: 50% !important;
} /* override jQuery UI CSS */
.block-masterplanner {
  display: block;
  /*visibility: hidden;*/ /* fixes jQuery UI Accordion not initialising bug */
}

.block-masterplanner ul {
  padding: 0 !important;
}

/* jQuery UI Sortable Firefox scroll fix: http://stackoverflow.com/questions/2451528/jquery-ui-sortable-scroll-helper-element-offset-firefox-issue */
#masterplan {
  overflow: auto;
}

.shadow, .qtip-wrapper, #course_browser_tabs {
  /* offset left, top, thickness, color with alpha */
  box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.3);
}

/* draggable (original) source; faded when clone is activated */
.fade {
  opacity: 0.3;
}

.tooltip {
  margin: 10px;
  font-size: 15px;
  text-align: justify;
  font-family: "Vestula Regular";
}

.slide {
  position: absolute;
  right: 33px;
  top: 6px;
}

.plan_item[data-extracurricular="1"] .slide {
  right: 83px;
}

.addItem .addMinor {
  margin-left: 3px;
  margin-top: 4px;
  margin-right: 8px;
  position: absolute;
  right: 100px;
  font-size: 1.1em;
  color: #fff;
  opacity: 0.9;
}

.addItem .addMinor:hover {
  color: #fff;
  text-decoration: none;
  opacity: 1;
}

.plan_item .title, .dummy_item .title, .plan_item .desc {
  /* float: left; */
  display: inline-block;
  font-family: "Vestula Regular";
  font-size: 14px;
  margin-left: 2px;
}
@media only screen and (max-width: 768px) {
  .plan_item .title, .dummy_item .title, .plan_item .desc {
    overflow: hidden;
    max-width: 55%;
    height: 1.3em;
    vertical-align: text-bottom;
  }
}

#masterplan .plan_item .extra {
  border-radius: 7px;
  background-color: transparent;
  padding: 1px 5px 1px 5px;
  margin-top: 1px;
  margin-right: 4px;
  float: right;
  font-size: 11px;
  border: 1px solid #fff;
}
.node.masterplan .code {
  color: #666;
  margin-right: 5px;
}

.node.masterplan #masterplan .plan_item .extra {
  background-color: #fff;
  border: 1px solid #666;
  color: #666;
  float: none;
  position: absolute;
  right: 30px;
}

.plan_item .cog {
  display: block;
  float: right;
  /* position: absolute; */
  /* right: 50px; */
  opacity: 0.9;
  margin: 1px 0 0 0;
  padding: 0;
}
.plan_item .cog a {
  color: #fff;
  font-size: 1.1em;
  transition: all 0.25s ease-in-out;
}
.plan_item .cog a:hover {
  opacity: 1;
  text-decoration: none;
  color: #fff;
}

.plan_item .edit-course {
  display: inline-block;
  margin-left: 10px;
}
.plan_item .edit-course a {
  color: #fff;
  font-size: 1em;
  opacity: 0.9;
}
.plan_item .edit-course a:hover {
  opacity: 1;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

.plan_item .edit-custom-title-wrapper {
  display: inline-block;
}
.plan_item .edit-custom-title-wrapper .edit-custom-title {
  border: 0;
  background-color: rgba(255, 255, 255, 0.4);
  color: #fff;
  border-radius: 3px;
  width: 360px;
  font-size: 15px;
  font-family: "Vestula Regular";
  padding: 2px 10px;
  margin-right: 6px;
}
.plan_item .edit-custom-title-wrapper .edit-title-submit, .plan_item .edit-custom-title-wrapper .edit-title-cancel {
  font-size: 1.1em;
  color: #fff;
  opacity: 0.9;
  transition: all 0.25s ease-in-out;
}
.plan_item .edit-custom-title-wrapper .edit-title-submit:hover, .plan_item .edit-custom-title-wrapper .edit-title-cancel:hover {
  opacity: 1;
  text-decoration: none;
  color: #fff;
  cursor: pointer;
}

/* remarks field */
.plan_item .remarks {
  margin-top: 25px;
  width: 425px;
  clear: both;
}

.plan_item .remarks textarea {
  border: 1px solid #fff;
  width: 425px;
}

/* fix padding in floating block */
#floater .block ul {
  padding: 0;
}

#plan_core_courses .CH,
#plan_core_courses .BC,
#plan_core_courses .CB,
div[data-research_area=BC],
div[data-research_area=CB] {
  color: #fff;
  background-color: #b5006b;
}
#plan_core_courses .CH .label-credits,
#plan_core_courses .BC .label-credits,
#plan_core_courses .CB .label-credits,
div[data-research_area=BC] .label-credits,
div[data-research_area=CB] .label-credits {
  color: #b5006b;
}

#plan_core_courses .DS,
div[data-research_area=DS] {
  color: #fff;
  background-color: #dc002e;
}
#plan_core_courses .DS .label-credits,
div[data-research_area=DS] .label-credits {
  color: #dc002e;
}

#plan_core_courses .CS,
#plan_core_courses .PT,
#plan_core_courses .ES,
div[data-research_area=PT],
div[data-research_area=ES] {
  color: #fff;
  background-color: #ee7d11;
}
#plan_core_courses .CS .label-credits,
#plan_core_courses .PT .label-credits,
#plan_core_courses .ES .label-credits,
div[data-research_area=PT] .label-credits,
div[data-research_area=ES] .label-credits {
  color: #ee7d11;
}

#plan_core_courses .ESC {
  color: #fff;
  background: #ee7d11;
}

#plan_core_courses .LSTD,
#plan_core_courses .LST,
#plan_core_courses .BMS,
#plan_core_courses .MS,
div[data-research_area=LSTD],
div[data-research_area=LST],
div[data-research_area=BMS],
div[data-research_area=MS] {
  color: #fff;
  background-color: #19aab7;
}
#plan_core_courses .LSTD .label-credits,
#plan_core_courses .LST .label-credits,
#plan_core_courses .BMS .label-credits,
#plan_core_courses .MS .label-credits,
div[data-research_area=LSTD] .label-credits,
div[data-research_area=LST] .label-credits,
div[data-research_area=BMS] .label-credits,
div[data-research_area=MS] .label-credits {
  color: #19aab7;
}

div.cat_1 {
  color: #fff;
  background-color: #b5006b;
}
div.cat_1 .label-credits {
  color: #b5006b;
}

div.cat_6 {
  color: #fff;
  background-color: #19aab7;
}
div.cat_6 .label-credits {
  color: #19aab7;
}

#plan_elective_courses .plan_item,
div.cat_2,
div.cat_3,
div.cat_4,
div.cat_5,
div.cat_9 {
  color: #fff;
  background-color: #328eb9;
}
#plan_elective_courses .plan_item .label-credits,
div.cat_2 .label-credits,
div.cat_3 .label-credits,
div.cat_4 .label-credits,
div.cat_5 .label-credits,
div.cat_9 .label-credits {
  color: #328eb9;
}

div.cat_22,
div.cat_10 {
  color: #fff;
  background-color: #b5006b;
}
div.cat_22 .label-credits,
div.cat_10 .label-credits {
  color: #b5006b;
}

div.cat_23,
div.cat_11 {
  color: #fff;
  background-color: #ee7d11;
}
div.cat_23 .label-credits,
div.cat_11 .label-credits {
  color: #ee7d11;
}

div.cat_12,
div.cat_13,
div.cat_16 {
  background-color: #00a0af;
}
div.cat_12 .label-credits,
div.cat_13 .label-credits,
div.cat_16 .label-credits {
  color: #00a0af;
}

div.cat_17,
div.cat_20,
#plan_compulsory_components .plan_item {
  background-color: #f7c334;
}
div.cat_17 .label-credits,
div.cat_20 .label-credits,
#plan_compulsory_components .plan_item .label-credits {
  color: #f7c334;
}

div.cat_18,
div.cat_19,
#plan_research_projects .plan_item {
  background-color: #75bf63;
}
div.cat_18 .label-credits,
div.cat_19 .label-credits,
#plan_research_projects .plan_item .label-credits {
  color: #75bf63;
}

div.cat_7,
div.cat_8,
div.cat_21,
div.cat_24,
#plan_specialisation_components .plan_item {
  background-color: #339c62;
}
div.cat_7 .label-credits,
div.cat_8 .label-credits,
div.cat_21 .label-credits,
div.cat_24 .label-credits,
#plan_specialisation_components .plan_item .label-credits {
  color: #339c62;
}

.qtip {
  width: 320px !important;
}

.qtip-content .research-area {
  border-radius: 8px;
  color: #fff;
  padding: 2px 8px 2px 8px;
  font-weight: normal;
  margin-left: 0;
  line-height: 24px;
  font-family: "Vestula Semibold";
}

.qtip-content .BC, .qtip-content .CB, .qtip-content .CH {
  background-color: #b5006b;
}

/* Delft cyan ~ #00ccff */
.qtip-content .LSTD, .qtip-content .LST, .qtip-content .BMS, .qtip-content .MS {
  background-color: #19aab7;
}

.qtip-content .DS {
  background-color: #dc002e;
}

.qtip-content .PT, .qtip-content .ES, .qtip-content .CS {
  background-color: #ee7d11;
}

#masterplan #some_list ul {
  margin-left: 0;
}

#masterplan #some_list .plan_item {
  padding: 0 !important;
}
#masterplan #some_list .plan_item .title {
  color: #666;
  margin-left: 0 !important;
}

.masterplans #masterplan .plan_item {
  overflow: visible;
}

.masterplans #some_list .custom.circle {
  font-size: 17px;
  margin-left: -12px;
  margin-right: 3px;
  border-radius: 15px;
  transform: translate(0, 5px);
  display: inline-block;
}

#masterplan .plan_item .custom.circle {
  color: #666;
  margin-left: 0;
}

.masterplans.user-mentor .print-link,
.masterplans.user-administrator .print-link,
.masterplans.user-coordinator .print-link,
.masterplans.user-study_adviser .print-link,
.masterplans.user-SSA .print-link {
  display: none;
}

#masterplan #some_list .plan_item .label-credits {
  color: #fff;
  float: right;
}

.node.masterplan #masterplan #some_list .plan_item .label-credits {
  color: #666 !important;
}

#masterplan #some_list h3 {
  font-family: "Vestula Semibold";
  color: #666;
  font-size: 100%;
  font-weight: normal;
}

#masterplan_signatures {
  visibility: hidden;
  display: none;
  width: 100%;
  margin-bottom: 30px;
  clear: both;
  overflow: hidden;
}

/*
#masterplan_signatures .signature_area { visibility: hidden; padding: 10px; display: none; width: 45%; height: 140px; float: left; border: 1px solid #eee; }
#masterplan_signatures .signature_area.student { float: left; }
#masterplan_signatures .signature_area.mentor { float: right; }
*/
/* custom styles in course catalog */
.course-grid.CUSTOM .code, .course-list.CUSTOM .code, .course-list.CUSTOM .desc, .course_browser div.cat_9 .code a, div.cat_17 .code a {
  color: #fff;
}

#unsupervised_plans, #supervised_plans {
  font-size: 0.875rem;
  color: #fff;
  list-style-type: none;
  list-style-image: none;
  list-style-position: outside;
  margin: 0 0 30px 0;
  padding: 0;
}

#unsupervised_plans .LST, #supervised_plans .LST {
  background-color: #19aab7;
}

#unsupervised_plans a, #supervised_plans a {
  color: #fff;
}

#unsupervised_plans a:hover, #supervised_plans a:hover {
  text-decoration: underline;
}

#unsupervised_plans li, #supervised_plans li {
  margin-left: 0;
  padding: 5px 15px 5px 15px;
  margin-bottom: 1px;
  font-family: "Vestula Regular";
}

#unsupervised_plans .CHEM.BC, #supervised_plans .CHEM.BC, #unsupervised_plans .CB, #supervised_plans .CB, #supervised_plans .CH {
  background-color: #b5006b;
}

#unsupervised_plans .CHEM.DS, #supervised_plans .CHEM.DS {
  background-color: #dc002e;
}

#unsupervised_plans .CHEM.PT, #supervised_plans .CHEM.PT, #unsupervised_plans .ES, #supervised_plans .ES, #supervised_plans .CS {
  background-color: #ee7d11;
}

.masterplanner-form h1,
#course_browser_wrapper h1,
.masterplanner-form h2,
#course_browser_wrapper h2,
.masterplanner-form h3,
#course_browser_wrapper h3,
.masterplanner-form label,
#course_browser_wrapper label,
.masterplanner-form span,
#course_browser_wrapper span,
.masterplanner-form div,
#course_browser_wrapper div,
.masterplanner-form p,
#course_browser_wrapper p,
.masterplanner-form li,
#course_browser_wrapper li {
  user-select: none;
}

#masterplan_filter {
  margin: 25px 0;
}

#masterplan_filter label {
  font-weight: bold;
  font-size: 12px;
}

#masterplan_filter select {
  border: 1px solid #ccc;
  padding: 2px 5px 2px 0;
}

#masterplan_filter ul {
  list-style-type: none;
  list-style-image: none;
  list-style-position: outside;
  margin: 0;
}

#masterplan_filter ul li {
  margin: 0;
  display: inline;
  font-size: 0.9em;
}

#masterplan_filter ul li a {
  background-color: #89b;
  padding: 4px 15px;
  color: #fff;
}

#masterplan_filter ul li a:hover,
#masterplan_filter ul li a.active {
  text-decoration: none;
  background-color: #0c2577;
}

/* progress widget on admin overviews */
meter {
  /* Reset the default appearance */
}

meter, progress {
  width: 100%;
  height: 15px;
}

meter::-moz-meter-bar {
  height: 6px;
}

meter::-webkit-meter-bar {
  background: none; /* #EEE; */
  box-shadow: none; /* 0 2px 3px rgba(0,0,0,0.2) inset; */
}

meter::-webkit-meter-optimum-value {
  background: #86CC00; /* Green */
}

meter::-webkit-meter-suboptimum-value {
  background: #CC4600; /* Yellow */
}

meter::-webkit-meter-even-less-good-value {
  background: #CC4600; /* Red */
}

meter {
  /* For Firefox */
  background: none; /* #EEE; */
  box-shadow: none; /* 0 2px 3px rgba(0,0,0,0.2) inset; */
}

meter:-moz-meter-optimum::-moz-meter-bar {
  background: #86CC00;
}

meter:-moz-meter-sub-optimum::-moz-meter-bar {
  background: #CC4600;
}

meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
  background: #CC4600;
}

/* Vestula ii inline course browser/planner */
/* => optimise for adaptive theme */
.masterplanner #rightSidebar {
  display: none;
}

@media only screen and (max-width: 768px) {
  .masterplanner #content {
    margin-left: 0;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1024px) {
  .masterplanner #content {
    margin-left: 20px;
  }
}

/* settings for perfect-scrollbar.js */
/*
#block-masterplanner-0 {
    overflow: hidden;
    position: relative;
    height: 600px;
}
*/
@media only screen and (max-width: 768px) {
  .masterplanner #middle, .masterplanner #middle.grid-5 {
    width: 272px;
    border-left: 1px solid #eaeef1;
    padding-right: 10px !important;
  }
}
@media only screen and (max-width: 1024px) {
  .masterplanner #middle, .masterplanner #middle.grid-5 {
    box-shadow: none !important;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1280px) {
  .masterplanner #middle, .masterplanner #middle.grid-5 {
    width: 360px !important;
    float: left;
    padding-right: 10px !important;
  }
}
@media only screen and (min-width: 1025px) {
  .masterplanner #middle, .masterplanner #middle.grid-5 {
    width: 436px !important;
  }
}

.masterplanner #middle.fixed {
  position: fixed;
}
@media only screen and (max-width: 768px) {
  .masterplanner #middle.fixed {
    top: 0;
    max-height: 100%;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch; /* adds momentum scrolling to overflow elements */
  }
}
@media only screen and (min-width: 769px) and (max-width: 1180px) {
  .masterplanner #middle.fixed {
    top: 0;
  }
}
@media only screen and (min-width: 1181px) {
  .masterplanner #middle.fixed {
    top: 100px;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1179px) {
  .masterplanner #content-wrapper {
    width: 1024px !important;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
@media only screen and (min-width: 1180px) {
  .masterplanner #content-wrapper {
    width: 1180px !important;
  }
}

@media only screen and (max-width: 768px) {
  .masterplanner #content { /* width: 464px !important */ }
}
@media only screen and (min-width: 769px) and (max-width: 1024px) {
  .masterplanner #content {
    width: calc(100% - 362px) !important;
  }
}
@media only screen and (min-width: 1025px) and (max-width: 1179px) {
  .masterplanner #content {
    width: calc(100% - 466px) !important;
  }
}
@media only screen and (min-width: 1180px) {
  .masterplanner #content {
    width: 714px !important;
  }
}

.masterplanner #middle {
  padding: 0;
  /* opacity: .4; */
  transition: opacity 0.3s;
}

.form-masterplan {
  margin-left: 0 !important;
}

@media only screen and (max-width: 1180px) {
  .masterplanner #footer .footer-left,
  .masterplanner .footer-mid,
  .masterplanner .footer-right {
    display: none;
  }
}

@media only screen and (min-width: 1181px) {
  .masterplanner .footer-right {
    display: none;
  }
}

.masterplanner .tippy-tooltip,
.tippy-box {
  text-align: left;
  padding: 12px;
  font-family: "Vestula Regular";
}

.tippy-content {
  text-align: left;
  font-family: "Vestula Regular";
  font-size: 14px;
  padding: 0;
}
.tippy-content .deleteItem,
.tippy-content .extraItem {
  display: block;
}
.tippy-content a, .tippy-content a:visited {
  display: block;
  text-decoration: none;
  color: #dedede;
  white-space: nowrap;
  cursor: pointer;
}
.tippy-content a .text-label, .tippy-content a:visited .text-label {
  font-family: "Vestula Regular";
  margin-left: 5px;
  display: inline-block;
}
.tippy-content a:hover, .tippy-content a:visited:hover {
  color: #333;
  background-color: rgba(255, 255, 255, 0.92);
  border-radius: 3px;
}
.tippy-content ul {
  list-style: none;
  margin-bottom: 0;
}
.tippy-content li {
  list-style: none;
  margin-left: 0 !important;
}
.tippy-content li a {
  text-decoration: none;
  padding: 2px 4px !important;
}

/* HTML range sliders */
.slider-md {
  margin-top: 2px;
}

.slider-md input[type=range] {
  -webkit-appearance: none;
}
@media only screen and (max-width: 768px) {
  .slider-md input[type=range] {
    width: 36px;
  }
}
@media only screen and (min-width: 769px) {
  .slider-md input[type=range] {
    width: 60px;
  }
}
.slider-md input[type=range] {
  border-radius: 15px;
  height: 15px;
  background-color: rgba(255, 255, 255, 0.5019607843);
  margin: 0;
  /* fix for FF unable to apply focus style bug  */
  border: none;
  padding: 0.2em 1em;
}

.slider-md input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: #fff;
  width: 14px; /* borders make it look smaller than moz counterpart */
  height: 14px;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 1px 1px 1px rgba(102, 102, 102, 0.2);
  margin-top: -6px; /* correction for Safari, Chrome */
  border: none;
}

input[type=range]:focus {
  outline: none;
}

@media only screen and (max-width: 768px) {
  .slider-md input[type=range]::-webkit-slider-runnable-track {
    width: 36px;
  }
}
@media only screen and (min-width: 769px) {
  .slider-md input[type=range]::-webkit-slider-runnable-track {
    width: 60px;
  }
}
.slider-md input[type=range]::-webkit-slider-runnable-track {
  height: 2px; /* borders make it look smaller than moz counterpart */
  background: #fff;
  /* border: 1px solid */ /* #565656 */
  /* border-color: #333 #333 #777 #333; */
  border-radius: 1px;
  /* box-shadow: inset 0 1px 5px 0px rgba(0, 0, 0, .5), 0 1px 0 0px rgba(250, 250, 250, .5); */
}

.slider-md input[type=range]::-moz-range-track {
  border-radius: 1px;
  height: 2px;
  /* border: 1px solid */ /* #565656 */
  /* border-color: #333 #333 #777 #333; */
  background-color: #fff;
  /* box-shadow: inset 0 1px 5px 0px rgba(0, 0, 0, .5), 0 1px 0 0px rgba(250, 250, 250, .5); */
}

.slider-md input[type=range]::-moz-range-thumb {
  background: #fff;
  border: 1px solid #fff;
  width: 13px;
  height: 13px;
  border-radius: 10px;
  cursor: pointer;
}

/* hide the outline behind the border */
.slider-md input[type=range]:-moz-focusring {
  /*
  outline: 1px solid white;
  outline-offset: -1px;
  */
}

/* https://stackoverflow.com/questions/18794026/remove-dotted-outline-from-range-input-element-in-firefox */
input[type=range]::-moz-focus-outer {
  border: 0;
}

/* webkit */
input[type=range]:focus {
  outline: none;
}

.slider-md input[type=range]:focus::-moz-range-track {
  /* background: #ccc; */
}

/* IE slider classes */
.slider-md input[type=range]::-ms-thumb {
  background: #fff;
  border: 1px solid #999;
  width: 14px;
  height: 14px;
  border-radius: 10px;
  cursor: pointer;
  border: none;
}

.slider-md input[type=range]::-ms-track {
  color: transparent; /* hide tick marks */
  border-radius: 1px;
  height: 2px;
  border: 0px;
  background-color: #fff;
}

input[type=range]::-ms-tooltip {
  display: none;
}

input[type=range]::-ms-fill-lower {
  background: #fff;
}

input[type=range]::-ms-fill-upper {
  background: #fff;
}

/* Dragula drag&drop styles */
.droppable {
  box-sizing: border-box;
}

.ghost {
  opacity: 0.4;
}

.gu-mirror,
.sortable-ghost {
  /*
  is added to the mirror image. It handles fixed positioning and z-index (and removes any prior margins on the element). Note that the mirror image is appended to the mirrorContainer, not to its initial container. Keep that in mind when styling your elements with nested rules, like .list .item { padding: 10px; }.
  */
  box-shadow: 0 0 5px 1px rgba(120, 110, 100, 0.3);
  opacity: 0.7;
  /*
  .draghandle { 
      position: absolute;
      width: 100%; // make draghandle cover the entire course item
      height: 100%;
      z-index: 9;
      //top: 50%; 
      //transform: translateY(-7px);

      a {
          text-align: left;
          width: 100%;
          position: absolute;
          top: 50%;
          transform: translate(2px, -7px);
      }
  }
  */
}
.gu-mirror .label-credits, .gu-mirror .deleteItem, .gu-mirror .cog, .gu-mirror .draghandle, .gu-mirror .edit-course, .gu-mirror .slide,
.sortable-ghost .label-credits,
.sortable-ghost .deleteItem,
.sortable-ghost .cog,
.sortable-ghost .draghandle,
.sortable-ghost .edit-course,
.sortable-ghost .slide {
  display: none;
}

.gu-transit {
  /*
  .draghandle { 
      position: absolute;
      width: 100%; // make draghandle cover the entire course item
      height: 100%;
      z-index: 9;
      //top: 50%; 
      //transform: translateY(-7px);

      a {
          text-align: left;
          width: 100%;
          position: absolute;
          top: 50%;
          transform: translate(2px, -7px);
      }
  }
  */
}
.gu-transit .label-credits, .gu-transit .deleteItem, .gu-transit .cog, .gu-transit .draghandle, .gu-transit .edit-course, .gu-transit .slide {
  display: none;
}

.gu-unselectable { /* body assigned this class while dragging */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
  -webkit-touch-callout: none !important;
  user-select: none !important;
}

/* CSS based accordion as replacement for jQuery UI accordion */
.transition, ul.accordion li i:before, ul.accordion li i:after {
  transition: all 0.25s ease-in-out;
}

.flipIn, ul.accordion li {
  animation: flipdown 0.5s ease both;
}

.no-select, ul.accordion h3 {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  user-select: none;
}

.accordion-cohort {
  display: block;
}

.accordion-current,
.accordion-inbetween {
  display: none;
}

ul.accordion {
  list-style: none;
  padding: 0;
  margin: 0;
  min-height: 200px;
  width: 100%;
  overflow: hidden;
}
ul.accordion h3 {
  font-family: "Vestula Regular";
  color: #333;
  cursor: pointer;
}
ul.accordion li {
  position: relative;
  padding: 0;
  margin: 0;
}
ul.accordion li i {
  position: absolute;
  transform: translate(-6px, 0);
  margin-top: 8px;
  right: 4px;
}
ul.accordion li i:before, ul.accordion li i:after {
  content: "";
  position: absolute;
  background-color: #333;
  width: 2px;
  height: 8px;
}
ul.accordion li i:before {
  transform: translate(-2px, 0) rotate(45deg);
}
ul.accordion li i:after {
  transform: translate(2px, 0) rotate(-45deg);
}
ul.accordion input[type=checkbox] {
  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
}
ul.accordion input[type=checkbox]:checked ~ div {
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  transform: translate(0, 50%);
}
ul.accordion input[type=checkbox]:checked ~ i:before {
  transform: translate(2px, 0) rotate(45deg);
}
ul.accordion input[type=checkbox]:checked ~ i:after {
  transform: translate(-2px, 0) rotate(-45deg);
}

@keyframes flipdown {
  0% {
    opacity: 0;
    transform-origin: top center;
    transform: rotateX(-90deg);
  }
  5% {
    opacity: 1;
  }
  80% {
    transform: rotateX(8deg);
  }
  83% {
    transform: rotateX(6deg);
  }
  92% {
    transform: rotateX(-3deg);
  }
  100% {
    transform-origin: top center;
    transform: rotateX(0deg);
  }
}
/* end CSS based accordion */