.condition-item:hover .circle-edit-btn,
.intake-question-item:hover .circle-edit-btn,
.product-basics .square-button-large:hover .zoom-btn,
.survey-question-item:hover .circle-edit-btn,
.modifier-item:hover .circle-edit-btn,
.extra-item:hover .circle-edit-btn,
.multiplier-item:hover .circle-edit-btn,
.primary-icon.product-placeholder[data-replaced="true"]:hover .circle-delete-btn,
.primary-icon.product-placeholder[data-replaced="true"]:hover .primary-icon.zoom-btn,
.service-picture .primary-icon[data-replaced="true"]:hover .primary-icon.zoom-btn,
.service-picture .primary-icon[data-replaced="true"]:hover .circle-delete-btn,
.preview-file-wrapper:hover .circle-delete-btn,
.preview-image-wrapper:hover .circle-delete-btn,
.recurring-option-item:hover .circle-delete-btn,
.survey-answer-option:hover .circle-delete-btn,
.came-from-option-line:hover .circle-delete-btn,
.extra-option-line:hover .circle-delete-btn,
.modifier-option-line:hover .circle-delete-btn,
.intake-question-item:hover .circle-delete-btn,
.resource-item:hover .circle-delete-btn,
.intake-answer-option:hover .circle-delete-btn,
.multiplier-option-line:hover .circle-delete-btn,
.applied-picture-item:hover .circle-delete-btn,
.asset-picture-item:hover .circle-delete-btn,
.asset-item:hover .circle-delete-btn,
.upload-image-btn:hover .circle-delete-btn{
    display:flex;
}
.condition-item .circle-edit-btn,
.intake-question-item .circle-edit-btn,
.product-basics .square-button-large .zoom-btn,
.survey-question-item .circle-edit-btn,
.modifier-item .circle-edit-btn,
.extra-item .circle-edit-btn,
.multiplier-item .circle-edit-btn,
.primary-icon.product-placeholder[data-replaced="true"] .circle-delete-btn,
.primary-icon.product-placeholder[data-replaced="true"] .primary-icon.zoom-btn,
.service-picture .primary-icon[data-replaced="true"] .primary-icon.zoom-btn,
.service-picture .primary-icon[data-replaced="true"] .circle-delete-btn,
.preview-file-wrapper .circle-delete-btn,
.preview-image-wrapper .circle-delete-btn,
.recurring-option-item .circle-delete-btn,
.survey-answer-option .circle-delete-btn,
.came-from-option-line .circle-delete-btn,
.extra-option-line .circle-delete-btn,
.modifier-option-line .circle-delete-btn,
.intake-question-item .circle-delete-btn,
.resource-item .circle-delete-btn,
.intake-answer-option .circle-delete-btn,
.multiplier-option-line .circle-delete-btn,
.applied-picture-item .circle-delete-btn,
.asset-picture-item.selected:hover .circle-delete-btn,
.asset-picture-item .circle-delete-btn,
.asset-item.selected:hover .circle-delete-btn,
.asset-item .circle-delete-btn,
.upload-image-btn .circle-delete-btn{
    display:none;
}
.circle-edit-btn,
.circle-delete-btn{
    position: absolute;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--primary-color)!important;
    flex-shrink: 0;
    border-radius: 50%;
    width: 18px!important;
    height: 18px!important;
    padding: 0!important;
    top: -6px;
    background: white!important;
}     
.circle-delete-btn{    
    right: -6px;
    color: var(--cancel-color)!important;
    border:1px solid var(--cancel-color)!important;
}
.circle-edit-btn {
    right: -6px;
    border: 1px solid var(--primary-color)!important;
}
.circle-delete-btn:hover{
    background: var(--cancel-color)!important;
    color:white!important;
}
.circle-edit-btn:hover {
    background:var(--primary-color)!important;
}
.product-basics .square-button-large .circle-edit-btn{
    bottom: -5px;
    top: auto;
}
span.arrow-expander {
    position: absolute;
    display: flex;
    right: 30px;
    width: 25px;
    height: 25px;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    border-radius: 50%;
    border: 1px solid;
    transition: transform 0.2s ease;
    cursor: pointer;
}
.asset-item:hover{
    border:1px solid #ddd;
    border-radius: var(--block-border);
    padding: 4px;
}

.asset-item {
    width: 40px;
    height: 40px;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}
