.body {
    /* margin: 0 auto; */
    /* width: 1157px; */
    user-select: none;
}

div#right_corner {
    float: right;
    font-size: large;
}

form.account {
    display: inline-block;
    margin-top: 3px;
}

label#price {
    float: right;
    font-size: large;
}

form.account input {
    width: auto;
}

.outer {
    top: 531px;
    height: 703px;
    position: absolute;
    display: flex;
    width: 99%;
    justify-content: space-around;
    align-items: flex-start;
    z-index: auto;
}

.header input {
    /* margin-left: 28px; */
    font-size: medium;
}

.header img {
    max-width: 150px;
}

fieldset {
    display: inline-block;
    /* margin: 0; */
}

    fieldset:first-child {
        margin-left: 0px;
    }

.type label:not(:last-child) {
    /* margin-right: 6px; */
}

TABLE.schema {
    border-collapse: collapse;
}

.schema TD, TH {
    height: 25px;
    padding: 3px;
    border: 1px solid #5f3f3f;
    font-size: 20px;
    /* position: relative; */
}

td.disabled {
    cursor: not-allowed;
    opacity: 0.2;
}

tbody td {
    position: relative;
}

.schema tbody td, .schema thead td:not(:first-child) {
    padding: 0px;
    width: 40px;
}

TH {
    background: #b0e0e6;
}

.schema td:nth-child(4n+2), .schema td:nth-child(4n+3), .schema td:nth-child(4n+2) input, .schema td:nth-child(4n+3) input {
    background: gainsboro padding-box;
}

.plate td {
    border-bottom-width: 2px;
    border-top-width: 2px;
}

line {
    stroke: black;
    stroke-width: 2;
}

tbody svg {
    display: block;
    width: 40px;
    height: 25px;
}

.popup {
    position: relative;
    top: 10px;
    border: black 1px solid;
    width: 13px;
    border-radius: 2px;
    text-align: center;
    background: chartreuse;
    cursor: pointer;
    display: inline-block;
}

    .popup.X {
        left: -5px;
    }

    .popup.I {
        left: 17px;
    }

/******************** swithers *****************************/
.two-thirds-of-cell {
    width: 0;
    border: 1px solid black;
}

.two-thirds-of-cell {
    height: 33px;
}

.ringlet {
    border-radius: 6px;
    width: 6px;
    height: 6px;
    border: 2px black solid;
    position: relative;
}

.diagonal {
    border-left: 2px black solid;
    height: 34px;
    transform: rotate(-22deg);
    width: 16px;
    left: -4px;
}

thead .number {
    padding-top: 10px;
    padding-bottom: 10px;
}

tbody .number {
    padding: 2px;
}

div.number * {
    /* pointer-events: none; */
}

tbody label {
    font-size: 15px;
}
/******************** ARCs *****************************/
:root {
    --arc-height-step: 7px;
    --arc-height-base: 21px;
    --short-arc-angle: 45deg;
    --long-height0-arc-angle: 23deg;
    --long-height1-arc-angle: 15deg;
    --long-height2-arc-angle: 12deg;
    --long-height3-arc-angle: 10deg;
    --long-height4-arc-angle: 10deg;
}

.height0 {
    height: calc(var(--arc-height-base));
}

.height1 {
    height: calc(var(--arc-height-step) + var(--arc-height-base));
}

.height2 {
    height: calc(2 * var(--arc-height-step) + var(--arc-height-base));
}

.height3 {
    height: calc(3 * var(--arc-height-step) + var(--arc-height-base));
}

.arc {
    /* height: 100%; */
    position: relative;
    /* margin: 0; */
}

.arc {
    cursor: move;
    /* margin: 0; */
}

.arc {
    left: 0px;
    box-sizing: border-box;
    height: calc(100% - 5px);
}

.arc-container.short {
    width: 37px;
    height: 15px;
    /* bottom: -10px; */
}

#sources .arc-container.short {
    margin-top: 4px;
}

.upper .arc {
    border-top: 3px solid saddlebrown;
}

.lower .arc {
    border-bottom: 3px solid saddlebrown;
    top: 4px;
}

    .lower .arc.moved {
        top: 15px;
    }

.snap-axe.moved {
    position: relative;
    top: -14px;
    left: 3px;
}

.inline-block {
    display: inline-block;
}

.arc {
    width: calc(100% - 12px);
    text-align: center;
}

.long-snap-axe {
    width: 82px;
}

.short-snap-axe {
    width: 41px;
}

.arc-container.long {
    width: 79px;
    /* bottom: 2px; */
    position: relative;
    min-width: 79px;
}

