/*PALETA DE COLORES MOVISTAR*/
.color0,.m_white { background-color:white; }
.color1,.m_pink { background-color:#E63780; }
.color2,.m_orange { background-color:#01ACE2; }
.color3,.m_red { background-color:#EC624B; }
.color4,.m_green { background-color:#55BA00; }
.color5,.m_darkGreen { background-color:#3B7420; }
.color6,.m_lightBlue { background-color:#019DF4; }
.color7,.m_darkBlue {background-color:#0C283A; }
.color8,.m_gray { background-color:#63666d; }



@font-face {
    font-family: 'Telefonica';
    src: /*url('/myfont.woff') format('woff'),*/ /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    url('/css/Telefonica-Regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}
* { box-sizing:border-box; font-family: Telefonica/*, Calibri, Trebuchet, GillSans, sans-serif*/; }
.editor, .editor * { font-family:Monaco,Menlo,Ubuntu Mono,Consolas,source-code-pro,monospace !important; }
html,body { height:100%;width:100%;padding:0;margin:0; }
html,body { overscroll-behavior-x:none; }
* { overflow-anchor:none; }
*::-webkit-scrollbar { width: .5em; height:.5em; }
*::-webkit-scrollbar-thumb { background-color: RGBA(200,200,200,.9); border:1px solid gray; border-radius:.5em; }  
:root { --vScrollThumbWidth: 40px; }
.vScrollbar { height:.5em; background:transparent; border:none; -webkit-appearance: none; }
.vScrollbar::-webkit-slider-runnable-track { height:.5em; cursor:pointer; border: 1px solid gray; border-radius:.5em; background:transparent; }
.vScrollbar::-webkit-slider-thumb { height:.5em; cursor: pointer; border: 1px solid gray; border-radius:.5em; width: var(--vScrollThumbWidth); background:rgb(150,150,150); -webkit-appearance:none; }
@keyframes blink { from { opacity: 1; } 50% { opacity: 0; } 65% { opacity: 1; } to { opacity: 1; } }
.blink { animation: blink 300ms linear infinite; }

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/* ----------- DF Spinner -------------- */
@keyframes beat { from { transform: scale(1) rotate(0deg); } 10% { transform: scale(1) } 20% { transform: scale(1.2) } 40% { transform: scale(1) } 50% { transform: scale(1.2) } 70% { transform: scale(1) } to { transform: scale(1) rotate(360deg) } }
.rotate { animation:beat 1000ms infinite; }


/* ----------- Login -------------- */
.from-top { transform: translateY(-100%); }
.from-bottom { transform: translateY(100%); }
.from-left { transform: translateX(-100%); }
.from-right { transform: translateX(100%); }

.login * { transition:all .3s; }
.login.in.out * { transition:none; }
.login.in .login-band { transform: scaleY(0); }
.login.in .login-box * { transform: translateX(-350px); }
.login.out .login-box { transform: translateX(100vw); }
.login-box *:nth-child(1) { transition-delay: .1s; }
.login-box *:nth-child(2) { transition-delay: .2s; }
.login-box *:nth-child(3) { transition-delay: .3s; }
.login-box *:nth-child(4) { transition-delay: .5s; }

.login-box input { border:0; padding:5px;margin:3px;}




/* ----------- Toast / Alert -------------- */
#toasts {
    position: fixed;
    z-index: 50;
    top: 0;
    right: 0;
    min-width: 30%;
    max-width: 100%;
    max-height: 100%;
    overflow: auto;
}
#toasts .toast {
    margin: 10px;
    padding: 10px;
    color: white;
    text-align: center;
    background-color: rgba(100,100,100,.9);
    border-radius: 5px;
    box-shadow: 0px 0px 5px 3px rgba(100,100,100,.5);
    transform-origin:90% 20%;
    transform: scale(0);
    opacity: 0;
    transition: transform 250ms ease, opacity 150ms ease;
    --clip-path: polygon(0% 0%, calc(100% - 5px) 0%, calc(100% - 5px) calc(50% - 3px), 100% 50%, calc(100% - 5px) calc(50% + 3px), calc(100% - 5px) 100%, 0% 100%);
    --clip-path jode con border-radius y box-shadow
}
#toasts .toast:hover::after {
    content: "(click para cerrar)";
    display: block;
    font-size:x-small;
    margin:.5em;
    
}



/* ----------- Modal -------------- */
.df-modal-back { position:fixed;top:0;bottom:0;left:0;right:0;background:rgba(0, 0, 0, 0.5);z-Index:50;padding-top:50px;overflow:auto;max-height:0;visibility:hidden; }
.df-modal { position:relative;background:white;font-family:Verdana;-font-size:12px;max-width:700px;margin:0 auto 150px auto;padding:1.5em;border-radius:5px;box-shadow:0px 0px 20px 10px rgba(0, 0, 0, 0.25);transition:all .2s;transform:scale(.1);opacity:0.1 }
.df-modal-back.show { max-height:unset;visibility:visible; }
.df-modal-back.show .df-modal { transform:scale(1); opacity:1 }
.df-modal .header { padding:.5em; text-align:right; line-height:1.5em; background: #83b1c7; color: white; border-radius: 4px; }
.df-modal div { margin:.5em; }
.df-modal input, .df-modal select, .df-modal textarea { padding:.3em;border:1px solid lightblue; border-radius:4px; }
.df-modal :focus { outline:none; box-shadow: 0 0 3px 1px cornflowerblue; transition:box-shadow .1s; }
.df-modal input[type=number] { text-align:right; }
.df-modal button { background: #83b1c7; color: white; padding:.7em; margin-right:1em; border:none; border-radius: 4px; min-width:15em; cursor:pointer; }
.df-modal button:hover, .df-modal button:focus { background: #039be5; }
.df-modal button:active { background: #99d0e9; }
.df-modal button.red { background: #d11a2a; color: white; padding:.7em; margin-right:1em; border:none; border-radius: 4px; min-width:15em; cursor:pointer; }
.df-modal button.red:hover, .df-modal button.red:focus { background: #e91a2a; }
.df-modal button.red:active { background: #ff1a2a; }
#d11a2a
.working:after { content:"..." }            




/* ----------- .SQL -------------- */
.main { display:flex; justify-content:flex-start; flex-flow:column nowrap; align-items:flex-start; }
.params { flex:0 0 !important; margin:2px; display:flex; align-items:flex-start; justify-content:flex-start; flex-wrap:wrap; }
.params>* { margin:1px; margin-left:.5em; }
.params .param { flex:1 1; padding:.2em; background:#2c7c8f ;lightgray; color:#eee; border-radius:3px; display:flex; align-items:center; max-width:calc(100vw - 15px); }
.params .param span { white-space:nowrap; }
.params > .param > :last-child { margin-left:.5em; flex:1 1; max-height:2em/*resuelve la variada altura de los inputs*/; }
.params > .param > input:last-child { padding:.4em; border-radius:4px; border:1px solid #aaa; }
.runQuery { font-size:1.2em; padding:.2em; border-radius:4px; cursor:pointer; background-color:#55BA00; border:1px solid green; color:white; }
.runQuery:focus { -outline:0; }
.runQuery.FAB { position:fixed; top:.5em; right:.5em; z-index:50; border-radius:100%; padding:.5em; box-shadow:-1px 1px 4px 1px black; }
.runQuery.FAB span { display:none; }
.runQuery:not(.running) .busy { display:none }
.runQuery.running .idle { display:none }
.content { padding:.2em; padding-left:.5em; flex:1 1; margin-bottom:10vh; }
.theContent { position:relative; padding:.5em; background:rgba(255,255,255,.7); border-radius:4px; box-shadow: 0 2px 5px 2px rgba(0,0,0,.5); margin-bottom:1em; margin-right:2.5em; }
x.main div { margin:5px; padding:1em; flex:1 1 250px; background:white; border-radius:4px; box-shadow: 0 2px 5px 2px rgba(0,0,0,.5); transition:all .1s; }
x.main div:focus-within, x.main div:hover { box-shadow: 0 2px 10px 2px rgba(0,0,0,.5); transform:scale(1.03); }

@keyframes hue { from { filter: hue-rotate(0); } 10% { filter: hue-rotate(-300deg); } 20% { filter: hue-rotate(0); } }
.newTag::after   { content:"new!"; font-size:.7em; color:white; background-color:red; padding:2px; border-radius:4px; display: inline-block; line-height: 1em; margin-left: 0.3em; vertical-align:20%; animation: hue 3000ms linear infinite; }
.nuevoTag::after { content:"nuevo!"; font-size:.7em; color:white; background-color:red; padding:2px; border-radius:4px; display: inline-block; line-height: 1em; margin-left: 0.3em; vertical-align:20%; animation: hue 3000ms linear infinite; }
.dataTag::after { content:attr(data-tag); font-size:.7em; color:white; background-color:red; padding:2px; border-radius:4px; display: inline-block; line-height: 1em; margin-left: 0.3em; vertical-align:20%; animation: hue 3000ms linear infinite; }

.resultPanel.vTablePanel:not(.unlimited) { max-width:calc(100vw - 3.7em); -position:sticky; -left:0; }
.resultPanel:not(.unlimited) .vTableWrapper { overflow-x:auto; max-width:100%; } /*de otra foma rompe los stickyheaders*/
.resultPanel:not(.unlimited) .vTable2 { overflow:auto; max-width:100%; } /*de otra foma rompe los stickyheaders*/
.resultPanel:not(.unlimited) .vTable2::-webkit-scrollbar { width:.8em; }
.resultPanel:not(.unlimited) .vTable2::-webkit-scrollbar-thumb { min-height:2em; }
.resultPanel:not(.unlimited) .vTable2 .scrollTip { position:absolute; top:30px; right:3px; border-radius:3px; padding:.2em .5em; background-color:#558; color:#eee; transform-origin:100%; 50%; transform:scale(0); transition: transform .2s ease .6s; }
.resultPanel:not(.unlimited) .vTable2 .scrollTip.showing { transition:none !important; transform:scale(1) !important; }
.resultPanel:not(.unlimited) .vTable2 > .resultsGrid > tbody > tr > td { padding:.3em; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; max-width:250px; }
.resultPanel.unlimited .vTable2 { max-height:unset !important; } /*paraque no joda el recalc por rowHeight cuando no va a haber scroll*/
.resultPanel.unlimited .vTable2 .scrollHolder { display:none; } /*paraque no joda el recalc por rowHeight cuando no va a haber scroll*/
.resultPanel.unlimited .vTable2 .scrollTip { display:none; } /*paraque no joda el recalc por rowHeight cuando no va a haber scroll*/
.resultPanel .vTable2 tr > [data-field="_class"] { display:none; }
.textHeavyShadow { text-shadow:0px 0px 5px #fff,0px 0px 5px #fff,0px 0px 5px #fff,0px 0px 5px #fff,0px 0px 5px #fff,0px 0px 5px #fff,0px 0px 5px #fff,0px 0px 5px #fff; }
.resultsGrid { background-color:rgba(255,255,255,.5); }
.resultsGrid th { padding:.2em; position: sticky; top:0px; z-index:10; background-color:#333; color:white; }
.resultsGrid th:first-child { border-radius: 4px 0 0 0; } .resultsGrid th:last-child { border-radius: 0 4px 0 0; }
x.resultsGrid tr:nth-child(odd) { background-color:lavender; }
.resultsGrid tr:nth-child(even) { background-color:white; }
.resultsGrid>tbody>tr>td { padding:.3em; white-space:nowrap; text-overflow:ellipsis; }
.resultsGrid.fixedW>tbody>tr>td { max-width:0; overflow:hidden; }

.migrate-actions { position:fixed; bottom:40%; right:.5em; z-index:50; }
--.migrate-actions > div { --height:36px; --width:36px; }
.migrate-actions .init { transform: scale(0); }
.main .actions { position:fixed; bottom:.5em; right:.5em; z-index:50; }
--.main .actions > *, --.migrate-actions > * { height:36px; width:36px; max-height:max(2.5vw,4vh); max-width:max(2.5vw,4vh); container-type:size; --font-size:1cqh;--1em; border-radius:100%; color:black; padding:.5em; box-shadow: -1px 1px 4px 1px; rgba(0,0,0,.7); cursor:pointer; text-indent:0; margin-top:.5em; text-align:center; transform: scale(1); transition:transform .3s cubic-bezier(.8,2.5,.5,.5); }
.main .actions > *, .migrate-actions > * { 
    display: flex; align-items: center; justify-content: center; margin-top:15%;
    height:36px; width:36px; max-height:max(2.5vw,4.5vh); max-width:max(2.5vw,4.5vh); 
    container-type:size; font-size:1cqw; text-indent:0;
    border-radius:100%; color:black; box-shadow: -1px 1px 4px 1px; rgba(0,0,0,.7);
    cursor:pointer; transform: scale(1); transition:transform .3s cubic-bezier(.8,2.5,.5,.5);
}
.main .actions > * > *, .migrate-actions > * > * { font-size:50cqw; }
.main .actions > :hover, .migrate-actions > :hover { transform: scale(1.1); transition: transform .2s cubic-bezier(0,5,.5,.5) !important; }
.main .actions .renderMode:not(.table) .table { display:none; }
.main .actions .renderMode:not(.pivot) .pivot { display:none; }

.main .actions > *::after, .migrate-actions > *::after { content: attr(title); position:absolute; top:10cqw; right:110%; transform: scale(0); transform-origin:105% 50%; font-size:30cqw; color:#555; white-space:nowrap; background:white; border:1px solid lightgray;border-radius:6px;padding:.5em; transition: all .1s linear; }
.main .actions > *:hover::after, .migrate-actions > *:hover::after { transform: scale(1); }

@keyframes jump { 0% {transform: translate3d(0,-50%,0) scale3d(1,1,1);} 40% {transform: translate3d(0,-20%,0) scale3d(.7,1.5,1);} 100% {transform: translate3d(0,50%,0) scale3d(1.5,.7,1);} }	        
.main .actions > div.active i { animation:jump 500ms linear alternate infinite; }



input[type=number] {
    -moz-appearance: textfield;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
       -webkit-appearance: none;
        margin: 0;
}