.asset-picture-item.selected{
    position:relative;
    border: 3px solid var(--primary-color);
    border-radius: 10px;
    padding:0;
    height:110px;
    width:110px;
}
.asset-item.selected {
    position:relative;
    border: 3px solid var(--primary-color);
    border-radius: 10px;
    padding: 3px;
}
.selectable-customer-item.selected::after,
.resource-item.selected::after,
.service-item.selected::after,
.condition-item.selected::after,
.recurring-option-item.selected::after,
.selected .survey-question-item::after,
.service-area-row.selected::after,
.product-item.selected::after,
.survey-question-item-group.selected::after,
.extra-item-group.selected::after,
.intake-question-item-group.selected::after,
.modifier-item-group.selected::after,
.multiplier-group.selected::after,
.intake-question-group.selected::after{
    content: 'SELECTED';       
    position: absolute;
    width: max-content;
    padding:1px 5px;
    background: var(--primary-color);
    color: white;
    font-size: 8px;
    border-radius: 8px;
    text-align: center;
}
.selectable-customer-item.selected::after,
.resource-item.selected::after,
.service-item.selected::after,
.condition-item.selected::after,
.recurring-option-item.selected::after,
.selected .survey-question-item::after,
.service-area-row.selected::after,
.product-item.selected::after,
.survey-question-item-group.selected::after,
.extra-item-group.selected::after,
.intake-question-item-group.selected::after,
.modifier-item-group.selected::after,
.multiplier-group.selected::after,
.intake-question-group.selected::after{
    top:-7px;
    right:50%;
    transform: translate(50%);
}
.modifier-option-line.selected::after,
.color-tile.selected::after,
.extra-option-line.selected::after,
.row.multiplier-option-line.selected::after,
.asset-picture-item.selected::after,
.asset-item.selected::after {
  content: '✓';       
  position: absolute;
  width: 18px;
  height: 18px;
  background: var(--confirm-color);
  color: white;
  font-size: 14px;
  line-height: 18px;
  border-radius: 50%;
  text-align: center;
} 
.color-tile.selected::after,
.asset-picture-item.selected::after,
.asset-item.selected::after {  
    top: -8px;
  right: -8px;
}
.asset-item.primary-icon svg path {
    width: 40px;
    height: 40px;
}
.asset-picture-item.selected.just-uploaded::after,
.asset-picture-item:hover.just-uploaded::after,
.asset-picture-item.just-uploaded::after,
.asset-item.selected.just-uploaded::after,
.asset-item:hover.just-uploaded::after,
.asset-item.just-uploaded::after {
    content: 'NEW';       
    position: absolute;
    display:flex;
    align-items:center;
    justify-content:center;
    background: var(--confirm-color);
    color: white;
    border-radius: var(--block-border);
}
.asset-item.selected.just-uploaded::after,
.asset-item:hover.just-uploaded::after,
.asset-item.just-uploaded::after {
    width: 18px;
    height: 10px;
    font-size: 6px;
}
.asset-picture-item.selected.just-uploaded::after,
.asset-picture-item:hover.just-uploaded::after,
.asset-picture-item.just-uploaded::after{
    width: 25px;
    height: 12px;
    font-size: 8px;
}
.asset-picture-item.selected.just-uploaded::after,
.asset-item.selected.just-uploaded::after{
    top: -7px;
    left: -2px;
}
.asset-item:hover.selected.just-uploaded::after,
.asset-picture-item:hover.selected.just-uploaded::after{
    top: -7px;
    left: -2px;
}
.asset-item.just-uploaded::after,
.asset-picture-item.just-uploaded::after{
    top: -5px;
    left: 0px; /*works fot asset-picture-item*/
}

.asset-item:hover.just-uploaded::after,
.asset-picture-item:hover.just-uploaded::after{
    top: -5px;
    left: 0px; 
}
.asset-picture-item img {
    height: 110px;
    border-radius: var(--block-border);
}
.applied-picture-item,
.asset-picture-item {
    position: relative;
}
button:hover.selected-icon {
    border: 2px solid var(--primary-color);
    background: transparent;
}
button.section-button.add-new-condition {
    gap: 5px;
}
.applied-picture-item img {
    border-radius: var(--block-border);
}
.survey-question-item span.attention-label {
    justify-self: end;
    margin-right: 20px;
}
.intake-question-item span.question-span,
.survey-question-item span.question-span{
    width: 20px;
    height: 20px;
    font-size: 25px;
}
span.question-span {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
    width: 13px;
    height: 13px;
    font-size: 17px;
    border-radius: 50%;
    border: 2px solid;
    flex-shrink: 0;
}
span.attention-label {
    display: flex;
    justify-content: center;
    border-radius: 50%;
    background: #ffbe5c;
    color: white;
    width: 20px;
    height: 20px;
}
.action-row {
    display: flex;
    justify-content: end;
    margin-top: 10px;
    gap:10px;
}
.edit-mode-modal-map-section .action-row{
    margin: 0;
}
.edit-area-mode-modal-content .action-row button {
    width: 100%;
    background: var(--primary-color);
    color: white;
}
.edit-area-mode-modal-content .action-row button:hover {
    background: var(--button-hover-color);
}
.search-results {
    display: flex;
}
/*** Available icons and images***/
.action-buttons button:disabled,
.action-buttons button:disabled:hover {
    background-color: #f5f2f2!important;
    color: #ccc!important;
    cursor: not-allowed;
}
.crop-info {
    display: flex;
    font-size: 12px;
    justify-content: space-between;
}
.crop-info p {
    margin: 5px 0;
}
.cropped-modal-content .action-buttons{
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.cropped-modal-content .action-buttons button {
    background: transparent;
    color: var(--primary-color);
    border: 1px solid;
    padding: 3px 5px;
}
.cropped-modal-content .action-buttons button:hover {
    background: var(--primary-color);
    color: white;
}
.cropped-modal-content .modal-body {
    margin: 20px 0;
}
.modal-content.load-icons-content,
.modal-content.load-images-content{
    height: fit-content;
    box-sizing: border-box;
    width: 600px;
}
.pictures-list-section.column{
    margin-top: 20px !important;
}
.pictures-list-section.column,
.icons-list-section.column {
    margin: 0 0 20px 0;
    border: 1px solid #ccc;
    border-radius: var(--block-border);
    padding: 10px 10px 0;
    height: 300px;
    overflow-y: auto;
}
.pictures-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    width: 100%;
}

