/* MARK: FILTERS */

.filters-search {
    display: flex;
}

.filters-search #advancedfilter {
    font-size: 16px;
    font-weight: 500;
    padding-left: 20px;
    line-height: 44px;
}

.filters-tags {
    display: flex;
    margin-top: 8px;
}

.filter-tag span {
    display: inline-flex;
    align-items: center;
    background-color: #4e95ff4b;
    /*padding: var(--spacing-smaller) var(--spacing-small);*/
    padding-left: 9px;
    margin-right: 5px;
    border-radius: var(--border-radius);

    font-size: 14px;
    font-weight: 500;
    height: 24px;
}

.filter-tag .removeFilter {
    content: url('data:image/svg+xml,<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_1123_5321" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="12" height="12"><rect width="12" height="12" fill="%23D9D9D9"/></mask><g mask="url(%23mask0_1123_5321)"><path d="M3.2 9.5L2.5 8.8L5.3 6L2.5 3.2L3.2 2.5L6 5.3L8.8 2.5L9.5 3.2L6.7 6L9.5 8.8L8.8 9.5L6 6.7L3.2 9.5Z" fill="%2398A2B3"/></g></svg>');
    width: 16px;
    height: 16px;
    margin-left: 3px;
    margin-right: 4px;
}

/* MARK: DYNAMIC FORM */

.DynamicForm {

    padding-right: 8px;
}

.DynamicForm .groupHeader {
    display: inline-block;
    font-size: 16px;
    font-weight: 500;
    line-height: 32px;
    text-align: left;
    padding: 15px 0 5px 0;
}

.DynamicFormItemGroup {
    margin-bottom: 10px;

    background: #fff;
    /*border-radius: 8px;
    box-shadow: 0 4px 4px 1px rgba(0, 0, 0, 0.12);
    transition: box-shadow 0.2s ease, transform 0.2s ease;*/
}

.DynamicForm>.DynamicFormItemGroup {
    /* box-shadow:
                0 10px 24px rgba(0, 0, 0, 0.16); */
    padding: 10px;
}

.DynamicForm .DynamicFormItemGroup .DynamicFormItemGroup {
    /* border: 1px solid black; */
    padding: 10px;
}


.DynamicForm .comp_text-input {
    display: flex;
    align-items: center;
    position: relative;
}

.DynamicForm .comp_text-input input {
    width: 100%;
}


.DynamicForm .dynamic-field {
    display: flex;
    align-items: center;
    position: relative;
    gap: 12px;
    margin-bottom: 2px;
}

