.selector-widget {
    padding: 3px;
    border-bottom: 1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5;
}

.attributes {
    border-bottom: 1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5;
}

.selector-widget-title.selector-widget-name {
    font-size: 14px;
    line-height: 20px;
    margin-top: 3px;
}

.selector-widget-name {
    padding: 2px;
    padding-left:5px;
    font-size: 12px;
    font-weight: bold;
    line-height: 15px;
}

.selector-widget button {
    outline: none;
    border: 1px solid transparent;
    display: inline-block;
    border-radius: 10px;
    cursor: pointer;
    opacity: 0.7;
    margin: 2px 3px;
    padding: 1px 8px 1px 8px;
    text-align: center;
    text-decoration: none;
    color: #4b3862;
    font-size: 13px;
}

.selector-widget button.selected,
.selector-widget button:not(:disabled):hover {
    opacity: 1;
    border: 1px solid #0000ff;
}

.selector-widget button:disabled {
    cursor: not-allowed;
    opacity: 0.4;
    border: 1px solid transparent;
}

.preview-btn {
    outline: none;
    border: 1px solid #0000ff;
    display: inline-block;
    border-radius: 10%;
    cursor: pointer;
    opacity: 1;
    margin: 2px 3px;
    padding: 1px 4px 1px 4px;
    text-align: center;
    text-decoration: none;
    color: #18151d;
    font-size: 12px;
}

#edit-customer {
    opacity: 0.9;
    background-color: #dae9f4;
    border-radius: 35%;
    color: black;
    font-weight: bold;
    margin: 1px 5px;
}

#edit-customer .pe-7s-angle-up,
#edit-customer .pe-7s-angle-down {
    font-size: 13px;
    font-weight: 900;
    transform: scale(2.5);
    display: inline-block;
}

#edit-customer:hover {
    opacity: 1;
    background-color: #66859d;
    color: white;
    font-weight: bold;
    border: 1px solid #0000ff;
}

.selector-widget .add-customer-btn,
.selector-widget .remove-customer-btn {
    opacity: 1;
    border-radius: 35%;
    line-height: 15px;
    width: 25px;
    height: 25px;
    color: white;
    font-weight: 800;
    font-size: 17px;
    transition: background-color 0.2s, transform 0.1s;
    padding: 1px;
}

.selector-widget .plus,
.selector-widget .minus {
    font-size: 13px;
    transform: scale(2.2);
    display: inline-block;
}

.selector-widget .add-customer-btn {
    background-color: #46c062;
    border-color: #46c062;
}

.selector-widget .remove-customer-btn {
    background-color: #e2515f;
    border-color: #e2515f;
}

.selector-widget .add-customer-btn:hover {
    background-color: #218838;
}

.selector-widget .remove-customer-btn:hover {
    background-color: #c82333;
}

.gender-selector-widget button {
    color: white;
}

.gender-selector-widget button.selected,
.gender-selector-widget button:hover {
    border: 1px solid #181822;
}

.gender-MAN {
    background-color: blue;
}
.gender-WOMAN {
    background-color: red;
}

.gender-OTHER {
    background-color: green;
}

svg.a9s-annotationlayer .a9s-annotation.RED .a9s-outer {
    stroke:red;
    stroke-width:3;
    fill:rgba(255, 0, 0, 0.3);
}

svg.a9s-annotationlayer .a9s-annotation.GREEN .a9s-outer {
    stroke:green;
    stroke-width:3;
    fill:rgba(0, 255, 0, 0.3);
}

svg.a9s-annotationlayer .a9s-annotation.BLUE .a9s-outer {
    stroke:blue;
    stroke-width:3;
    fill:rgba(0, 0, 255, 0.3);
}

svg.a9s-annotationlayer .a9s-annotation.RED .a9s-inner,
svg.a9s-annotationlayer .a9s-annotation.GREEN .a9s-inner,
svg.a9s-annotationlayer .a9s-annotation.BLUE .a9s-inner {
    fill:transparent;
    stroke:none;
}

.scrollable-area {
    max-height: 500px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.footer .delete-btn {
    position: absolute;
    top: 15px;
    left: 15px;
    padding: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.footer .pe-7s-trash {
    font-size: 20px;
    font-weight: 900;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.footer {
    border-top: 1px solid #e5e5e5;
}

.r6o-editor .footer .r6o-btn {
    margin-right:8px
}

.r6o-editor .footer .r6o-btn.delete-btn {
    position:absolute;
    top:7px;
    left:7px;
    background-color:transparent;
    border:none;
    color:#4483c4;
    width:32px;
    height:32px;
    min-width:0;
    border-radius:100%;
    padding:0;
    display:flex;
    justify-content:center;
    align-items:center;
    -webkit-transition:all .1s ease-in;
    -moz-transition:all .1s ease-in;
    -o-transition:all .1s ease-in;
    transition:all .1s ease-in
}
.r6o-editor .footer .r6o-btn.delete-btn:hover {
    color:#fff;
    background-color:#ef352c
}

.r6o-editor .footer {
    position: relative;
    text-align: right;
    padding: 8px 0
}

.r6o-footer {
    display: none !important;
}

.r6o-editor {
    text-align: initial;
    width: 400;
    height: 500px;
}

.r6o-arrow {
    display: none !important;
}

.a9s-annotationlayer .a9s-formatter-el,
.a9s-annotationlayer .a9s-formatter-el foreignObject {
  overflow:visible;
  pointer-events:none;
}

.a9s-annotationlayer .a9s-formatter-el foreignObject .a9s-shape-label-wrapper {
  position:relative;
  transform:translateY(-100%);
  padding-bottom:4px;
}

.a9s-annotationlayer .a9s-formatter-el foreignObject .a9s-shape-label-wrapper .a9s-shape-label {
  display:table;
  padding:3px 5px;
  white-space:nowrap;
  background-color:rgba(255, 255, 255, 0.85);
  border-radius:3px;
  font-size:14px;
}

.joint-widget {
    overflow: hidden;
}

.a9s-annotation.a9s-point circle {
    fill: red !important;
    stroke: white !important;
    stroke-width: 2 !important;
}

.joint-select-btn {
  margin: 4px;
  border: 2px solid #555;
  border-radius: 6px;
  background-color: #f0f0f0;
  color: #222;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
}

.joint-select-btn:hover {
  background-color: #ddd;
  transform: scale(1.05);
}

.joint-select-btn.active {
  background-color: #0b5c81; /* red for visibility */
  color: white;
  border-color: #0081cc;
  box-shadow: 0 0 6px rgba(4, 0, 255, 0.6);
}