.asset-item img {
    width: 100%;
    height: auto;
    cursor: pointer;
    border-radius: var(--block-border);
}
.icons-list-section.column h3 {
    margin: 5px;
    font-size: 0.6em;
}
.modal-content.load-icons-content .search-bar{
    margin:10px 0;
}
.search-results {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.guidance {
    font-size: 12px;
    justify-self: end;
}
.guidance h2{
    font-size: 0.8em;
    margin:2px 0;
}
.guidance p{
    font-size: 0.7em;
    margin:2px 0;
}
.user-ubloaded-icons{
    border-bottom:1px solid #ddd;
}

.user-ubloaded-icons .primary-icon svg {
    width: 40px;
    height: 40px;
}
.user-uploaded-pictures{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2%;
    height: 100%;
    padding: 6px;
    overflow-y: auto;
    align-items: center;
    /* align-content: center; */
    justify-items: center;
}
/*** Recurriong Modal***/
.recurring-options-modal-content .scrollable-section{
    margin:10px 0;
    overflow-y:visible;
}
.add-service-modal-content .input-wrapper {
    padding: 0 5px;
}
.add-recurring-option-input.input-wrapper input {
    text-align: center;
}
.recurring-options-list {
    gap: 10px;
}

.add-recurring-option-option {
    gap: 10px;
}

.add-recurring-option-input.input-wrapper {
    width: 120px;
}

.add-recurring-option-option .column {
    width: 50%;
}
.recurring-option-option-row label {
    display: flex;
    align-items: center;
    gap: 10px;
}
.row.recurrinf-discount-from {
    justify-content: space-between;
    white-space: nowrap;
}

.dropdown-type-1.recurring-discount-dropdown {
    width: 100%;
}
.week-frequency,
.month-frequency {
    display: flex;
    gap: 10px;
    align-items: center;
}
.month-on-date-section,
.month-on-day-week-day-section {
    display: flex;
    gap: 10px;
    align-items: center;
}

.recurring-name-column {
    display: flex;
    flex-direction: column;
    gap: 3px;
    box-sizing: border-box;
}

.recurring-option-option-row {
    display:flex;
    gap:10px;
    justify-content: space-between;
    align-items: center;
}
/*** ***/
.user-uploaded-icons,
.available-icons,
.user-ubloaded-icons {
    height: fit-content;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    justify-items: center;
    overflow-x: auto;
    overflow-y:hidden;
    gap: 10px;
    padding: 7px;
    flex-shrink:0;
}

span.primary-icon.selected {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid;
    border-radius: 10px;
    aspect-ratio: 1/1;
}
.upload-image-btn{
    background: #ddd;
    height: 100%;
    width: 110px;
    height: 110px;
}
.upload-image-btn:hover{
    background: var(--inactive-color);
}

.uploaded-pictures img {
    height: 111px;
    width: 111px;
    border-radius: var(--block-border);
}
.unit-name {
    font-size: 0.7em;
}
span.extra-price-per-unit-attention,
span.price-per-unit-attention {
    font-size: 10px;
    padding: 4px;
    margin-top: 5px;
    border: 1px solid;
    width: fit-content;
    align-self: center;
}
.column.modifier-price-unit-name {
    border: 1px solid;
    padding: 5px!important;
}
.unit-label {
    display: flex;
    font-size: 0.7em;
    align-items: center;
}
.price-label-column .label-large {
    gap: 0;
}
.options-list {
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: var(--block-border);
    min-height: 100px!important;
    max-height: 500px;
    gap:5px;
}
.options-list .came-from-option-line  label.label-medium {
    margin: 0;
}
/*** intake Questions section ***/
.condition-item .label-medium {
    text-overflow: ellipsis;
}

.condition-item label {
    margin: 0;
}

.condition-item {
    grid-template-columns: 30% 40px 25% 40px auto;
    font-size: 14px;
    gap: 5px;
}

.conditions-type {
    display: flex;
    padding: 3px;
    border: 1px solid;
}

.label-show-condition {
    padding: 1px 3px;
    /* background: var(--inactive-color); */
    width: fit-content;
    color: var(--primary-color);
    border-radius: 2px;
    border: 1px solid var(--primary-color);
}

.intake-questions-conditions-container .section-header {
    padding-bottom: 5px;
}
.add-service-modal-content h3 {
    margin: 0 !important;
}
.extras-modal-content p,
.column.service-intake-question-section p {
    margin: 5px;
    font-size:0.8em;
}
.products-modal-content .modal-footer,
.intake-questions-modal-content .modal-footer,
.modifier-modal-content .modal-footer,
.multiplier-modal-content .modal-footer,
.extras-modal-content .modal-footer {
    padding-top: 10px;
    border-top: 1px solid;
}
.recurring-options-buttons-container,
.products-buttons-container,
.post-booking-survey-buttons-container,
.service-area-buttons-container,
.service-providers-buttons-container,
.post-booking-survey-buttons-container,
.extras-buttons-container,
.multipliers-buttons-container,
.modifiers-buttons-container {
    display: flex;
    justify-content: end;
}
.intake-questions-buttons-container{
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.survey-modal-content{
    min-width:500px;
    height:fit-content;
    max-height:95%;
}
.intake-question-modal-content.modal-content{
    min-width:500px;
    min-height:70%;
    height:fit-content;
    max-height:95%;
}
.add-survey-question-option,
.add-intake-question-option .column {
    padding: 0;
}

.add-other-option.row label.label-medium {
    display: flex;
    gap: 10px;
}
.add-survey-question-option,
.add-intake-question-option {
    gap: 10px;
    margin-top: 10px;
}
.add-extra-option.column,
.intake-questions-list .border-top-bottom {
    gap: 10px;
}
.intake-questions-list h2 {
    margin-left: 0;
}
.intake-questions-list {
    gap: 10px;
}
.provider-available-resources-list,
.area-providers-container,
.intake-questions-conditions-container,
.intake-questions-groups-container,
.recurring-options-container,
.providers-groups-container,
.service-area-groups-container,
.survey-options-container,
.products-container,
.post-booking-survey-groups-container,
.multipliers-groups-container,
.extras-groups-container,
.modifier-options-container,
.modifier-items-container,
.options-container,
.answer-options-container,
.extra-options-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 5px;
}
.selectable-customer-item.selected,
.resource-item.selected,
.selected-main-option-line.selected,
.uploaded-pictures.selected img,
.service-item.selected,
.condition-item.selected,
.recurring-option-item.selected,
.service-area-row.selected,
.provider-item.selected,
.product-item.selected,
.multiplier-option-line.selected,
.modifier-option-line.selected,
.answer-option-line.selected,
.extra-option-line.selected {
    border: 1px solid var(--primary-color);
}
.personal-service-area-list .service-area-row{
    cursor:auto;
}
.personal-service-area-list .service-area-row:hover{
    box-shadow:none;
}
.resource-item {
    grid-template-columns: 10% 83% 7%;
}

.main-service-item{
    cursor: pointer;
    grid-template-columns: 60px 30% 20% auto;
    gap: 10px;
    padding: 10px;
}
.main-service-item .primary-icon.service-icon svg,
.main-service-item .primary-icon.service-icon{
    width:60px;
    height:60px;    
}
.modifier-item,
.extra-item{
    grid-template-columns: 40px auto 20% 20% 5%;
    gap: 10px;
}
.products-container .product-item{
    grid-template-columns: 40px 30% 15% 15% 15% auto;
}
.product-item {
    display: grid!important;
    grid-template-columns: 40px auto 15% 15% 15% 5%;
    gap: 1%;
}
.service-item,
.recurring-option-item,
.intake-question-item, 
.selected .extra-item{
    grid-template-columns: 40px auto 20% 25%;
}
.survey-answer-option,
.came-from-option-line{
    grid-template-columns: 10px 30px 50% auto;
    gap: 10px;
}
.survey-answer-option[data-answer-id="other"]{
    grid-template-columns: 30px 50% auto;
    gap: 10px;
}
.survey-question-item,
.answer-option-line {
    grid-template-columns: 40px 40% auto;
}
.special-customer-item {
    grid-template-columns: 40px auto 40% 20px;
    gap: 10px;
}
.multiplier-item{
    grid-template-columns: 40px 50% 30% auto;
}
.providers-groups-container .provider-item{
        grid-template-columns: 40px 20% 27% auto;
        gap:5px;
        padding: 5px;
}
.provider-item.read-only {
    grid-template-columns: 40px 20% 27% auto;
    gap: 10px;
    pointer-events: none;
}

.multiplier-item .primary-icon svg{
    width: 35px;
    height: 35px;
}
.intake-answer-option {
    grid-template-columns: auto 20% 20% 5%;
}
.add-condition-question-section {
    margin: 10px 0;
    gap: 10px;
}

.add-condition-question-section .dropdown-type-1-selected {
    margin: 0!important;
}

.dropdown-type-1.conditions-main-dropdown {
    width: 100%;
}

.condition-row-question {
    display: grid!important;
    grid-template-columns: 15% auto 25%;
}

.condition-row-question .label-large {
    background: #ccc;
    height: 40px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--block-border);
    color: white;
    margin: 0;
}
.label-large.clickable-andor {
    background: var(--inactive-color);
    cursor: pointer;
}
/*** Resources ***/
.available-resources-modal-content.modal-content .modal-body {
    margin-top: 10px;
}
.providers-list-container,
.extra-required-resources-list.list-items,
.available-resources-column.column .list-items {
    border-radius: var(--block-border);
    border: 1px solid #ccc;
    background: white;
}
.required-resources-list.list-items {
    border: 1px solid #ccc;
    border-radius: var(--block-border);
    padding: 10px;
    max-height: 300px;
    overflow: hidden;
}

