.op-fields-wrapper{
    flex: auto;
    @extend %flex;
    margin: 30px 0;
    border-radius: 20px;
    border: 1px solid $theme-border;
    position: relative;
    font-family: $body-font-family;
}
.op-fields-aside{
    flex: none;
    width: 100%;
    max-width: 242px;
    padding-bottom: 52px;
    border-radius: 0 0 0 20px;
    border-right: 1px solid $theme-border;
    background: linear-gradient(0deg, rgba(5, 18, 55, 0.02), rgba(5, 18, 55, 0.02)), #FFFFFF;
}
.op-fields-content{
    flex: auto;
    background-color: $white;
    border-radius: 0 0 20px 0;
    height: 100%;
    &_title{
        display: flex;
        min-height: 64px;
        align-items: center;
        padding: 9px 10px 10px 30px;
        justify-content: space-between;
        border-bottom: 1px solid $theme-border;
        background: linear-gradient(0deg, rgba(5, 18, 55, 0.02), rgba(5, 18, 55, 0.02)), #FFFFFF;
        strong{
            color: $theme_color;
            font: 500 rem(20)/em(32,20) $heading-font-family;
        }
    }
    .tab-content>.active {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
    }
}
.op-listing-fields{
    gap: 10px;
    display: flex;
    align-items: center;
    input{
        height: 38px;
        min-width: 300px;
    }
    .op-select{
        min-width: 200px;
        .select2-container{
            height: 38px;
        }
        .select2-container--default{
            & .select2-selection--single{
                & .select2-selection__rendered{
                line-height: 38px;
                }
            }
        }
    }
}
.op-findbtn{
    flex: none;
    width: 38px;
    height: 38px;
    display: flex;
    color: $white;
    align-items: center;
    border-radius: $radius;
    justify-content: center;
    background: $theme_color;
    i{
        font-size: 18px;
    }
    &:hover{
        color: $white;
    }
}
.op-field-table{
    margin-bottom: 0;
    table-layout: fixed;
    thead {
        tr{
            width: 100%;
            display: flex;
            background: rgba($color: $theme_color, $alpha: 0.02);
            border-bottom: 1px solid $theme-border;
            th {
                border: 0;
                height: 44px;
                width: 100%;
                padding: 12px;
                text-align: left;
                color: $theme_color;
                font: 500 rem(14)/em(20,14) $heading-font-family;
                &:first-child{
                    padding-left: 20px;
                }
            }
        }
        .op-checkbox{
            padding: 0;
            label:before{
                margin: 0;
            }
            label{
                gap: 10px;
                display: flex;
                align-items: center;
            }
        }
    }
    tbody{
        width: 100%;
        tr{
            display: flex;
            @extend %transition;
            &:hover{
                background: rgba(5, 18, 55, 0.01);
            }
            td{
                border: 0;
                width: 100%;
                display: flex;
                padding: 12px;
                text-align: left;
                align-items: center;
                font: 400 rem(14)/em(20,14) $body-font-family;
                color: rgba($color: $theme_color, $alpha: 0.76);
                &:first-child{
                    padding-left: 20px;
                }
            }
            &:nth-child(even){
                background: rgba(5, 18, 55, 0.02);
            }
        }
    }
    .op-checkbox{
        padding-left: 10px;
        label{
            color: $theme_color;
            font: 500 rem(14)/em(20,14) $body-font-family;
            &:before{
                width: 20px;
                height: 20px;
                margin-right: 20px;
            }
        }
        input:checked + label:after{
            top: 3px;
            left: 8px;
            width: 5px;
            height: 11px;
        }
    }
    .op-checkbox.op-checkboxvtwo{
        input:checked + label:after{
            top: 10px;
            left: 6px;
            width: 8px;
            height: 1px;
        }
    }
}
.op-btnwrapper{
    gap: 20px;
    display: flex;
    align-items: center;
    a{
        gap: 6px;
        display: flex;
        align-items: center;
        font: 400 rem(13)/em(20,13) $heading-font-family;
        i{
            font-size: 16px;
        }
    }
}
.op-editclr{
    color: rgba($color: $theme_color, $alpha: 0.76);
    &:hover{
        color: rgba($color: $theme_color, $alpha: 0.76);
    }
}
.op-trashclr{
    color: $error-color;
    &:hover{
        color: $error-color;
    }
}
.op-pagination-wrapper{
    display: flex;
    margin-top: auto;
    padding: 19px 20px; 
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid $theme-border;
    > span{
        font-size: 14px;
        color: $theme_color;
        font: 400 rem(14)/em(20,14) $body-font-family;
    }
}
.op-pagination{
    margin: 0;
    gap: 10px;
    padding: 0;
    display: flex;
    align-items: center;
    li{
        list-style-type: none;
        a,span{
            display: block;
            padding: 5px 15px;
            border-radius: 4px;
            color: $theme_color;
            border: 1px solid $theme-border;
            font: 500 rem(14)/em(20,14) $body-font-family;
            &.active{
                color: $white;
                background-color: $theme-color;
            }
        }
    }
}
.op-inputbtn-wrapper{
    display: flex;
    align-items: center;
    input{
        border-right: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        &:hover,
        &:focus{
            border-color: rgba($color: $theme_color, $alpha: 0.24);
        }
    }
}
.op-inputbtn{
    width: 38px;
    padding: 5px;
    height: 38px;
    display: flex;
    border-left: 0;
    border-radius: 0px 4px 4px 0px;
    border: 1px solid rgba($color: $theme_color, $alpha: 0.24);
    > a{
        width: 32px;
        height: 32px;
        display: flex;
        color: $theme_color;
        align-items: center;
        border-radius: $radius;
        justify-content: center;
        background: rgba($color: $theme_color, $alpha: 0.04);;
    }
}
.cp-values{
    input{
        padding: 0;
        width: 35px;
        height: 20px;
        font-size: 12px;
    }
}
.btn-close{
    opacity: 1;
    color: $white;
    width: initial;
    height: initial;
    padding: 5px 15px;
    background-image: none;
    background-color: $theme-color;
    &:hover{
        opacity: 1;
        color: $white;
        background-color: $theme-color;
    }
}
.colorPicker--preview{
    width: 32px;
    height: auto;
    border-radius: 4px;
}
.op-gradiant-color{
    margin: -5px;
    @extend %flex;
    align-items: center;
    .cp-cont{
        width: 50%;
        padding: 5px;
    }
}
.op-notify{
    &::after{
        content: '';
        width: 5px;
        height: 5px;
        margin-left: auto;
        border-radius: 50%;
        display: inline-block;
        background: $error-color;
    }
}
.op-separator-wrap{
    margin: 0;
    padding: 0;
    li{
        gap: 20px;
        width: 100%;
        display: flex;
        list-style: none;
        align-items: center;
        padding: 29.5px 30px;
        border-bottom: 1px solid rgba(5, 18, 55, 0.08);
        .op-textcontent{
            em,
            span{
                display: block;
            }
            span{
                margin-top: 10px;
            }
        }
    }
    > .op-textcontent{
        padding: 10px;
    }
}
.op-separator-wrap{
    background: rgba(5, 18, 55, 0.02);
}