#civitutorial-admin {
  height: 100%;
  width: 350px;
  background: #505050;
  color: white;
  position: fixed;
  right: -350px;
  top: 0;
  padding: 40px 10px 20px 10px;
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 599;
  box-sizing: border-box;
}

body.civitutorial-admin-open {
  margin-right: 350px;
  transition: margin-right 0.5s;
}

body.civitutorial-admin-open #civitutorial-admin {
  right: 0;
  transition: right 0.5s;
}
body.civitutorial-admin-open .hopscotch-bubble {
  z-index: 598;
}
body.civitutorial-admin-open .hopscotch-bubble-close,
body.civitutorial-admin-open .hopscotch-nav-button {
  display: none !important;
}

#civitutorial-admin button {
  border: 0 none;
  background: #80b33d;
  padding: 3px 6px;
  border-radius: 2px;
  color: white;
  cursor: pointer;
}
form:not(.tutorial-saved) #civitutorial-admin-close {
  background: #d2c600;
}
button#civitutorial-admin-delete {
  background: #aa323b;
}
#civitutorial-admin button[disabled] {
  cursor: default;
  background: #787d75;
}
#civitutorial-admin-buttons {
  float: right;
}
#civitutorial-admin #civitutorial-add-step {
  padding: 5px 9px;
}

#civitutorial-admin h4 {
  margin: 5px 0 10px;
}

#civitutorial-admin .description {
  color: lightgrey;
}

#civitutorial-admin label {
  font-size: 13px;
  font-weight: 700;
  color: white;
}

#civitutorial-admin [contenteditable=true] {
  cursor: text;
}

#civitutorial-admin [contenteditable=true]:empty:before {
  content: attr(placeholder);
  opacity: .8;
  display: block;
}

#civitutorial-admin-top label {
  display: inline-block;
  min-width: 50px;
}

#civitutorial-admin-top .description {
  margin-left: 53px;
}

#civitutorial-admin .ui-widget-content,
#civitutorial-admin .ui-state-active {
  background: #828282;
  color: white;
  padding: 5px 10px;
}
#civitutorial-admin a.crm-hover-button {
  color: white;
}

#civitutorial-admin .ui-accordion-header {
  padding: 5px 30px;
}

#civitutorial-admin .civitutorial-step-remove {
  position: absolute;
  right: 10px;
  top: 5px;
  cursor: pointer;
}

/* Prevent deleting every step */
.civitutorial-step:only-child .civitutorial-step-remove {
  display: none;
}

#civitutorial-admin .civitutorial-step-content textarea {
  width: 100%;
  min-height: 80px;
}

#civitutorial-admin .civitutorial-step-content [name=target] {
  width: 99%;
}

#civitutorial-steps {
  counter-reset: civitutorial-step-counter;
}

#civitutorial-steps .civitutorial-step-icon {
  background: #b0d47f;
  width: 26px;
  height: 26px;
  position: absolute;
  left: 3px;
  border-radius: 13px;
  top: 3px;
  text-align: center;
  padding-top: 4px;
  counter-increment: civitutorial-step-counter;
  box-sizing: border-box;
}

#civitutorial-steps .civitutorial-step-title {
  cursor: move;
}

#civitutorial-steps .ui-state-active .civitutorial-step-icon {
  background: #80b33d;
}

#civitutorial-steps .civitutorial-step-icon:empty:before {
  content: counter(civitutorial-step-counter);
  font-weight: bold;
}

#civitutorial-steps .crm-form-text,
#civitutorial-steps .crm-icon-picker-button {
  font-size: 12px;
}
#civitutorial-steps select {
  font-size: 11px;
}

body.civitutorial-select-target #civitutorial-overlay {
  position: fixed;
  top: 0;
  left: 0;
  border: 3px solid blue;
  height: 100%;
  width: calc(100% - 350px);
  margin-right: 350px;
  background-color: rgba(0, 0, 255, .05);
  z-index: 99999999999;
  box-sizing: border-box;
  cursor: crosshair !important;
}