#availableResourcesList {
    gap: 10px;
    display: flex;
    flex-direction: column;
}
div#listAvailableResources {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.resource-item .primary-icon {
    justify-content: left;
}
#addAvailableResourceBtn {
    padding: 8px;
    font-size: 0.9em;
}
.available-resources-modal-content .action-row {
    display: flex;
    width: 100%;
    gap: 10px;
}
.add-available-resource.column {
    gap: 10px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #ccc;
    padding: 10px 5px 5px 5px;
    background: var(--background-color);
}
/*** Provicers ***/
.required-providers-section {
    display: flex;
    padding: 15px;
    justify-content: space-between;
    border-top: 1px solid;
}
.add-provider-duration-column {
    width: 90px;
}

.required-providers-section .row {
    width: fit-content;
}


.required-providers-section span {
    margin-bottom: 10px;
    font-size: 0.8em;
    width: fit-content;
}

.required-providers-section .column {
    width: fit-content;
}



/***  ***/

.column.add-modifier-duration .label-small {
    justify-content: space-between;
}

.add-modifier-option.column .column {
    margin-top: 10px;
    gap:10px;
}

.multiplier-item-column-center.column label,
.multiplier-item-column-center.column span{
    text-align: center;
    justify-content: center;
}
.intake-question-group.selected .row.answer-option-line{
    grid-template-columns: 30% auto;
}
.service-area-row{
    grid-template-columns: 40px 30% auto auto;
}
.multiplier-group.selected .row.multiplier-option-line{
    grid-template-columns: 40px 30% auto;
}