.DynamicForm .dynamic-field .field-actions {
    position: absolute;
    right: 0;
    top: 35%;
    transform: translate(100%, -50%);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.DynamicForm .dynamic-field> :not(.field-actions) {
    flex: 1;
}

.DynamicForm .field-actions button {
    width: fit-content;
    height: 38px;
    border-radius: 6px;
    font-weight: 600;
    line-height: 40px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    padding: 1px 18px;
    display: flex;
    align-items: center;
}


.DynamicForm .field-actions .removeField {
    background: #65727e;
    color: #fff;
    position: absolute;
    margin-top: 24px;
    margin-left: 8px;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' shape-rendering='crispEdges'><path fill='%23fff' d='M5 11a1 1 0 0 0 0 2h14a1 1 0 0 0 0-2z'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
}

.DynamicForm .field-actions {
    display: flex;
    gap: 6px;
    align-items: flex-start;
}

.DynamicForm .field-actions .addField+.addField {
    margin-left: 6px;
}

.DynamicForm .field-actions .addField {
    background: var(--btnprimaryback);
    color: #fff;
    width: auto;
    align-self: flex-start;
    margin-left: 55px;
    margin-bottom: 5px;
}

.DynamicForm .field-actions .addField:hover {
    background-color: var(--btnprimarybackhover);
    color: rgba(255, 255, 255, 1);
}

.DynamicForm .field-actions .removeField:hover {
    background-color: #8a96a3;
    color: rgba(255, 255, 255, 1);
}

.DynamicForm .field-actions .addField a {
    width: 100%;
    text-decoration: none;
    color: rgba(255, 255, 255, 1);
}

.DynamicForm .select-boxes {
    display: flex;
    gap: 8px;
}

.DynamicForm .select-box {
    border: 1px solid #ccc;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
}

.DynamicForm .select-box input {
    display: none;
}

.DynamicForm .select-box input:checked+span {
    font-weight: 600;
}

.DynamicForm .select-box:has(input:checked) {
    background: var(--btnprimaryback);
    color: #fff;
    border-color: var(--btnprimaryback);
}

.DynamicForm .select-box span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.DynamicForm .dynamic-field .text-field {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2px 15px;
    border: 1px solid rgba(229, 229, 229, 1);
    border-radius: 4px;
    background: rgba(242, 242, 242, 1);
    margin: 10px;
    height: auto;
    min-height: 60px;
    min-width: 0;
}

.DynamicForm .dynamic-field .text-field label {
    margin: 0;
    height: 16px;
    line-height: 16px;
    font-weight: 400;
    font-size: 12px;
    width: 100%;
    color: rgba(106, 106, 106, 1);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.DynamicForm .dynamic-field .text-field span {
    display: block;
    margin-top: 4px;
    line-height: 24px;
    font-weight: 500;
    font-size: 15px;
    width: 100%;
    border: 0;
    color: rgba(102, 112, 133, 1);
}

.DynamicForm .dynamic-field .text-field-list {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 18px;
}

.DynamicForm .dynamic-field .text-field-list label {
    margin: 0;
    min-height: 16px;
    line-height: 16px;
    font-weight: 400;
    font-size: 12px;
    width: 100%;
    color: rgb(157, 184, 235);

    flex: 0 0 45%;
    max-width: 45%;
    color: rgba(106, 106, 106, 1);
    overflow: hidden;
    text-overflow: ellipsis;
    /*white-space: nowrap;*/
    padding: 4px 0 8px 0;
}

.DynamicForm .dynamic-field .text-field-list span {
    display: block;
    margin: 0;
    line-height: 24px;
    font-weight: 400;
    width: 100%;
    border: 0;
    color: rgba(26, 26, 26, 1);
    flex: 1 0 55%;
    max-width: 45%;
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    height: auto;
    text-align: justify;
    padding: 4px 0 8px 0;
    min-height: 36px;
}

.DynamicForm .dynamic-field .comp_select {
    /* border: 2px solid #11999e3b; */
    box-shadow: 0 2px 8px #11999e3b;
}

.DynamicForm .dynamic-field.required .comp_select>label {
    color: #ff000066;
    border-radius: 8px;
    padding: 4px;

}

.DynamicForm .dynamic-field .editfield {
    position: absolute;
    top: 12px;
    right: 6px;

    width: 32px;
    height: 32px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'><path fill='%23555' d='M535.6 85.7C513.7 63.8 478.3 63.8 456.4 85.7L432 110.1L529.9 208L554.3 183.6C576.2 161.7 576.2 126.3 554.3 104.4L535.6 85.7zM236.4 305.7C230.3 311.8 225.6 319.3 222.9 327.6L193.3 416.4C190.4 425 192.7 434.5 199.1 441C205.5 447.5 215 449.7 223.7 446.8L312.5 417.2C320.7 414.5 328.2 409.8 334.4 403.7L496 241.9L398.1 144L236.4 305.7zM160 128C107 128 64 171 64 224L64 480C64 533 107 576 160 576L416 576C469 576 512 533 512 480L512 384C512 366.3 497.7 352 480 352C462.3 352 448 366.3 448 384L448 480C448 497.7 433.7 512 416 512L160 512C142.3 512 128 497.7 128 480L128 224C128 206.3 142.3 192 160 192L256 192C273.7 192 288 177.7 288 160C288 142.3 273.7 128 256 128L160 128z'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px;

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

.DynamicForm .dynamic-field:has(.text-field-list) .editfield {
    top: 0px;
}

/* When remove button exists inside the field */
.DynamicForm .dynamic-field:has(.removeField)> :not(.field-actions) {
    max-width: 85%;
}


.DynamicForm .comp_image input[type="file"] {
    padding: 6px 12px;
    background: #0d6efd;
    color: #fff;
    border-radius: 6px;
    border: none;
    cursor: pointer;
}

.DynamicForm .photo-container {
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px 0 5px;
}

.DynamicForm .openImageTab {
    cursor: pointer;
}


.DynamicForm .img-wrapper {
    position: relative;
    display: inline-block;
}

.DynamicForm .modal-body .photo-container .arrowButton {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: none;
    background-color: transparent;
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
}

.DynamicForm .modal-body .photo-container .arrowButton.right {
    right: 16px;
    transform: translate(120%, -50%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23758CA3' fill-rule='evenodd' d='M7.5 5.5a1.3 1.3 0 0 0 0 1.84L12.16 12 7.5 16.66a1.3 1.3 0 1 0 1.84 1.84l5.4-5.4a1.3 1.3 0 0 0 0-1.84l-5.4-5.4a1.3 1.3 0 0 0-1.84 0z'/%3E%3C/svg%3E");
}

.DynamicForm .modal-body .photo-container .arrowButton.left {
    left: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23758CA3' fill-rule='evenodd' d='M7.5 5.5a1.3 1.3 0 0 0 0 1.84L12.16 12 7.5 16.66a1.3 1.3 0 1 0 1.84 1.84l5.4-5.4a1.3 1.3 0 0 0 0-1.84l-5.4-5.4a1.3 1.3 0 0 0-1.84 0z'/%3E%3C/svg%3E");
    transform: translate(-120%, -50%) rotate(180deg);
}

.DynamicForm .modal-body .photo-container .eyeIcon {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.DynamicForm .modal-body .photo-container .eyeIcon:hover {
    transform: scale(1.1);
    /* subtle zoom on hover */
}


/* .modal-body .photo-container .arrowButtonContainer {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23758CA3' fill-rule='evenodd' d='M7.5 5.5a1.3 1.3 0 0 0 0 1.84L12.16 12 7.5 16.66a1.3 1.3 0 1 0 1.84 1.84l5.4-5.4a1.3 1.3 0 0 0 0-1.84l-5.4-5.4a1.3 1.3 0 0 0-1.84 0z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    content: "";
    width: 20px;
    height: 20px;
    margin-left: 10px;
    border: none;
    font-size: 40px;
    color: gray;
    cursor: pointer;
    padding: 0 0px;
    visibility: visible;
} */