.short-arc {
    /* width: 24px; */
}

.upper .arc {
    bottom: 0;
}

.lower .arc.short-arc {
    top: 2px;
}

.long-arc.moved {
    top: -13px;
    left: 12px;
}

.arc:before, .arc:after {
    content: "";
    position: absolute;
    border-width: 0;
    border-right-width: 3px;
    border-style: solid;
    border-color: saddlebrown;
    height: 110%;
    top: -3px;
}

.upper .arc:before {
    left: 0px;
    transform: rotate(var(--long-height0-arc-angle));
    transform-origin: top left;
}

.lower .arc:before {
    /* bottom: -3px; */
    left: -3px;
    transform: rotate(calc(0deg - var(--long-height0-arc-angle)));
    top: 2px;
}

.upper .arc:after {
    /* top: -3px; */
    right: -3px;
    /* transform: rotate(calc(0deg - var(--long-height0-arc-angle)); */
}

.lower .arc:after {
    bottom: -3px;
    right: -3px;
    transform: rotate(var(--long-height0-arc-angle));
    top: 2px;
}

.short-arc:before, .short-arc:after {
    /* height: 110%; */
}

.upper .short-arc:after {
    transform: rotate(calc(0deg - var(--short-arc-angle)));
    /* transform-origin: top left; */
}

.upper .short-arc:before {
    transform: rotate(var(--short-arc-angle));
    /* transform-origin: top right; */
}

.lower .short-arc:after {
    transform: rotate(var(--short-arc-angle));
}

.lower .short-arc:before {
    transform: rotate(calc(0deg - var(--short-arc-angle)));
}

.upper .long-arc:after, .lower .long-arc:before {
    transform: rotate(calc(0deg - var(--long-height0-arc-angle)));
}

.upper .long-arc:before, .lower .height .long-arc:after {
    transform: rotate(var(--long-height0-arc-angle));
}

.long-arc:before, .long-arc:after {
    /* height: 24px; */
}

.arc-container.long.moved {
    left: 4px;
    /* height: 28px; */
}

.arc-container {
    z-index: 1;
}

.autoreturn-container {
    margin-left: -1210px;
    position: sticky;
    top: 22px;
    /* visibility: hidden; */
}

    .autoreturn-container .down {
        top: -2px;
        position: relative;
    }

    .autoreturn-container .up {
        top: 188px;
        position: relative;
    }

.autoreturn {
    height: 0px;
    width: 1px;
    /* border: 1px solid; */
    z-index: 1;
}

    .autoreturn svg {
        cursor: move;
        height: 110px;
        width: 31px;
        position: relative;
        left: -15px;
    }

.down svg {
    top: -15px;
}

.up svg {
    top: -95px;
}

.return-snap-point {
    position: relative;
    top: -11px;
    /* border: 1px solid; */
    width: 1px;
}

.autoreturn.moved {
    position: relative;
    top: -11px;
    left: -68px;
}

#sources > div:nth-child(-n+3) {
    position: relative;
    border: 1px black solid;
    display: inline-block;
    padding: 3px 6px 0px 16px;
    margin-right: 2px;
    resize: horizontal;
    height: 21px;
}

input {
    width: 50px;
    text-align: center;
}

.red {
    background: red;
}

input#copy_url, input#cart {
    width: auto;
    font-size: small;
}

    input#p {
        width: 42px;
    }

    input#g {
        width: 37px;
    }

    input#order {
        width: auto;
        font-size: larger;
        background: #f44d43;
        float: right;
    }

    input#save_pa {
        width: auto;
    }


div#sources {
    margin-top: 10px;
    position: relative;
}

.sizable {
    min-height: 1px;
    min-width: 10px;
    border-top: 4px solid brown;
    cursor: e-resize;
    resize: horizontal;
    overflow: auto;
    border: 1px solid;
}

.hover .ringlet {
    box-shadow: 0 0 3pt 2pt aquamarine;
}

.arc-container.moved {
    left: 5px;
    position: absolute;
    /* top: -200%; */
}

.upper.moved .arc {
    /* top: Calc(-100% + 3px); */
}

.arc-container.moved:nth-child(2) {
    /* top: 0; */
    position: absolute;
}

.moved .long-arc:after {
    right: -4px;
}

td.bucket.hover {
    /* background: black; */
}

    td.bucket.hover::before {
        filter: invert(20%);
    }