.selected .survey-question-item,
.selected .extra-item,
.selected .intake-question-item,
.selected .modifier-item,
.selected .multiplier-item {
    border: none;
}
.expanded.selected .survey-question-item,
.expanded.selected .extra-item,
.expanded.selected .intake-question-item,
.expanded.selected .modifier-item,
.expanded.selected .multiplier-item {
    border-bottom: 2px solid var(--primary-color);
    border-bottom-left-radius: 0!important;
    border-bottom-right-radius: 0!important;;
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: var(--block-border);
}
.primary-icon.edit-item {
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--primary-color);
}
.circle-edit-btn:hover .primary-icon.edit-item{
    color:white;
}
.intake-answer-option.dragging {
    opacity: 0.5;
}
.drag-handle {
    font-size: 1.5em;
}
.add-service-modal-content.modal-content p {
    font-size: 0.6em;
    margin: 0;
}
.multiplier-modal-content .label-small {
    margin-bottom: 5px;
}
label.affected-by-modifier {
    display: flex;
    align-items: center;
    gap: 10px;
}

.applies-to-grid .label-medium {
    display: flex;
    align-items: center;
    gap: 5px;
}

.applies-to-grid .tooltip-hover {
    font-size: 0.9em;
    width: 0.9em;
    height: 0.9em;
}

.multiplier-affects p {
    font-size: 0.6em;
}
/*** Member Reward Section ***/
.column.member-reward-section {
    gap: 10px;
}
#extraOptionPrice,
#addMemberPriceInput,
#addRewardInput {
    height: 30px;
    width: 100px;
    white-space: normal;
}
.column.set-reward-column,
.column.member-price-column {
    width: 120px;
}
textarea.disclaimer-textarea  {
    height: 50px;
    min-height: 50px;
    max-height: 50px;
    color: var(--primary-color);
}
#serviceListContainer{
    border:1px solid #ccc;
    border-radius: var(--block-border);
    margin-top:10px;
    padding:10px;
}
.column .label-small {
    display: flex;
    gap: 5px;
}
.skeleton-service-item {
    display: grid;
    grid-template-columns: 50px auto;
    gap: 5%;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #ddd;
    align-items: center;
    color: #ccc;
    background: #fafafa;
}
.services-page .page-section {
    margin: 40px 3px 5px 3px;
    min-height: calc(100vh - 45px);
}
.add-new-condition {
  display: none;
}
button.section-button.add-new-intake-question {
    grid-column: none;
}
button.outlined-button.add-service {
    width: 100%;
}
button:hover.outlined-button.add-service {
    background: var(--inactive-color);
    border-color:var(--inactive-color);
}
.service-area-row button.link-button {
    background: transparent!important;
    color: var(--primary-color)!important;
    max-width: fit-content;
    border: none !important;
    padding: 0!important;
    height: fit-content!important;
}
.service-area-row button:hover.link-button {
    background: transparent!important;
    color: var(--primary-color)!important;
    max-width: fit-content;
    border: none !important;
    padding: 0;
    height: fit-content!important;
    text-decoration: underline;
}
.service-area-row .color-square {
    width: 25px;
    height: 25px;
    border: 1px solid #ccc;
}
div#listOfServices {
    height: 100%;
    min-height: 85vh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
#multiplierOptionsList {
    gap: 5px;
    padding: 5px;
    display: flex;
    flex-direction: column;
}
.multiplier-modal-content .label-small {
    margin-bottom: 5px;
}
.column.radio-buttons-row label {
    align-items: center;
    justify-items: center;
    display: flex;
    gap: 10px;
}
.column.radio-buttons-row {
    margin: 10px 0;
    gap:10px;
}
.extras-modal-content .column.radio-buttons-row {
    margin: 0;
}
.service-controls.list-items {
    border: 1px solid #ccc;
    box-sizing: border-box;
    min-height: 200px;
    border-radius: var(--block-border);
    padding-top: 0;
    gap: 5px;
}
.add-service-basics.row .column {
    width: fit-content;
}
.service-controls.list-items .search .invisible-input {
    border: none;
    margin: 0;
}

.service-controls.list-items button {
    padding: 5px;
    white-space: normal;
    height: 35px;
    width: 80px;
}

