#selectable .ui-selected { background-color: #E8EBEF; color: #1C385F;}
  #selectable { list-style-type: none; margin: 0; font-size: 0.46em; display: flex;
    flex-wrap: wrap;}
  #selectable li { margin: 3px; padding: 4px; float: left; font-size: 4em; text-align: center; border: 1px solid; border-radius: 6px; border-color: white; }
  #selectable p {font-size: 0.51em; cursor: pointer; margin-bottom: 0px; width: 78px;}
  #selectable .ui-selected p, #selectable .ui-selected i {
    border: none;
  }

  #selectable-color { list-style-type: none;  font-size: 0.46em; padding: 5px; display: flex;
    flex-wrap: wrap;}
  #selectable-color li { 
    margin: 1px 10px; 
    float: left; 
    font-size: 4em; 
    text-align: center;
    border: 1px solid #fff;
    box-shadow: 0 0 0 8px #fff;
    border-color: white; 
    width: 44px; 
    height: 44px; 
  }
  #selectable-color .ui-selected { box-shadow: 0 0 0 8px #E8EBEF;}
  #selectable-color span{
    font-size: 11px;
    cursor:pointer;
    border:none;
  }
  #selectable.quick_controller_icon_list li {
  padding-top: 9px;
}
.quickControllerShortcut {
    padding: 3%;
    text-align: center;
}

.quickControllerName::before {
    display: none !important;
}

.quickControllerName {
    margin-bottom: 0px !important;
    display:inline-table;
}

.quickControllerIcon {
    font-size: 6em !important;
    vertical-align:middle;
    display:inline-table;
    margin-top: -5%;
    width: 50px;
    font-size: 39px;
    background-color: transparent;
}

.iconpicker-popover, .iconpicker .iconpicker-items {
  color: #191919;;
}

.quickControllerShortcut input {
    width : 64%;
}

.CP-red {
  background-image: radial-gradient( circle farthest-corner at 1% 4.8%,  rgba(148,6,118,1) 0%, rgba(236,49,125,1) 96.1% );
  color: #fff;
}

.CP-blue {
  background: linear-gradient(to right, #4e54c8, #8f94fb);
  color: #fff;
}

.CP-black {
  background-image: radial-gradient( circle farthest-corner at 12.4% 20.6%,  rgba(25,25,25,1) 0%, rgba(61,61,61,0.94) 83.7% );
  color: #fff;
}

.CP-green{
  background-image: linear-gradient( 111.4deg,  rgba(55,168,192,1) -0.2%, rgba(103,187,125,1) 100.2% );   
  color: #fff;
}

.CP-orange{
  background-image: radial-gradient( circle farthest-corner at 10% 20%,  rgba(255,152,59,1) 0%, rgba(255,216,53,1) 90% );
  color: #191919;
}

.CP-violet{
  background: linear-gradient(to right,#3c1053, #ad5389 );
  color: #fff;
}

.CP-white {
  background-color: white;
  color: #191919;
}
.CP-red h2, .CP-red .quickControllerIcon,
.CP-blue h2, .CP-blue .quickControllerIcon,
.CP-black h2, .CP-black .quickControllerIcon,
.CP-green h2, .CP-green .quickControllerIcon,
.CP-violet h2, .CP-violet .quickControllerIcon,
.widget-edit-container .CP-red .quickControllerIcon,
.widget-edit-container .CP-blue .quickControllerIcon,
.widget-edit-container .CP-black .quickControllerIcon,
.widget-edit-container .CP-green .quickControllerIcon,
.widget-edit-container .CP-violet .quickControllerIcon {
  color: #fff;
}
.CP-orange h2, .CP-orange .quickControllerIcon,
.CP-white h2, .CP-white .quickControllerIcon,
.widget-edit-container .CP-orange .quickControllerIcon,
.widget-edit-container .CP-white .quickControllerIcon {
  color: #191919; 
}
#selectable-color .CP-white:not(.ui-selected){
  border: 1px #191919 solid;
  /* width: 39px !important;
  height: 40px !important;
  margin-top: 3px !important; */
}

#selectable-color .CP-white .ui-selected:not(span) {
  border: 1px solid #1C385F;
  /* width: 39px !important;
  height: 40px !important;
  margin-top: 3px !important; */
}

.icp-auto {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.controlName{
    text-align: center;
    font-size: 1.15em;
    font-weight: bold;
    background-color: transparent;
    border-bottom-style: dotted;
    width: 64%;
    vertical-align: bottom;
    height: 66px;
}
/* 
.blackColor, .blackColor::placeholder {
  color:black !important;
  border-bottom-color:black !important;
}

.whiteColor, .whiteColor::placeholder{
  color:white !important;
  border-bottom-color:white !important;
} */

.extrawide select, .extrawide input{
  width: 100%;
}

.input-group-addon-custom{
  background-color: transparent !important;
  color:inherit;
}

span.input-group-addon.input-group-addon-custom {
  color:inherit;
  border: 1px solid;
  border-radius: 3px;
  font-size: 52px;
  border-style: dashed;
}

.quickControllerIcon .iconpicker-container{
  display: block;
}

.customHR{
    margin-top: 10px;
    margin-bottom: 6px;
}

.firstLabelCustom{
  margin-top: -4px;
  padding-top: 0px !important;
}

.additionalArgumentsHint{
  font-style: italic !important;
  font-weight: normal !important;
  text-align: center !important;
}
.widget-edit-container {
  background: #fff;
  color: #191919;
}
.quickControllerNameContainer {
  word-break: break-all;
}
.quickControllerWidget .quickControllerNameContainer{
  width: 60%;
  padding-left: 20px;
  /* outline: 1px solid red; */
  text-align: left !important;
	display: inline-block;
}
.quickControllerWidget .quickControllerName:empty::before {
    content: attr(data-placeholder);
}

.quickControllerWidget .quickControllerName {
    margin-bottom: 0px !important;
    display:inline-block;
    vertical-align: middle;
    margin-top: 0px !important;
}

.quickControllerWidget .quickControllerIcon {
    vertical-align: middle;
    display: inline-block;
    margin-right: 15px !important;
    margin-top: 0px !important;
    width: 20%;
    font-size: 70px !important;
    height: 80px;
    line-height: 70px;
    /* outline: 1px solid lime; */
}
.quickControllerWidget .quickControllerIcon:before {
  font-size: 70px;
  line-height: 70px;
}
.qc-error-wrapper {
  background: #f2dede;
}
.qc-error-wrapper p {
  text-align: center;
  padding: 4px;
  margin-bottom: 0;
}
.quickControllerWidget.qc-error .quickControllerShortcut{
  background: none;
  background-color:#d3d3d3;
}
.quickControllerWidget.qc-error .quickControllerName {
  color:#b3b3b3;
} 
.quickControllerWidget.qc-error {
 pointer-events: none;
 cursor: default;
}
.quickControllerWidget a {
  text-decoration: none;
}