td.bucket:before {
    position: absolute;
    content: '';
    background: url(trash_bin.png);
    /*partially transparent image*/
    background-size: contain;
    background-repeat: no-repeat;
    background-position-y: 18px;
    width: 170px;
    height: 189px;
    pointer-events: none;
    left: 0;
}

#schema.dragging #trash_bin *, td .upper > div, td .lower > div, #schema.dragging .moved:not(.helper) {
    pointer-events: none;
}

.lower .moved .arc {
    /* top: Calc(100% + 3px); */
}

.upper .arc-container.moved {
    bottom: -2px;
}

.arc-container.long.moved {
    resize: horizontal;
    overflow: hidden;
}

.plate .number.hover {
    /* outline: 2px blue solid; */
    background: aliceblue;
}

.arc-container.moved {
    pointer-events: auto;
}

.arc-container:focus {
    /* background: aliceblue; */
    /* opacity: .7; */
}

.lower .height1 .arc::after, .upper .height1 .arc::before {
    transform: rotate(var(--long-height1-arc-angle));
}

.lower .height1 .arc::before, .upper .height1 .arc::after {
    transform: rotate(calc(0deg - var(--long-height1-arc-angle)));
}

.lower .height2 .arc::after, .upper .height2 .arc::before {
    transform: rotate(var(--long-height2-arc-angle));
}

.lower .height2 .arc::before, .upper .height2 .arc::after {
    transform: rotate(calc(0deg - var(--long-height2-arc-angle)));
}

.lower .height3 .arc::after, .upper .height3 .arc::before {
    transform: rotate(calc(0deg - var(--long-height3-arc-angle)));
}

.lower .height3 .arc::before, .upper .height3 .arc::after {
    transform: rotate(var(--long-height3-arc-angle));
}

#selector {
    width: 162px;
    height: 162px;
    border: 1px solid;
    border-radius: 14px;
    background-color: gainsboro;
}

.circle-inner {
    stroke-width: 4px;
}

.red .circle-inner {
    fill: #ed2323;
    stroke: #ed3e32;
}

.red .circle-outer {
    fill: #c52f27;
    stroke: #a83838;
}

.red polygon.polygon-inner {
    fill: #e91b24;
    stroke: #d31f25;
}


.black .circle-inner {
    fill: #555;
    stroke: #666;
}

.black .circle-outer {
    fill: #333;
    stroke: #444;
}

.black polygon.polygon-inner {
    fill: #666;
    stroke: #444;
}

polygon.polygon-inner {
    stroke-width: 8px;
    stroke-linejoin: round;
    /* cursor: alias; */
    /* transform-origin: 82px 82px; */
    transform: rotate(0deg);
}

.handler polygon.polygon-inner {
    cursor: alias;
}

#selector svg {
    height: 164px;
    width: 164px;
}

svg * {
    transform-origin: 82px 82px;
}

#panel-choice g.handle {
    display: none;
}

text {
    font-size: 12px;
    text-shadow: white 1px 0 0px;
}

#panel-choice text {
    font-size: 20px;
}

line.beak {
    stroke: aliceblue;
    stroke-width: 6px;
}

.type label {
    width: 177px;
    height: 165px;
}

fieldset.type {
    width: 1023px;
    position: relative;
    height: 191px;
}

.color label, .size label {
    display: block;
}

    .color label:not(:last-child), .size label:not(:last-child) {
        margin-bottom: 5px;
    }

.color-size fieldset {
    display: block;
    margin-left: 4px;
}

.color-size {
    display: inline-block;
    position: absolute;
}

.color label.ui-checkboxradio-label.ui-corner-all.ui-button.ui-widget.ui-checkboxradio-radio-label {
    text-align: left;
}

label[for=radio-color-red].ui-checkboxradio-label.ui-corner-all.ui-button.ui-widget.ui-checkboxradio-radio-label.ui-checkboxradio-checked.ui-state-active, label[for=radio-color-red].ui-button:active {
    background-color: #ed1c24;
    border-color: #701111;
}

label[for=radio-color-red] span.ui-checkboxradio-icon.ui-corner-all.ui-icon.ui-icon-background.ui-icon-blank {
    border-color: #861819;
}

label[for=radio-color-black].ui-checkboxradio-label.ui-corner-all.ui-button.ui-widget.ui-checkboxradio-radio-label.ui-checkboxradio-checked.ui-state-active, label[for=radio-color-black].ui-checkboxradio-label:active {
    border-color: black;
    background-color: #444;
}

label[for=radio-color-black] span.ui-checkboxradio-icon.ui-corner-all.ui-icon.ui-icon-background.ui-icon-blank {
    border-color: #111;
}