.modal-content.add-service-modal-content .scrollable-section {
    padding-bottom: 0;
    gap: 10px;
}

label.label-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 5px 0;
}
.label-header {
    display: flex;
}
.column.tax-rate-column {
    width: fit-content;
}
.modifier-modal-content p,
.multiplier-modal-content p {
    font-size: 0.8em;
    margin: 3px;
}


.multipliers-list.column {
    box-sizing: border-box;
    padding-bottom: 10px;
}

.multipliers-list.column .list-items button {
    padding: 6px 8px;
}
.add-multiplier-option.column h2 {
    margin: 10px;
}
.multipliers-list.column .list-items {
    gap: 5px;
    min-height: 100px;
    height: 100%;
    border: 1px solid #ccc;
    border-radius: var(--block-border);
}
.row.extra-details .input-wrapper,
.add-service-basics.column .input-wrapper {
    width: 120px;
}
.column.add-service-buffer-time {
    margin-top: 10px;
    width: fit-content !important;
}
.column.option-line {
    flex-direction: row;
}

.multiplier-option-line .column {
    width: fit-content;
}
.multiplier-option-line {
    display: grid !important;
    grid-template-columns: 3% 40px 50% 20% auto;
    width: 100%;
    align-items: center;
    gap: 10px;
}
.extra-option-line,
.multiplier-option-line,
.modifier-option-line {            
    align-items: center;
    padding: 5px;
    border: 1px solid var(--primary-color);
    border-radius: var(--block-border);
    box-sizing: border-box;
    position:relative;
    background:white;
}
.multiplier-option-line .label-large.circle-label {
    font-size: 1.3em;
    border: 1px solid;
    border-radius: 50%;
    padding: 5px;
    margin: 0;
    background: var(--inactive-color);
    color: white;
    display: flex;
    align-items: center;
    height: 30px;
    width: 30px;
    justify-content: center;
}
.extra-options-container .extra-option-line,
.modifier-options-container .modifier-option-line{
    display: grid;
    grid-template-columns: 40px auto 20% 15% 10% 10%!important;
}
.row.extra-option-line,
.row.modifier-option-line{
    display: grid;
    grid-template-columns: 15px 40px auto 10% 15% 10% 10%;
    gap: 1%;
    font-size: 0.8em;
    align-items: center;
}
.extra-option-line img {
    width: 30px;
}

/*.delete-option-row.rounded-outlined-button {
    align-self: flex-start;
    justify-self: flex-end;
    font-size: 12px;
    width: 16px;
    height: 16px;
    padding: 0 !important;
}*/

.add-multiplier-option.column {
    height: fit-content;
}

.add-multiplier-option.column .label-small {
    flex-direction: row;
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 5px;
}
.add-service-modal-content .list-items button:hover,
.add-service-modal-content .list-items button {
    padding: 8px 18px;
    font-size: 0.8em;
}
.column.add-modifier-duration .label-small {
    justify-content: space-between;
}
#deleteAvailableResourceBtn,
#saveAvailableResourceBtn{
    width:100%;
}
#manageAvailableResourcesBtn{
    background:transparent;
    color:var(--primary-color);
}
#manageAvailableResourcesBtn:hover{
    text-decoration:underline;
}
/*.add-service-modal-content .list-items button{
    background:transparent;
    color:var(--primary-color);
    border:none;
    width:fit-content;
    padding:0 10px;
    justify-self: end;
}
.add-service-modal-content .list-items button:hover{
    text-decoration:underline;
    background:transparent;
    color:var(--primary-color);
    border:none;
    width:fit-content;
    padding:0 10px;
    justify-self: end;
}*/
#zoneBtn,
#surveyAddQuestionOptionBtn,
#addCameFromOptions,
#addCustomSurveyQuestionOption,
#deleteAvailableResourceBtn,
#saveAvailableResourceBtn,
#addIntakeQuestionOption,
#confirmExtraItem,
#confirmModifierOption,
#confirmMultiplierOption {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 6.5px 8px;
    font-size: 15px;
    background: var(--inactive-color);
    color:white;
    margin-top:10px;
}
#zoneBtn:hover,
#surveyAddQuestionOptionBtn:hover,
#manageCameFromOptions:hover,
#addCustomSurveyQuestionOption:hover,
#deleteAvailableResourceBtn:hover,
#saveAvailableResourceBtn:hover,
#addIntakeQuestionOption:hover,
#confirmExtraItem:hover,
#confirmModifierOption:hover,
#confirmMultiplierOption:hover {
    padding: 6.5px 8px;
    font-size: 15px;
    background: var(--primary-color);
}

.add-multiplier-option.column input[type="text"],
.add-multiplier-option.column input[type="number"]{
    width: 100%;
}

.list-items h2 {
    margin: 10px;
    font-size: 1em;
}
.intake-questions-list h2 {
    margin: 0;
}
.border-top-bottom.column {
    border: 1px solid #ccc;
    border-radius: var(--block-border);
    /* border-bottom: 1px solid #ccc; */
    padding: 10px !important;
    background: var(--menu-bar-color);
    box-sizing: border-box;
}

