/*
|--------------------------------------------------------------------------
| Body Lock
|--------------------------------------------------------------------------
*/

body.toptensol-button-popup-body-lock{
    overflow:hidden !important;
}

/*
|--------------------------------------------------------------------------
| Wrapper
|--------------------------------------------------------------------------
*/

.toptensol-button-popup-wrapper{
    position:relative;
    display:inline-block;
    width:auto;
}

/*
|--------------------------------------------------------------------------
| Button
|--------------------------------------------------------------------------
*/

.toptensol-button-popup-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;

    border:none;

    outline:none;

    text-decoration:none;

    transition:all .3s ease;

    padding:14px 28px;

    font-size:16px;

    font-weight:600;

    line-height:1.2;

    border-radius:6px;

    background:#2271b1;

    color:#ffffff;
}

.toptensol-button-popup-btn:hover{
    opacity:.9;
    transform:translateY(-2px);
}

.toptensol-button-popup-btn:focus{
    outline:none;
    box-shadow:none;
}

/*
|--------------------------------------------------------------------------
| Modal Overlay
|--------------------------------------------------------------------------
*/

.toptensol-button-popup-modal{
    position:fixed;

    inset:0;

    display:none;

    align-items:center;

    justify-content:center;

    z-index:999999;

    padding:20px;

    background:rgba(0,0,0,.75);
}

.toptensol-button-popup-modal.toptensol-button-popup-active{
    display:flex;
}

/*
|--------------------------------------------------------------------------
| Popup Content
|--------------------------------------------------------------------------
*/

.toptensol-button-popup-content{ position:relative; width:100%; max-width:95%; height:90vh; background:#ffffff; border-radius:12px; overflow:hidden; display:flex; flex-direction:column; box-shadow: 0 20px 60px rgba(0,0,0,.35); } 
.toptensol-button-popup-form-wrap{ flex:1; overflow-y:auto; overflow-x:hidden; padding:0px; }

/*
|--------------------------------------------------------------------------
| Form Area
|--------------------------------------------------------------------------
*/

.toptensol-button-popup-form-wrap{
    padding:30px 0px;
}

.toptensol-button-popup-form-wrap .wpcf7{
    margin:0;
}

.toptensol-button-popup-form-wrap form{
    margin:0;
}

/*
|--------------------------------------------------------------------------
| Success Message
|--------------------------------------------------------------------------
*/

.toptensol-button-popup-success{

    display:none;

    text-align:center;

    padding:50px 30px;

    cursor:pointer;

    background:#ecfdf3;
}

.toptensol-button-popup-success h3{

    margin:0 0 15px;

    color:#0f7b33;

    font-size:28px;

    font-weight:700;
}

.toptensol-button-popup-success p{

    margin:0;

    color:#333;

    font-size:16px;

    line-height:1.7;
}

/*
|--------------------------------------------------------------------------
| Error Message
|--------------------------------------------------------------------------
*/

.toptensol-button-popup-error{

    display:none;

    text-align:center;

    padding:50px 30px;

    cursor:pointer;

    background:#fff2f2;
}

.toptensol-button-popup-error h3{

    margin:0 0 15px;

    color:#cc1818;

    font-size:28px;

    font-weight:700;
}

.toptensol-button-popup-error p{

    margin:0;

    color:#333;

    font-size:16px;

    line-height:1.7;
}

/*
|--------------------------------------------------------------------------
| Message Hover
|--------------------------------------------------------------------------
*/

.toptensol-button-popup-success:hover,
.toptensol-button-popup-error:hover{
    opacity:.96;
}

/*
|--------------------------------------------------------------------------
| CF7 Styling
|--------------------------------------------------------------------------
*/

.toptensol-button-popup-form-wrap input,
.toptensol-button-popup-form-wrap textarea,
.toptensol-button-popup-form-wrap select{

    width:100%;

    max-width:100%;

    box-sizing:border-box;
}

.toptensol-button-popup-form-wrap textarea{
    min-height:120px;
}

/*
|--------------------------------------------------------------------------
| Submit Button
|--------------------------------------------------------------------------
*/

.toptensol-button-popup-form-wrap input[type="submit"]{

    cursor:pointer;

    border:none;

    background:#2271b1;

    color:#fff;

    padding:14px 30px;

    border-radius:6px;

    transition:.3s;
}

.toptensol-button-popup-form-wrap input[type="submit"]:hover{
    opacity:.9;
}

/* |-------------------------------------------------------------------------- | Close Button |-------------------------------------------------------------------------- */ 

.toptensol-button-popup-close{ position:absolute; top:5px; right:15px; width:40px; height:40px; border:none; border-radius:50%; background:#f3f3f3; color:#222; font-size:28px; line-height:0; cursor:pointer; z-index:999; transition:.3s; } .toptensol-button-popup-close:hover{ background:#e2e2e2; transform:rotate(90deg); }

/*
|--------------------------------------------------------------------------
| Animation
|--------------------------------------------------------------------------
*/

@keyframes toptensol-button-popup-fade-up{

    from{
        opacity:0;
        transform:translateY(20px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width:1024px){

    .toptensol-button-popup-content{
        max-width:95%;
    }

}

/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width:767px){

    .toptensol-button-popup-modal{
        padding:15px;
    }

.toptensol-button-popup-content{ width:100%; max-width:95%; height:90vh; }

    .toptensol-button-popup-form-wrap{
        padding:20px;
    }

    .toptensol-button-popup-success,
    .toptensol-button-popup-error{
        padding:35px 20px;
    }

    .toptensol-button-popup-success h3,
    .toptensol-button-popup-error h3{
        font-size:22px;
    }

    .toptensol-button-popup-success p,
    .toptensol-button-popup-error p{
        font-size:15px;
    }

    .toptensol-button-popup-btn{
        width:100%;
    }

}

/*
|--------------------------------------------------------------------------
| Small Mobile
|--------------------------------------------------------------------------
*/

@media (max-width:480px){

    .toptensol-button-popup-form-wrap{
        padding:15px;
    }

}