// main: style.less, out: ../style.css, compress: false, sourceMap: false


@mobile-width: 640px;

/* Settings Page */
    .wdwa-header{
        display:flex;
        background:#fff;
        margin-left:-20px;
        flex-direction:column;
        padding:20px;
        div {
            display:flex;
            justify-content:center;
            align-items:center;
            img{
                margin:15px;
            }
        }
        @media screen and (max-width: @mobile-width) {
            div {
                flex-direction:column;
            }
        }

        .wdwa-sub-header{
            display:flex;
            flex-direction:column;
            padding:15px;
            line-height:25px;
            p{
                font-size:30px;
                max-width:800px;
            }
        }
    }

    /* top menu bar */
.top-master-action-bar{
    display:flex;
    justify-content:center;
    align-items: center;
    width:100%;
    padding-top:30px;
    .wdwpa-btn{
        padding:20px;
        font-size:30px;
        cursor:pointer;
        color:#777;
        background:#f2f2f2;
        border-radius: 18px;
        margin:10px 5px;
        &:hover{
            color:#333;
            background:#fff;
        }
        &.selected{
            color:#f4f4f4;
            background:#ff4800;
        }
    }
}

/* Funnel Creation Wizard */
.funnel-creation-wizard{
    padding:20px;
    background:#fff;
    margin:20px;
    display:flex;
    flex-direction:column;
    label{
        font-weight:bold;
    }
    .funnel-library-selection{
        background:#ccc;
        min-height:400px;
    }
}

/* main body Area */
.wdwa-body{
    display:flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    line-height:25px;
    width:100%;

    .step-divider{
        padding:20px;
        font-size:25px;
        width:100%;
        max-width:900px;
        h1{
            color:#666;
            line-height:60px;
        }
        span{
            color:rgb(255, 72, 0);
        }
        p{
            font-size:16px;
        }
        pre{
            display:flex;
            align-items:center;
            justify-content: center;
        }
        i.fa-angle-down{
            font-size:75px;
            background:#fff;
            border-radius:15px;
            padding: 10px 30px;
            box-shadow:2px 2px 8px rgba(0,0,0,.1);
        }
    }

    .wdwa-step{
        display:flex;
        background-color:#fff;
        margin:20px;
        width:100%;
        max-width:900px;
        box-shadow:2px 2px 8px rgba(0,0,0,.1);
        @media screen and (max-width: @mobile-width) {
            flex-direction:column;
        }
        &.sg-header{
            height:400px;
            background-size:cover;
            background-position: right center;
            .sg-box{
                background:#222;
                padding:20px;
            }
        }

        div {
            
            display:flex;
            flex-direction:column;
            padding:40px;
            i.fa-check { color:#393 } 
            &.s-title{
                width:300px;
                @media screen and (max-width: @mobile-width) {
                    width:100%;
                    align-items: center;
                    padding:10px;
                }
                background-color:rgb(106, 123, 138);
                h1{ color:#f6f6f6; }
                img{ max-width:300px; }
            }
            .actions{
                display:flex;
                justify-content: flex-end;
                a{
                    padding:20px;
                    text-decoration: none;
                    font-size:18px;
                    font-weight:bold;
                    text-align:center;
                    &.primary{
                        background:#0AF;
                        color:#fff;
                        &:hover{
                            background:#0CF;
                        }
                    }
                    &.success{
                        background:#393;
                        color:#fff;
                        &:hover{
                            background:#5A5;
                        }
                    }
                    &.default{
                        border:1px solid #ccc; 
                        color:#666;
                        &:hover{
                            color:#0CF;
                        }
                    }
                }   
            }
        }
    }
}

    .standard-relationship-otpions{
        display:flex;
        flex-wrap: wrap;
        .std-opt{
            padding:12px 20px;
            margin:10px 5px;
            border:1px solid #eee;
            background:#FFF;
            border-radius:5px;
            cursor:pointer;
            &:hover{
                border-color:#0CF;
            }
            &.lm-opt-selected{
                background:#39C;
                border-color:#0CF;
                color:#fff;
            }
        }
    }

    iframe.hidden-iframe {
       display:none;
    }

/* overrides */
#toast-container > div {
    opacity: 1 !important;
    box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.1) !important;
  }
  .toast-bottom-right {
    bottom: 60px !important;
  }
  .toast {
    background-color: #fff !important;
    border-left: 6px solid #CCC;
    color: #000 !important;
    font-weight: bold;
    position:relative;
  }
  .toast-close-button{
    color:#999;
  }
  .toast-success {
    background-color: #fff;
    border-left: 6px solid #00CC00;
    &::before{
        color:#00CC00;
        font-family: FontAwesome;
        content: "\f00c";
        position:absolute;
        left:25px;
    }
  }
  .toast-error {
    background-color: #fff;
    border-left: 6px solid #bd362f;
  }
  .toast-info {
    background-color: #fff;
    border-left: 6px solid #2f96b4;
  }
  .toast-warning {
    background-color: #fff;
    border-left: 6px solid #f89406;
  }
  #toast-container > div {
    border-bottom: 2px solid rgba(0, 0, 0, 0.3);
  }

  .elementor-message, .update-nag{
      display:none;
  }
  