$classes_prefix: '.gpls-wmfw';

#{$classes_prefix}-disabled {
    background: #EEE;
}

#{$classes_prefix}-upgrade-notice {
    background: #7e7e7e;
    color: #FFF;
    border: 1px solid #c3c4c7;
     border-left-width: 4px;
    box-shadow: 0 1px 1px rgb(0 0 0 / 4%);
    margin: 5px 0px 15px;
    padding: 1px 12px;
    border-left-color: #dba617;

    a {
        text-decoration: none !important;
    }

    .rainbow {
        text-align: center;
    }
    .rainbow_text_animated {
        background: linear-gradient(to right,#e0a8fd,#10ff00,#0f0,#f39,#eddf35);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        animation: rainbow_animation 6s ease-in-out infinite;
        background-size: 400% 100%;
        font-size: 1.3em;
    }

    @keyframes rainbow_animation {
        0%,100% {
            background-position: 0 0;
        }

        50% {
            background-position: 100% 0;
        }
    }

}

// Watermark Specs metabox.
.watermarks-list-accordion {

    .form-check-input:checked {
        background-image: none !important;

        &::before {
            content: none !important;
        }
    }

    // glow class.
    #{$classes_prefix}-new-keyword {
        text-align: center;
        color: #ff2828;
        padding: 5px;
        background: #e1ff3b;
        font-size: 15px;
        border-radius: 11px;
        font-weight: bold;
    }

    .accordion-item {
        height: auto !important;
    }

    .ui-accordion-header .accordion-button{
        background-color: #f6f6f6;
        font-size: 16px;
        font-weight: bolder;
    }

    .ui-accordion-header-active .accordion-button{
        background-color: #4391ff;
        color: #FFF;
        font-size: 16px;
        font-weight: bolder;
    }

    .watermark-specs {
        .edit-row {
            border-bottom: 1px solid #EEE;
            padding-bottom: 23px;
        }

        .position-box-wrapper {

            &.position-box-repeat-axis-x {
                width: 45px;

                .edit-position-repeat-axis-x {
                    margin: 0px !important;
                    padding: 0px !important;
                }
                .edit-position-repeat-axis-y {
                    margin: 0px !important;
                    padding: 0px !important;
                }
            }

            .position-box {
                border: 1px solid #000;
                height: 50px;
            }
        }

        .form-check {
<<<<<<< HEAD
            .edit-position-type {
                margin-top: 3px;
            }

            label {
                padding-top: 5px;
            }
=======

>>>>>>> pro
        }
    }
}

// Create Watermarks Template.
.watermark-template-creator-wrapper {
    .img-media-icon-box {
        max-width: 750px !important;
    }

    .img-preview {

        .spinner {
            float: none !important;
        }
    }

    .img-save {
        .spinner {
            float: none !important;
        }
    }

    // Image Watermark //
    .create-watermark-template-container {

        #insert-media-button {
            display: block;
            clear: both;
        }

        .spinner {
            float: none !important;
        }



        .watermark-selected-wrapper {
            display: table;
            text-align: center;
            width: auto;
            border: 5px dashed grey;
            min-height: 200px;
            min-width: 200px;
            overflow: hidden;

            .watermark-item {
                display: table-cell;
                vertical-align: middle;
                height: auto;
                width: auto;
                float: none;
                float: none;
                margin-left: 0px;
                margin-right: 0px;
            }
        }

        .edits {
            position: fixed;
            top: 20%;
            right: 100px;
            cursor: auto;
            background: #557d74;
            color: #FFF;
            font-size: 0.8em;
            padding: 11px 14px;
            z-index: 1000000;

            .form-group {
                output {
                    vertical-align: super;
                }
            }
            .edits-close {
                position: absolute;
                cursor: pointer;
                top: 5px;
                right: 5px;
            }
        }

        .preview-selected-wrapper {
            width: 100%;
            border: 5px dashed grey;
            min-height: 400px;
            // min-width: 800px;
            position: relative;

            .preview-selected-item {
                position: relative;
                height: auto;
                width: auto;
                float: none;
                float: none;
                margin: 0px;

                .selected-preview-container {
                    margin: 20px;

                    .selected-preview {
                        max-width: 100%;
                    }

                    .preview-overlayer {
                        position: absolute;
                        left: 50%;
                        transform: translateX(-50%);
                        top: 0;
                        bottom: 0;
                        z-index: 2;
                    }

                    .repeated-clones-wrapper {
                        width: 100%;
                        height: 100%;
                        left: 0;
                        top: 0;
                        overflow: hidden;
                        background: transparent;
                        z-index: 0;
                    }

                    .watermark-placeholder {
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        width: 300px;
                        height: 300px;
                        z-index: 2;
                        background: transparent;
                        transform-origin: 0px 0px;

                        &.watermark-placeholder-image {
                            width: auto !important;
                            height: auto !important;
                            background: transparent;
                            cursor: auto;

                            .img-placeholder {
                                background: transparent;
                                display: block;
                                margin: 0px;
                                padding: 0px;

                                img {
                                    display: block;
                                    margin: 0px;
                                    padding: 0px;
                                    background: transparent;
                                }
                            }
                        }

                        &.watermark-placeholder-text {
                            width: auto !important;
                            height: auto !important;
                            // transform-origin: top left;

                            .watermark-text-textarea {
                                padding: 0px !important;
                                background: #EEE;
                                text-align: left;
                                cursor: auto;
                                font-size: 16px;
                                white-space: nowrap;
                            }
                        }

                        .watermark-placeholder-handle {
                            z-index: 3;
                            cursor: move;
                        }

                        .watermark-placeholder-rotate-handle {
                            z-index: 3;
                            cursor: pointer;
                        }


                        .wrapper {
                            width: 100%;
                            height: 100%;
                        }

                        .actions {
                            width: 115px;
                            position: absolute;
                            top: -20px;
                            right: 0px;
                            background: #FFF;
                            padding: 0px 8px;
                            z-index: 5;
                            cursor: auto;

                            .action {
                                font-size: 19px;
                                cursor: pointer;
                            }

                            .action-move {
                                cursor: move;
                            }

                            .action-remove {
                                color: #F00;
                            }
                        }

                    }
                }


            }

        }

        .preview-result {
            img {
                max-width: 100%;
            }
        }
    }
}

