/* PROPERTY PANELS */
.prop-panel {
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    /* overflow-x: auto; */
    /* padding: 8px; */
    box-sizing: border-box;
}

.prop-panel-row > .prop-panel {
    padding: 0 var(--gap);
}

.prop-panel-row > .prop-panel:first-child {
    padding-left: 0;
}

.prop-panel-row > .prop-panel:last-child {
    padding-right: 0;
}

.prop-panel label, 
.prop-panel input,
.prop-panel select,
.prop-panel p
{
    font-size: 0.9rem;
}

.panel-section-title,
.prop-panel h6 {
    width: 100%;
    text-align: left;
    margin-bottom: 8px !important;
    color: var(--primary-dark);
    font-family: var(--font-family-light) !important;
    font-size: 0.9rem;
    font-weight: normal;
    text-transform: uppercase;
    text-decoration: none;
}

.prop-panel h6 {
    margin-top: 16px !important;
    width: 100%;
    box-sizing: border-box;
    border-top: var(--default-border);
}

.prop-panel > :first-child h6,
.prop-panel > h6:first-child {
    margin-top: 0 !important;
    border-top: none;
}

.prop-panel select,
.slide-out-panel select {
    width: calc(var(--num-field-width) + 21px);
    height: var(--line-fields-height);
    padding-left: 4px;
    background-color: var(--field-backround);
}

.prop-panel  input:read-only:not(.icon) {
    background-color: var(--field-backround-readonly);
}

.prop-panel  select.o-select-readonly:disabled {
    opacity: 1;
    background-color: var(--field-backround-readonly);
    color: var(--sage-black) ;
}


/**********************************/
/* STYLES FOR INPUT FIELD */
.o-r-input {
    --field-width: var(--num-field-width);
    --label-width: calc((100% - var(--field-width)) /2 );
    width: 100%;
    display: grid;
    grid-template-columns: auto calc(var(--num-field-width) + 21px);
    gap: 4px;
}

.o-r-input-grid {
    display: grid;
    gap: 4px;
    /* margin-bottom: 4px; */
}

.o-r-input-20-80 { grid-template-columns: auto 1fr }
.o-r-input-50-50 { grid-template-columns: 1fr 1fr }
.o-r-input-30-70 { grid-template-columns: 0.3fr 0.7fr }
.o-r-input-flexible{ width: 100%; grid-template-columns:  auto auto }

.o-r-input-flexible:has(.o-line-dd.material) { grid-template-columns: 25% 75% !important }
.o-r-input-flexible:has(.o-line-dd:not(.material)) { grid-template-columns: 50% 50%;}
.o-r-input-grid .o-line-dd, .o-r-input-grid select,  .o-r-input-grid input:not([type="checkbox"], [type="radio"]) {
  align-self: flex-end; 
}
.o-r-input-flexible > select { max-width: 300px }
.o-r-input-grid > * { min-width: 0 }
.o-r-input-20-80 > input, .o-r-input-20-80 > select { width: 100% !important }

.o-r-input.LRTB { grid-template-columns: calc(var(--label-width)) var(--field-width) }
.o-r-input.LRTB > section {
    grid-column: 1 / -1;
    display: grid;
    gap: 4px;
    grid-template-columns: calc(var(--label-width) - 21px) auto var(--label-width) auto ; 
}
.o-r-input.LRTB label { text-align: right }

.o-r-input label, 
.o-r-input-grid label {
    width: 100%;
    white-space: normal; 
    overflow: hidden; 
}
/* .o-r-input > label:nth-child(odd),
.o-r-input-flexible > label:nth-child(odd),
.o-r-input-50-50 > label:nth-child(odd),
.o-r-input-30-70 > label:nth-child(odd)
{ width: 100%; text-align: right} */

.o-r-input input:not([type="checkbox"]), 
.o-r-input-grid input:not([type="checkbox"], [type="radio"]):not(.icon):not(.dd-main-input) {
    width: var(--num-field-width);
    padding-left: 4px;
    height: var(--line-fields-height);
}

/* .o-r-input > :nth-child(odd),
.o-r-input-grid > :nth-child(odd) {
    justify-self: end;
} */

/* .o-r-input > label:nth-child(odd)::after,
.o-r-input-grid > label:nth-child(odd)::after {
    content: ":";
    margin-left: 2px;
} */
.prop-panel .o-r-input:not(.LRTB) > label:nth-child(odd),
.prop-panel .o-r-input-grid:not(.LRTB) > label:nth-child(odd) {
    justify-self: start;
    text-align: left;
}
.o-r-input p {
    text-align: left;
    padding-left: 4px;
    color: var(--overwritten);
}
.o-full-width {
  grid-column: 1 / -1;
}

