/* WF Menu Interactivo - Frontend Styles */

#secc-superv {
    left: -110% !important;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 60px;
    overflow: auto;
    z-index: 99999;
    transition: left .4s cubic-bezier(.75, 0, .25, 1);
    background: #fff;
}

/* Button cursor */
#btn-ejec, #btn-superv, span.tx-logo {
    cursor: pointer;
}

/* Active menu sections */
body div#page-container .wf-m-menu, .wf-m-menu {
    left: 0 !important;
}

/* Tabs AJAX */
.wf-tab-content {
    transition: opacity .3s ease;
}
@keyframes wf-tab-pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.08); }
    100% { transform: scale(1); }
}
.wf-tab-pulse {
    animation: wf-tab-pop .25s ease;
}

#secc-driver, #secc-agent, #secc-dis, #secc-superv2, #secc-ejec3 {
    display: none;
}

/* Cursor pointer en botones de pestañas */
#btn-driver, #btn-agent, #btn-dis, #btn-superv2, #btn-ejec3 {
    cursor: pointer;
}

#btn-driver {
    position: relative;
    background-color: transparent !important;
    transition: color .25s ease;
}
#btn-driver::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    width: 3px;
    height: 0%;
    border-radius: 3px;
    background-color: #1a73e8;
    transform: translateY(-50%);
    transition: height .3s cubic-bezier(.4,0,.2,1);
    pointer-events: none;
}
#btn-driver:hover { color: #1a73e8 !important; }
#btn-driver:hover::before { height: 40%; }
#btn-driver.wf-tab-active { color: #3d3d3d; }
#btn-driver.wf-tab-active::before { height: 70%; }
#btn-driver:active { transform: scale(.97); }
#btn-agent {
    position: relative;
    background-color: transparent !important;
    transition: color .25s ease;
}
#btn-agent::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    width: 3px;
    height: 0%;
    border-radius: 3px;
    background-color: #1a73e8;
    transform: translateY(-50%);
    transition: height .3s cubic-bezier(.4,0,.2,1);
    pointer-events: none;
}
#btn-agent:hover { color: #1a73e8 !important; }
#btn-agent:hover::before { height: 40%; }
#btn-agent.wf-tab-active { color: #3d3d3d; }
#btn-agent.wf-tab-active::before { height: 70%; }
#btn-agent:active { transform: scale(.97); }
#btn-dis {
    position: relative;
    background-color: transparent !important;
    transition: color .25s ease;
}
#btn-dis::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    width: 3px;
    height: 0%;
    border-radius: 3px;
    background-color: #1a73e8;
    transform: translateY(-50%);
    transition: height .3s cubic-bezier(.4,0,.2,1);
    pointer-events: none;
}
#btn-dis:hover { color: #1a73e8 !important; }
#btn-dis:hover::before { height: 40%; }
#btn-dis.wf-tab-active { color: #3d3d3d; }
#btn-dis.wf-tab-active::before { height: 70%; }
#btn-dis:active { transform: scale(.97); }
#btn-superv2 {
    position: relative;
    background-color: transparent !important;
    transition: color .25s ease;
}
#btn-superv2::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    width: 3px;
    height: 0%;
    border-radius: 3px;
    background-color: #1a73e8;
    transform: translateY(-50%);
    transition: height .3s cubic-bezier(.4,0,.2,1);
    pointer-events: none;
}
#btn-superv2:hover { color: #1a73e8 !important; }
#btn-superv2:hover::before { height: 40%; }
#btn-superv2.wf-tab-active { color: #3d3d3d; }
#btn-superv2.wf-tab-active::before { height: 70%; }
#btn-superv2:active { transform: scale(.97); }
#btn-ejec3 {
    position: relative;
    background-color: transparent !important;
    transition: color .25s ease;
}
#btn-ejec3::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    width: 3px;
    height: 0%;
    border-radius: 3px;
    background-color: #1a73e8;
    transform: translateY(-50%);
    transition: height .3s cubic-bezier(.4,0,.2,1);
    pointer-events: none;
}
#btn-ejec3:hover { color: #1a73e8 !important; }
#btn-ejec3:hover::before { height: 40%; }
#btn-ejec3.wf-tab-active { color: #3d3d3d; }
#btn-ejec3.wf-tab-active::before { height: 70%; }
#btn-ejec3:active { transform: scale(.97); }

/* WF Popup overrides */
.mfp-wrap, .mfp-wrap .mfp-container {
    z-index: 99999999991 !important;
    padding: 0 !important;
}
body .mfp-wrap button.mfp-close, body .mfp-wrap button.mfp-close:active {
    font-family: 'ETmodules';
    font-size: 38px;
    border-radius: 500px;
    position: fixed !important;
    right: .1em;
    top: .5em;
    max-width: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0 9px 0 !important;
    background: rgba(17, 17, 17, .55) !important;
    color: #fff !important;
    transition: background-color .2s ease;
}
body .mfp-wrap button.mfp-close:hover {
    background: rgba(17, 17, 17, .8) !important;
}
.mfp-close {
    height: 38px !important;
    opacity: 1 !important;
}
.mfp-fade.mfp-bg {
    opacity: 0;
    -webkit-transition: opacity 300ms ease-in-out;
    transition: opacity 300ms ease-in-out;
}
.mfp-fade.mfp-bg.mfp-ready { opacity: 0.8; }
.mfp-fade.mfp-bg.mfp-removing { opacity: 0; }
.mfp-fade.mfp-wrap {
    opacity: 0;
    -webkit-transition: opacity 300ms ease-in-out;
    transition: opacity 300ms ease-in-out;
}
.mfp-fade.mfp-wrap.mfp-ready { opacity: 1; }
.mfp-fade.mfp-wrap.mfp-removing { opacity: 0; }