input#order_code {
    bottom: 2px;
    width: 164px;
    vertical-align: top;
    height: 21px;
}

div#sources * {
    vertical-align: middle;
}

div#schema-choice thead * {
    pointer-events: none;
}

div#schema-choice .arc-container.long.helper.moved.height0 {
    resize: none;
}

div#sources a {
    font-size: 16px;
}

#schema-choice tbody td {
    text-align: center;
}

div#schema-choice table.schema {
    margin: 5px;
    display: inline-block;
}

table#schema {
    margin-top: 4px;
}

div#schema-choice {
    position: absolute;
    /* top: -12px; */
    right: 0;
    background: white;
    z-index: 2;
    transform: scale(.75);
    transform-origin: top right;
    border: 1px solid;
    width: 133%;
    background: url(pictures/loading.gif) no-repeat center white;
    min-height: 265px;
}

    div#schema-choice .arc-container {
        resize: none;
    }

table input {
    height: 14px;
    text-align: center;
}

input#pc {
    margin-bottom: 4px;
}

input.label {
    width: 62px;
}

tbody input[type=radio] {
    height: 12px;
    /* margin-top: 3px; */
    vertical-align: middle;
}

input.halftop {
    top: 18px;
    position: absolute;
    left: 25px;
    z-index: 1;
}

#sources .arc-container.long.height0 {
    /* top: 2px; */
}

circle.axe {
    fill: none;
    stroke: aliceblue;
}

input#radio-positions {
    height: 16px;
    margin-bottom: 3px;
}

input#positions-code {
    height: 13px;
    font-size: 14px;
    text-align: center;
}

button.ui-button {
    font-size: 5px;
}

div#panel-choice {
    position: absolute;
    border: 1px solid;
    background: white;
    z-index: 100;
    max-width: 1110px;
    text-align: left;
    /* max-height: 200px; */
    /* overflow: overlay; */
    transform: scale(.5);
    transform-origin: top left;
}

#panel-choice svg {
    /* border: 1px solid darkslategray; */
    border-radius: 7px;
    /* margin: 3px; */
    /* background: lightgray; */
    /* cursor: pointer; */
    width: 191px;
    height: 168px;
    left: 14px;
    position: relative;
}

#panel-choice > div:hover {
    /* transform: scale(1.5); */
    transition-duration: 0.5s;
}

button.close {
    display: none;
}

.moved:hover button {
    display: block;
}

.autoreturn button.close {
    top: 24px;
    left: -10px;
}

.autoreturn.up button.close {
    top: -45px;
}

button.close {
    position: absolute;
    top: -4px;
    border-radius: 12px;
    cursor: pointer;
    color: red;
    outline: none;
}

.long button.close {
    left: calc(50% - 11px);
}

.inline {
    display: inline-block;
}

div#panel-choice > div {
    border: 1px solid;
    border-radius: 5px;
    margin: 4px;
    background-color: whitesmoke;
}

#panel-choice .close {
    /* float: right; */
    /* font-size: 33px; */
    /* border-left: 1px solid; */
    /* border-bottom: 1px solid; */
    /* padding: 7px; */
    visibility: hidden;
}

#panel-choice .inline:hover a.close {
    visibility: visible;
}

#panel-choice .inline div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 5px;
}

#panel-choice .code {
    margin-left: 4px;
}

#schema-choice a.close {
    /* display: none; */
    float: right;
    margin-right: 4px;
}

#schema-choice .schema:hover a.close {
    display: inline-block;
}


div.ui-tooltip {
    max-width: initial;
}


.info {
    padding: 10px;
    background-color: rgb(94, 158, 214);
    color: white;
    margin: 5px;
}

.choise .autoreturn.moved {
    left: 18px;
    top: -8px;
}

.choise button.close {
    display: none;
}

.choise svg {
    cursor: default;
}

input.outside {
    left: -31px;
    position: relative;
    top: -3px;
}

fieldset.mounting {
    float: right;
    margin-right: 0;
}

.arc-container.long.moved {
    bottom: -1px;
}

.lower .arc-container {top: 1px;}

.lower .long-arc:before, .lower .long-arc:after {top: 1px;}

.lower .height2 .long-arc:before, .lower .height2 .long-arc:after {
    top: 0px;
}

button#save-schema {
    /* font-size: 11px; */
    /* background: #f44d43; */
    color: aliceblue;
}

button#order {
    /* font-size: 14px; */
    background: #f44d43;
}

div#sources input:nth-last-child(-n+4) {
    /* float: right; */
}