.label-small .tooltip-hover {
    font-size: 1em;
    width: 1em;
    height: 1em;
    margin: 0;
}
.required-providers-section .label-small {
    margin-bottom: 3px;
}
.row.radio-buttons-row input {
    font-size: 0.3em;
}
p.section-info {
    display: flex;
    gap: 5px;
    margin-bottom: 3px!important;
}

p.section-info .tooltip-hover {
    width: 1em;
    height: 1em;
    font-size: 1em;
}
.column.radio-bottons-row label {
    font-size: 0.9em;
    display:flex;
    align-items: center;
    gap: 10px;
}

.add-multiplier-option .input-wrapper {
    display:flex;
    align-items:end;
}
.add-multiplier-option .input-wrapper span{
    font-size: 0.8em;
}

.row.modifier-details .column {
    width: 120px;
    padding: 0;
}
.row.modifier-details .row {
    margin: 5px 0;
}
.column.add-modifier-duration .row {
    margin: 0!important;
}
.border-top-bottom.column .row {
    margin-bottom: 5px;
    align-items: end;
}

.row.modifier-checkboxes label {
    font-size: 0.8em!important;
    margin: 0;
}
.row.modifier-checkboxes input[type="checkbox"],
.row.modifier-checkboxes input[type="checkbox"].blue-checkbox:checked,
.row.modifier-checkboxes input[type="checkbox"].blue-checkbox::after{
    width:0.8em;
    height:0.8em;
    font-size: 0.8em;
}

.primary-icon.load-picture path {
    fill: white;
}
button.add-selected-icon{
    background: #ddd;
    border:1px solid var(--inactive-color);
}
.selected-icon img {
    width: 25px;
    height: 25px;
}
button.selected-icon{
    background: white;
    border:1px solid var(--primary-color);
}
button.icon-upload-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px !important;
    align-self: end;
    width: 30px;
    height: 30px;
}
button:hover.icon-upload-btn {
    background: var(--inactive-color);
    border-color: var(--inactive-color);
    width: 30px;
    height: 30px;
}
button:hover.icon-upload-btn.selected-icon {
    background: transparent;
    border-color: var(--primary-color);
    width: 30px;
    height: 30px;
    padding: 0!important;
}
button:hover.icon-upload-btn .primary-icon.fill-white.icon-25 path{
    fill:white;
}
p.attention-span {
    text-align: center;
}
.add-special-customer-btn{
    align-self: center;
    border: 1px solid;
    padding: 5px !important;
    background: transparent;
    color: var(--primary-color);
    width: fit-content;
}
button.section-button.add-product-btn {
    align-self: center;
    border: 1px solid;
    padding: 5px !important;
}
.add-special-customer-btn:hover,
button.section-button.add-product-btn:hover {
    background:var(--primary-color);
    color: white!important;
    text-decoration: none;
}
.row.modifier-details .rounded-outlined-button {
    justify-self: end;
}

.row.modifier-details button {
    font-size: 0.6em;
    white-space: wrap;
    width: 80px;
    height: 31px;
    padding: 2px 3px !important;
}

.column.radio-bottons-row label {
    font-size: 0.7em;
    display: flex;
    align-items: flex-start;
    gap: 5px;
}

.column.radio-bottons-row {
    padding: 5px;
    box-sizing: border-box;
}


.column.center {
    align-items: center;
    justify-content: center;
    justify-self: center;
}
.product-member-price,
.option-member-price,
label.label-member-price {
    font-size: 0.6em!important;
    background: #fcfc63;
    padding: 0 2px;
    border: 1px solid;
    border-radius: 3px;
    width: fit-content;
    cursor: pointer;
}

button.delete-option-row {
    align-self: flex-start;
}

.row.modifier-option-line img {
    width: 30px;
    height: 30px;
}

.multiplier-modal-content.modal-content {
    height: 98%;
    box-sizing: border-box;
    overflow: hidden;
}
#extraOptionsList{
    height: 200px;
}
#modifierOptionsList {
    height: 300px;
}
#extraOptionsList,
#modifierOptionsList {
    border: 1px solid #ccc;
    border-radius: var(--block-border);
    gap: 5px;
    padding: 5px;
    overflow-y: hidden;
    height:100%;
}

