.colorpicker .green-bg {
  background-color: #0da58e;
}
.green-bg::before {
    background: #0da58e !important;
}
.colorpicker .lightgreen-bg {
  background-color: #8cc152;
}
.lightgreen-bg::before {
    background: #8cc152 !important;
}
.colorpicker .lime-bg {
  background-color: #cdda49;
}

.dropdown-status .status::before {
    border-radius: 50%;
    bottom: 30px;
    content: "";
    display: inline-block;
    height: 10px;
    position: absolute;
    right: 8px;
    width: 10px;
}

#status_templates_navigation .navbar-footer-content {
    padding: 8px;
    margin-left: -5px;
    background: #f0f0f1;
    margin-right: -5px;
    margin-bottom: -5px;
    margin-top: 5px;
}



.dropdown-status .dropdown-menu > li > a i {
    vertical-align: text-bottom;
}

.dropdown-status .status-entry::before {
    border-radius: 50%;
    bottom: 30px;
    content: "";
    display: inline-block;
    height: 10px;
    right: 8px;
    width: 10px;
}

.dropdown-status ul li:first-child {
    margin-bottom: 5px;
}

.dropdown-status .nocolor-bg {
    border: none;
}

.status-output {
    text-transform: initial;
}

.dropdown-status .emoji {
    border: none;
    height: 20px;
    width: 20px;
}

.lime-bg::before {
    background: #cdda49 !important;
}
.colorpicker .yellow-bg {
  background-color: #fdc02f;
}
.yellow-bg::before {
    background: #fdc02f !important;
}
.colorpicker .orange-bg {
  background-color: #fd9727;
}
.orange-bg::before {
    background: #fd9727 !important;
}
.colorpicker .deeporange-bg {
  background-color: #fc5830;
}
.deeporange-bg::before {
    background: #fc5830 !important;
}
.colorpicker .red-bg {
  background-color: #e2202c;
}
.red-bg::before {
    background: #e2202c !important;
}
.colorpicker .pink-bg {
  background-color: #e62565;
}
.pink-bg::before {
    background: #e62565 !important;
}
.colorpicker .purple-bg {
  background-color: #9b2fae;
}
.purple-bg::before {
    background: #9b2fae !important;
}
.colorpicker .deeppurple-bg {
  background-color: #673fb4;
}
.deeppurple-bg::before {
    background: #673fb4 !important;
}
.colorpicker .blue-bg {
  background-color: #4054b2;
}
.blue-bg::before {
    background: #4054b2 !important;
}
.colorpicker .lightblue-bg {
  background-color: #587bf8;
}
.lightblue-bg::before {
    background: #587bf8 !important;
}
.colorpicker {
  font-size: 0;
  
  padding: 0;
}
.colorpicker li {
  display: inline-block;
  width: 8.333333333333334%;
  height: 32px;
  position: relative;
  color: #fff;
  cursor: pointer;
}
.colorpicker li span {
  width: 100%;
  height: 50px;
  text-align: center;
  padding-top: 11px;
  pointer-events: none;
}
.colorpicker li span:before {
  opacity: 0;
}
.colorpicker li.selected span:before {
  opacity: 1;
}
.colorpicker li:hover span:before {
  opacity: .5;
}
.colorpicker li {
  position: relative;
  overflow: hidden;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  font-stretch: normal;
  font-size: 20px;
  line-height: 1;
  font-family: FontAwesome;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}
.colorpicker li:after {
  transition: left 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.2s 1s;
  content: "";
  width: 100%;
  height: 100%;
  text-align: center;
  position: absolute;
  left: 120%;
  top: 0;
  opacity: 0;
  line-height: 32px;
  content: "\f00c";
}
.colorpicker li.active:after {
  left: 0;
  opacity: 1;
  transition: left 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.2s;
}
.colorpicker li.active ~ li:after {
  left: -80%;
}

.colorpicker li:first-child {
    border-radius: 4px 0 0 4px;
}

.colorpicker li:last-child {
    border-radius: 0 4px 4px 0;
}

.section-ucp .nocolor-bg {
    border: 2px solid #ccc;
}

.dropdown-status .nocolor-bg {
    border: none;
}

.section-ucp .nocolor-bg.active {
    color: #999;
}

.section-ucp .template_row {
    cursor: pointer;
}

.section-ucp #status_templates td {
    padding-top: 5px;
}
#status_templates_navigation .nocolor-bg {
    border: none;
}


.badges_postrow {
    position: inherit;
}