@import "spark.css";
#custom-field-popup {
    position: fixed; /* Fixed ensures it moves with the viewport, not the document */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    display: none; /* Hidden until opened */
    width: 600px;  /* Adjust width as needed */
    background-color: white;
    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 20px;
}


.custom-field-popup-content {
    position: relative;
}

/* Close Button */
#close-custom-field-popup {
    cursor: pointer;
    font-size: 24px;
}
.close_n_drag{
    display: flex;
    justify-content: right;
}

/* Drag Icon */
.drag-handle {
    cursor: grab;
    font-size: 18px;
    padding: 2px 5px;
    border-radius: 3px;
}
.drag-handle:active {
    cursor: grabbing;
}

/* Tabs */
.custom-tabs {
    display: flex;
    border-bottom: 1px solid #ddd;
    margin-bottom: 10px;
}

.custom-tab {
    padding: 8px 15px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    cursor: pointer;
    transition: 0.2s;
}

.custom-tab.active {
    background: #fff;
    border-bottom: 2px solid #4f32e0;
}

.custom-tab-content {
    display: none;
}

.custom-tab-content.active {
    display: block;
}

.custom-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.custom-toolbar-btn,.custom-toobar-option, .custom-toolbar-btn1,.custom-toobar-option1 {
    padding: 5px 10px;
    font-size: 12px;
    background: #f1f1f1;
    border: 1px solid #ddd;
    cursor: pointer;
    transition: 0.2s;
}

.custom-toolbar-btn:hover, .custom-toobar-option:hover, .custom-toolbar-btn1:hover, .custom-toobar-option1:hover {
    background: #ddd;
}

.custom-editor {
    margin-top: 10px;
}


.custom-field-popup  textarea, .custom-editor  textarea {
    width: 100%;
    height: 200px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    padding: 10px;
    outline: none;
    resize: none;
    font-family: monospace;
}

.drag-handle:active {
    cursor: grabbing;
}

.acf-location-container {
    background: #f6f7f7;
    border: 1px solid #dcdcde;
    padding: 15px;
    margin-top: 10px;
    border-radius: 5px;
}

.acf-location-container label {
    font-weight: bold;
    display: block;
    margin-bottom: 10px;
}

.acf-location-row {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

.acf-location-row select {
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 14px;
    width: 200px;
}

.acf-add-rule {
    background: #4f32e0;
    color: white;
    border: none;
    padding: 5px 10px;
    font-size: 14px;
    border-radius: 3px;
    cursor: pointer;
}

.acf-add-rule:hover {
    background: #4f32e0;
}


.tab-wrapper {
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 5px;
}

.tab-wrapper label {
    display: block;
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 16px;
}

.tab-wrapper button {
    margin-right: 10px;
    margin-bottom: 10px;
    padding: 8px 15px;
    border: none;
    background-color: #4f32e0;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
}

.tab-wrapper button:hover {
    background-color: #4f32e0;
}
.action__list li{
    list-style: inside;
}
.action__list li span:hover{
    color: #4f32e0;
    cursor:pointer;
}
.action__setting{
    display:none;
    margin-left: 16px;
}
.action__setting input[type="text"]:focus {
    box-shadow: unset;
    outline: unset;
}
.action__setting input[type="text"] {
    border: unset;
    border-bottom: 1px solid #000;
    border-radius: unset;
}
.action__setting button{
    border:unset;
    border-radius:50%;
    padding:2px;
}

/* Alert container styling */
.custom-alert {
    /*display: none !important;*/
    position: fixed;
    top: 20px;
    right: -400px; /* Start off-screen to the right */
    min-width: 300px;
    padding: 15px 20px;
    border-radius: 5px;
    color: #fff;
    font-size: 16px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    transition: right 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

.custom-alert.success {
    background-color: #4CAF50; /* Green for success */
}

.custom-alert.danger {
    background-color: #F44336; /* Red for danger */
}
.d-flex{
    display:flex;
}
.d-full{
    width:100%;
}

ul.task-list li{
    position:relative;
}



span.open__child::after {
    content: '';
    top: 4px;
    right: 0;
    display: inline-block;
    position: absolute;
    width: 12px;
    height: 12px;
    background-image: url('../../admin/image/down.svg');
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 5px;
    transition: transform 0.3s ease;
}

ul.task-list li.active .open__child::after {
    transform: rotate(180deg);
}
.btn__status{
    display: inline-block;
    margin-top: 2px;
}
.change_setting{
    margin-left:10px;
}
.action__setting label{
    display: block;
    margin-top: 6px;
}
.custom-field-popup .open__child {
    position:absolute;
}
.custom-field-popup span.open__child::after {
    content: '';
    top: 4px;
    right: -20px;
}
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    15% { transform: translateY(-12px); }
    30% { transform: translateY(6px); }
    45% { transform: translateY(-8px); }
    60% { transform: translateY(4px); }
    75% { transform: translateY(-5px); }
    90% { transform: translateY(2px); }
}

.bounce {
    animation: bounce 3s ease-in-out;
}
.alert__active{
    background: rgba(255, 0, 0, 0.49);
}
.action__setting textarea{
    width:100%;
}
.action__setting .text-align-right{
    text-align: right;
}

/* line 210 */