/*
* XEWC admin CSS
* File Description: The main stylesheet of this plugins for main design part.
*/



/* --------------------------
* Shortcode CSS
* --------------------------- */

.xewc-settings-panel{
    margin-top: 20px;
    padding: 0;
    display: flex;
    .xewc-tabs-content {
        max-height: 700px;
        overflow-y: scroll;
        background-color: #ffffff;
        box-shadow: 0 15px 25px #f0f0f1;
    }
    .xewc-main-setting-table {
        margin: 0;
        th {
            width: 280px;
            padding: 22px 25px;
            vertical-align: middle;
            font-size: 14px;
            box-sizing: border-box;
        }
        td {
            vertical-align: middle;
            font-size: 13px;
            box-sizing: border-box;
            display: inline-block;
            padding: 12px 25px 12px 0;
            .integration-code-row {
                display: block;
                margin-bottom: 10px;
                min-height: 35px;
                span {
                    display: inline-block;
                    width: 100px;
                    font-size: 12px;
                }
                code {
                    font-size: 12px;
                    border-left: 2px solid #4E90E2;
                    padding: 10px;
                }
            }
        }
    }
}

/*
* Extensions List css
*------------------------------ */
.wp-xewc-extensions-list {
    .plugin-card-top{
        min-height: 98px;
        display: grid;
        grid-template-columns: 70px 1fr 40px;
        gap: 20px;

        .plugin-info {
            h3 {
                margin: 0;
                font-size: 22px;
                margin-bottom: 6px;
            }
            p {
                margin: 0;
                font-size: 16px;
            }
        }
    }
    .wp-list-table {
        a{
            color: #fff;
            margin-top: 100px;
            padding: 10px 20px;
            border-radius: 4px;
            text-decoration: none;
            background: #0085ba;
            background-color: #0073aa;
            border-color: #006a95 #00648c #00648c;
            box-shadow: inset 0 -1px 0 #00648c;
            text-shadow: 0 -1px 1px #005d82, 1px 0 1px #005d82, 0 1px 1px #005d82, -1px 0 1px #005d82;
        }
    }
    .btn-switch {
        display: inline-block;
        height: 22px;
        position: relative;
        width: 50px;
        input {
            display:none;
        }
        input:checked + .btn-slider {
            background-color: #66bb6a;
            &:before {
                transform: translateX(26px);
            }
        }
    }
    .btn-slider {
        background-color: #ccc;
        bottom: 0;
        cursor: pointer;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        transition: .4s;
        &:before {
            background-color: #fff;
            bottom: 3px;
            content: "";
            height: 16px;
            left: 4px;
            position: absolute;
            transition: .4s;
            width: 16px;
        }
    }
    .btn-slider.btn-round {
        border-radius: 34px;
        &:before {
            border-radius: 50%;
        }
    }
}