/* ***** Face Sections on Ordering page ******* */
.o-face-props {
    display: grid;
    grid-template-columns: minmax(auto, 25%) 1fr;
    margin-top: 8px;
}
/* .o-face-props-hor-split + .o-face-props { margin-top: 10px } */
.o-face-props > :nth-child(3n + 3) { grid-column: 2 }
.o-face-props .o-r-input-50-50 { grid-template-columns: 1fr 1.5fr 1fr 1.5fr }
.o-face-props .o-r-input-50-50 > :nth-child(1),
.o-face-props .o-r-input-50-50> :nth-child(2) {
  grid-column: span 2;
}
.o-face-props .o-r-input-50-50 > input[type="checkbox"] {
  justify-self: end;
  align-self: center;
}
.o-face-props .margin-top { margin-top: 0 }

.o-face-props-hor-split {
    margin: 5px -8px;
    border-top: var(--default-border);
}

/* STYLES FOR FORMULA FIELDS (Editor) */
.o-formula-input {
    display: grid;
    grid-template-columns: 30% 1fr;
    gap: 4px;
}
.o-formula-input > :nth-child(odd) { justify-self: start }
/* .o-formula-input > label:nth-child(odd)::after { content: ":" } */
.o-formula-input > input[type="checkbox"] {
    justify-self: end;
    align-self: center;
}
.o-formula-input input:not([type="checkbox"]) {
    width: 100%;
    overflow-x: auto;
     min-width: 0;
}
.o-formula-input div {
    display: grid;
    grid-template-columns: 1fr 65px var(--small-icon-size);
    gap: 2px;
    min-width: 0;
}
.o-formula-field { cursor: pointer }


/* DROPDOWN */
.o-line-dd {
    border: 1px solid var(--line-fields-border);
    background-color: var(--white);
    width: 100%;
    height: var(--line-fields-height);
    box-sizing: border-box;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 21px;
    align-items: center;
    justify-content: center;
    padding: 0 4px;

    gap: 4px;
    /* max-height: fit-content !important; */
}
.o-line-dd img{
    margin: auto;
    width: auto;
    height: auto;
    cursor: pointer;
}

.o-line-dd .icon {
    height: auto;
    width: auto;
    background-position: left center;
    caret-color: transparent; /* to make a cursor invisible */
}
.o-line-dd input {
    border: none;
    padding-left: 0;
    background-repeat: no-repeat;
    height: 100%;
    box-sizing: border-box;
}

.o-line-dd input:focus {
    outline: none;
    font-weight: bold;
}

/* the panel with the list*/
.dd-list {
  position: absolute;
  width: fit-content;
  box-sizing: border-box;
  flex-direction: column;
  justify-content: left;

  max-height: var(--block-width);
  border: 1px solid var(--primary-color);
  padding: 0 4px;
  overflow-x: visible;
  overflow-y: auto;
  cursor: pointer;
  display: none;
  background-color: var(--primary-pale);
  white-space: nowrap;
  z-index: 25;
}

.dd-list div {
  display: flex;
  padding: 2px auto;
  /* width: calc(100% - 20px); */
}
.dd-list div div, .dd-list div img {
  margin-right: 4px;
  box-sizing: border-box;
}

.dd-list div img {
  height: 100%;
  width: auto;
  object-fit: contain;
}

.dd-list .selected {
  background-color: var(--primary-middle);
}

.dd-list:focus {
  background-color: var(--primary-pale);
}

.dd-list-item .color { 
  border: 1px solid grey;
  width: 16px;
  height: 16px;
}

.dd-item-disabled {
  pointer-events: none;
  opacity: 0.5;
  background-color: #f5f5f5
}

/* EDITOR: Toolbox */
.tool-box {
    gap: calc(var(--gap) / 2);
}

.tool-box-item {
    --image-size: 29px;
    --margin: var(--gap);
    width: calc(var(--image-size) + 2 * var(--margin));
    height: calc(var(--image-size) + 2 * var(--margin));
    box-sizing: border-box;
    border-radius: var(--small-border-radius);

    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}



.tool-modes-bar {
    display: flex;
    gap: var(--gap);
}

/* TOOL MODES */
.tool-modes-bar {
    --default-toolmode-opacity: 0.7;
    --default-toolmode-opacity-disabled: 0.3;
}

.tool-mode-item {
    aspect-ratio: 1;
    border-radius: var(--default-border-radius);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;

    opacity: var(--default-toolmode-opacity);
    padding: 4px;
    box-sizing: border-box;
    cursor: pointer;
}
.tool-mode-item:hover {
    opacity: 1;
}
.tool-mode-item.selected {
    opacity: 1;
}
.tool-mode-item.is-disabled,
.tool-mode-item.is-disabled:hover {
    opacity: var(--default-toolmode-opacity-disabled);
}
.tool-mode-item p {
    font-size: 0.7rem;
    line-height: 1;
    text-transform: uppercase;
    color: black;
    margin:0;
    padding:0;
}
.tool-mode-item .img-cont {
    --max-image-size: 40px;
    width: var(--max-image-size);
    height: var(--max-image-size);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.tool-mode-item .img-cont img {
    max-width: var(--max-image-size);
    max-height: var(--max-image-size);
}

/* POP-UPS */
.pop-up-bg {
    background-color: var(--pop-up-background);
    box-shadow: var(--default-shadow);
}

.pop-up-title {
    width: 100%;
    text-align: center;
    color: var(--sage-black);
}