.add-multiplier-option.column .column {
    padding: 0 10px;
    gap:3px;
}
.multiplier-affects.column {
    padding: 0!important;
}
.row.required {
    color: var(--primary-color);
}
.add-service-modal-content.modal-content .modal-body {
    margin-top: 20px;
    box-sizing: border-box;
}
.add-service-buffer-time .column {
    gap: 5px;
    width: fit-content;
}
.add-service-basics.column .row {
    margin-bottom: 10px;
}
.product-pictures-row,
.service-pictures-row {
    overflow-x: scroll;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: var(--block-border);
    box-sizing: border-box;
    height: fit-content;
    flex-shrink: 0;
    display: flex;
    gap: 10px;
}
.product-picture,
.service-picture {
    display: flex;
    gap: 10px;
    align-self: center;
    height: 80px;
}
.product-picture .primary-icon,
.product-picture .primary-icon svg,
.product-picture .primary-icon path,
.service-picture .primary-icon,
.service-picture .primary-icon svg,
.service-picture .primary-icon path{
    height: 80px;
    width: 80px;
    border: 1px dashed #ccc;
    fill: #ccc;
    flex-shrink: 0;
}
.product-placeholder img,
.service-picture img{
    border-radius: var(--block-border);
}
.primary-icon.product-placeholder[data-replaced="true"],
.primary-icon.product-placeholder[data-replaced="true"] img,
.primary-icon.product-placeholder[data-replaced="true"] svg,
.service-picture .primary-icon[data-replaced="true"],
.service-picture .primary-icon[data-replaced="true"] img,
.service-picture .primary-icon[data-replaced="true"] svg{
    border:none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.primary-icon.product-placeholder[data-replaced="true"],
.service-picture .primary-icon[data-replaced="true"]{
    position:relative;
}
.add-service-basics.row .square-button-large {
    height: 80px;
    width: 80px;
    background: #ccc;
}
.add-service-basics.row .square-button-large:hover {
    background: var(--inactive-color);
}

.add-service-basics.row {
    box-sizing: border-box;
    align-items: center;
}

.add-service-basics.row .column input {
    box-sizing: border-box;
    width: 100px;
}

.add-service-basics.row .button-fill-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.42em;
    height: 32px;
    width: 200px;
    padding: 4px 5px;
}
.add-recurrin-option-option,
.remind-if-extra-not-selected,
.extras-list.column,
.extra-option-section,
.add-extra-option.column {
    gap: 10px;
}
.row.required label,
.row.required input{
    margin: 0 !important;
    align-items: center !important;
}
.row.required{
    margin: 10px 0 !important;
    align-items: center !important;
    width: fit-content;
}
button#addServiceMembedMinPrice {
    flex-direction: column;
}
#viewZipCodes,
.record-payment-content .link-button,
.customer-modal-content .link-button,
.availability-modal-content .link-button,
.team-card-active .section-button,
.team-card-provider-info .link-button,
.conditions-modal-content .link-button,
.intake-questions-list .link-button,
.products-modal-content.modal-content .link-button,
.extras-modal-content.modal-content .link-button,
.modifier-modal-content.modal-content .link-button,
.add-service-modal-content.modal-content .link-button {
    width: 100%;
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    gap: 10px;
    height: 40px;
    background: var(--background-color);
    white-space: nowrap;
    padding: 3px 10px;
    border: 1px solid #ddd;
    color: var(--inactive-color);
    font-size:0.8em;
}
.section-button.provider-available-resources-btn {
    margin-bottom: 20px;
}
.availability-modal-content .link-button:hover,
.conditions-modal-content .link-button:hover,
.intake-questions-list .link-button:hover{
    background: var(--background-color);
    color: var(--inactive-color);
    font-size:0.8em;
}
.add-recurring-option-input.input-wrapper,
.add-service-reward-input input {
    width: 120px;
}
.add-service-basics.column .label-small {
    display: flex;
    gap: 5px;
}

.add-service-basics.column label {
    display: flex;
    gap: 10px;
}

label.radio-buttons-row {
    margin: 10px 0;
}

.column.add-service-buffer-time .row {
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: var(--block-border);
    margin: 0;
    background: white;
}
.service-multipliers-section,
.buffer-time-section {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 10px;
    background: var(--background-color);
}
.selected-option-line label,
.add-service-fee.row .row,
.add-service-fee.row .row label {
    margin: 0;
}
/*.intake-questions-list.list-items,
.intake-questions.list-items,
.extras-list.list-items,
.modifiers-list.list-items,
.multipliers-list.list-items {
    padding: 10px 5px;
    border: 1px solid #ccc;
    border-radius: var(--block-border);
    min-height:100px;
    max-height: 700px;
    overflow-y:scroll;
    background: var(--background-color);
}*/
.recurring-options-list.list-items,
.products-list.list-items,
.survey-questions-list.list-items,
.booked-with-list.list-items,
.service-providers-list.list-items,
.service-area-list.list-items,
.survey-questions-list.list-items,
.intake-questions-list.list-items,
.intake-questions.list-items,
.extras-list.list-items,
.modifiers-list.list-items,
.multipliers-list.list-items {
    padding: 10px 5px;
    border-top: 1px solid;
    border-bottom: 1px solid;
    min-height:90px;
    max-height: 700px;
    overflow-y:scroll;
    background: var(--menu-bar-color);
}
.service-modal .button-danger-outline.delete-service-btn,
#saveServiceItem {
    align-items: end;
}

.selected-main-option-line {
    display: grid;
    grid-template-columns: 50px 50% auto;
    gap: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: var(--block-border);
}

button.rounded-outlined-button.uncheck-option-row {
    padding: 0;
    font-size: 20px;
}

.selected-main-option-line.selected .column {
    width: fit-content;
    align-items: center;
}

.selected-main-option-line.selected label {
    text-align: right;
    margin: 0;
}
.selected-main-option-line.selected input {
    align-self: center;
}

.selected-main-option-line.selected .row {
    justify-content: end;
}

.selected-option-line {
    display: grid;
    width: 90%;
    grid-template-columns: 10% 25% 20% 12% 12% auto;
    gap: 3px;
    font-size: 0.9em;
    padding: 5px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: var(--block-border);
    align-self: end;
}
.selected-option-line.selected {
    border: 1px solid var(--primary-color);
}


.selected-section {
    display: flex;
    flex-direction: column;
    gap: 2px;
}