// Auto Apply Watermark Template Metabox.
.watermark-template-auto-apply-wrapper {

    .rule-group-row {
        .column-name {
            color: #416dce !important;
            font-weight: 700;
            font-style: normal;
        }
        .select2-selection__rendered{
            color: #ff7600f7 !important;
            font-weight: bolder;

            .select2-selection__placeholder {
                font-weight: normal;
            }
        }

        .actions {
            position: absolute;
            top: 50%;
            transform: translate( 0, -50% );
            right: -30px;

            .remove-group-rule {
                cursor: pointer;
                font-size: 1.8em;

                &:hover {
                    &::before {
                        background: #F00;
                        border-radius: 100%;
                        color: #FFF;
                    }
                }
            }
        }
    }

    .form-check {
        input {
            margin-top: 3px;
        }
    }
}

// Apply Watermarks Template Section.
.apply-watermarks-template-settings-wrapper {
    .form-check-input {
        margin-top: 0.25em !important;
    }
    .form-check-input:checked {
        background: #0d6efd !important;
        margin-top: 0.25em !important;
    }

    .apply-watermarks-image-sizes-option {
        margin-top: 2px !important;
    }

    .img-item {
        height: 150px;
        width: 150px;
        margin: 20px 10px 60px 10px;
        float: left;

        .actions {
            width: 112px;
            display: block;
            clear: both;
            overflow: hidden;
            margin: 0px;

            .action {
                float: left;
                border: 1px solid #e6e6e6;
                margin: 0px;
                padding: 5px;
                font-size: 1.2em;

                &.frame-remove {
                    cursor: pointer;
                }
            }
        }

        img {
            width: 100%;
            height: 100%;
            border: 1px solid #e6e6e6;
            padding: 5px;
        }
    }

    .cpt-name-row  {
        .column-name {
            color: #416dce !important;
            font-weight: 700;
            font-style: normal;
        }
        .select2-selection__rendered{
            color: #ff7600f7 !important;
            font-weight: bolder;

            .select2-selection__placeholder {
                font-weight: normal;
            }
        }
    }
}

.main-loader {
    .wrapper {
        top: 125px;z-index:1000;
    }

    .overlay {
        opacity:0.7;background:#FFF;z-index:100;
    }

    .loader-text {
        position: fixed;
        left: 50%;
        top: 38%;
        transform: translate(-50%, -50%);
        color: #000;
    }

    .loader-small-text {
        position: fixed;
        left: 50%;
        top: 44%;
        transform: translate(-50%, -50%);
        color: #000;
    }

    .loader-icon {
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .loader-progress-num {
        position: fixed;
        color: #000;
        left: 50%;
        top: 60%;
        transform: translate(-50%, -50%);
    }

    .loader-progress {
        position: fixed;
        left: 50%;
        top: 65%;
        transform: translate(-50%, -50%);
    }
}

.gpls-all-posts-list-wrapper, .selected-images-watermarks-template-modal {
    .column-cb {
        width: 2.2em;
        padding: 11px 0 0 3px;
        padding-top: 4px;
        vertical-align: middle;
    }

    .paging-input {
        display: inline-block;
        padding-top: 7px;
    }
}


#{$classes_prefix}-watermarks-options {

    .loading {
        z-index:20;
        opacity: 0.8;
    }

    .loading-icon {
        left: 50%;
        top: 50%;
        transform: translate( -50%, -50% );
    }
}

#{$classes_prefix}-msgs-toast {
    top: 50px;
}

.loader {
    top: 125px;z-index:1000;

    .overlay {
        opacity:0.7;background:#FFF;z-index:100;
    }

    .wrapper {
        left: 50%;
        top: 50%;
        transform: translate( -50%, -50% );
    }
}

.specific-posts-modal, .selected-images-watermarks-template-modal {

    top: 45px;
    z-index: 10000;

    .modal-dialog {
        max-width: 1400px;
    }

    .loader {
        top: 0px;
    }

    .close-modal-btn {
        padding: 5px 8px;
    }
}
