/* =========================================
   TEMA PADRÃO
========================================= */
:root {

    /* ===================================
       PAGEHOME
    =================================== */
    --gap-btn-pagehome: 5px;

    /* ===================================
       SHEET
    =================================== */
    --sheetMsg-top: -50px;
    --sheet-overlayOpacity: rgba(0,0,0,0.25); /* AQUI TEM QUE SER SEM ASPAS */

    /* =======================================================================
       OVERLAY GLOBAL
    ======================================================================= */
    --iframe-background-loader: rgba(238,238,238,0);

    /* =======================================================================
       OVERLAY LOGIN
    ======================================================================= */
    --login-overlayOpacity: rgba(0,0,0,0.25);





    /* ===================================
       Z-INDEX DA APLICAÇÃO
    =================================== */

    /* ===================================
       IFRAME
    =================================== */
    --z-content: 1;
    
    /* ===================================
       UI BASE FIXA 
    =================================== */
    --z-bottom-bar: 9999;
    --z-sidebar: 2001;
    --z-topbar: 2002;
    
    /* ===================================
       OVERLAY GLOBAL
    =================================== */
    --z-overlay: 2000;
    
    /* ===================================
       SHEETS
    =================================== */
    --z-sheet-overlay: 3100;
    --z-sheet-modal: 3200;
    --z-sheet-header: 3210;
    --z-sheet-handle: 3215;

    /* ===================================
       MODAIS
    =================================== */
    --z-modal: 4000;
    
    /* ===================================
       SISTEMA GLOBAL
    =================================== */
    --z-loader: 4500;
    
    /* ===================================
       TOAST
    =================================== */
    --z-global-toast: 5000;






    /* =======================================================================
       HTML / BODY / IFRAME
    ======================================================================= */
    --html-background: #ffffff;
    --body-background: #ffffff;
    --iframe-background: #ffffff;


    /* =========================================
       MENU TOPBAR
    ========================================= */
    --menutopbar-height: 55px;
    --menutopbar-background: rgba(238,238,238,1);

    --btn-menutop-left-image-margin-left: 5px;
    --btn-menutop-left-image-margin-right: 8px;
    --btn-menutop-left-span1-margin-right: 2px;
    --btn-menutop-left-span2-margin-right: -3px;
    
    --menutopbar-left-font-size-span1: 23px;
    --menutopbar-left-font-weight-span1: 700;
    --menutopbar-left-color-span1: #212529;
    --menutopbar-left-opacity-span1-hover: 0.7;
    
    --menutopbar-left-color-span2: #4282c2;
    
    --menutopbar-left-color-span3: #777;
    --menutopbar-left-fontsize-span3: 9px;
    --menutopbar-left-fontweight-span3: 600;
    --menutopbar-left-color-circle-span3: #f2f2f2;
    --menutopbar-left-top-circle-span3: -12px;
    --menutopbar-left-width-circle-span3: 18px;
    --menutopbar-left-height-circle-span3: 18px;

    --menutopbar-left-color-span4: #212529;
    --menutopbar-left-fontsize-span4: 8px;

    --gap-btn-menutop-right: 6px;
    

    /* =========================================
       MENU BOTTOM BAR
    ========================================= */
    --menubottombar-height: 55px;
    --menubottombar-background: rgba(238,238,238,1);

    --gap-btn-menubottom: 0px;


    /* =========================================
       SIDEBAR LEFT - MENUITEM LEFT
    ========================================= */
    --sidebar-left-background: #ffffff;
    --sidebar-left-width: 280px;
    --sidebar-left-widthnegativo: -280px;
    --sidebar-left-scrollbarcolor: rgba(255,255,255,0.25);
    --sidebar-left-scrollbarespessura: 6px;
    --sidebar-left-scrollbartrack: transparent;
    --sidebar-left-scrollbarradius: 10px;
    --sidebar-left-scrollbarthumb: rgba(255,255,255,0.4);

    --menuitem-left-textcolor: #212529;
    --menuitem-left-fontsize: 15px;
    --menuitem-left-hover: #eeeeee;
    --menuitem-left-hover-text: #212529;
    --menuitem-left-lines: rgba(0,0,0,0.1);
    --menuitem-left-padding: 9px 15px;
    --menuitem-left-paddingright: 15px;

    /* =========================================
       SIDEBAR RIGHT - MENUITEM RIGHT
    ========================================= */
    --sidebar-right-background: #ffffff;
    --sidebar-right-width: 280px;
    --sidebar-right-widthnegativo: -280px;
    --sidebar-right-scrollbarcolor: rgba(255,255,255,0.25);
    --sidebar-right-scrollbarespessura: 6px;
    --sidebar-right-scrollbartrack: transparent;
    --sidebar-right-scrollbarradius: 10px;
    --sidebar-right-scrollbarthumb: rgba(255,255,255,0.4);
    
    --menuitem-right-textcolor: #212529;
    --menuitem-right-fontsize: 15px;
    --menuitem-right-hover: #eeeeee;
    --menuitem-right-hover-text: #212529;
    --menuitem-right-lines: rgba(0,0,0,0.1);
    --menuitem-right-padding: 9px 15px;
    --menuitem-right-paddingright: 15px;    

}

[data-theme="grafite-operacional"] {

    /* =========================================
       HTML / BODY / IFRAME
    ========================================= */
    --html-background: #212529;
    --body-background: #212529;
    --iframe-background: #212529;

    /* ===================================
       COR ICONE DOS BOTOES
    =================================== */
    --cor-icon-btn: #212529;

    /* =========================================
       MENU TOPBAR
    ========================================= */
    --menutopbar-background: gray;
    --menutopbar-left-color-span1: #f5f5f5;
    --menutopbar-left-color-span2: skyblue;
    --menutopbar-left-color-span3: #212529;
    --menutopbar-left-color-circle-span3: #f5f5f5;
    --menutopbar-left-color-span4: #212529;

    /* =========================================
       MENU BOTTOM BAR
    ========================================= */
    --menubottombar-background: gray;

    /* =========================================
       SIDEBAR LEFT - MENUITEM LEFT
    ========================================= */
    --sidebar-left-background: #212529;
    --sidebar-left-width: 280px;
    --sidebar-left-widthnegativo: -280px;
    --sidebar-left-scrollbarcolor: rgba(255,255,255,0.25);
    --sidebar-left-scrollbarespessura: 6px;
    --sidebar-left-scrollbartrack: transparent;
    --sidebar-left-scrollbarradius: 10px;
    --sidebar-left-scrollbarthumb: rgba(255,255,255,0.4);

    --menuitem-left-textcolor: #f5f5f5;
    --menuitem-left-fontsize: 15px;
    --menuitem-left-hover: #eeeeee;
    --menuitem-left-hover-text: #212529;
    --menuitem-left-lines: rgba(255,255,255,0.3);
    --menuitem-left-padding: 6px 15px;
    --menuitem-left-paddingright: 15px;

    /* =========================================
       SIDEBAR RIGHT - MENUITEM RIGHT
    ========================================= */
    --sidebar-right-background: #212529;
    --sidebar-right-width: 280px;
    --sidebar-right-widthnegativo: -280px;
    --sidebar-right-scrollbarcolor: rgba(255,255,255,0.25);
    --sidebar-right-scrollbarespessura: 6px;
    --sidebar-right-scrollbartrack: transparent;
    --sidebar-right-scrollbarradius: 10px;
    --sidebar-right-scrollbarthumb: rgba(255,255,255,0.4);
    
    --menuitem-right-textcolor: #f5f5f5;
    --menuitem-right-fontsize: 15px;
    --menuitem-right-hover: #eeeeee;
    --menuitem-right-hover-text: #212529;
    --menuitem-right-lines: rgba(255,255,255,0.08);
    --menuitem-right-padding: 6px 15px;
    --menuitem-right-paddingright: 15px;    

}


[data-theme="verde-operacional"] {

    /* =========================================
       HTML / BODY / IFRAME
    ========================================= */
    --html-background: #212529;
    --body-background: #212529;
    --iframe-background: #212529;

    /* ===================================
       COR ICONE DOS BOTOES
    =================================== */
    --cor-icon-btn: #212529;

    /* =========================================
       MENU TOPBAR
    ========================================= */
    --menutopbar-background: green;
    --menutopbar-left-color-span1: #f5f5f5;
    --menutopbar-left-color-span2: skyblue;
    --menutopbar-left-color-span3: #212529;
    --menutopbar-left-color-circle-span3: #f5f5f5;
    --menutopbar-left-color-span4: #212529;

    /* =========================================
       MENU BOTTOM BAR
    ========================================= */
    --menubottombar-background: green;

    /* =========================================
       SIDEBAR LEFT - MENUITEM LEFT
    ========================================= */
    --sidebar-left-background: #212529;
    --sidebar-left-width: 280px;
    --sidebar-left-widthnegativo: -280px;
    --sidebar-left-scrollbarcolor: rgba(255,255,255,0.25) transparent;
    --sidebar-left-scrollbarespessura: 6px;
    --sidebar-left-scrollbartrack: transparent;
    --sidebar-left-scrollbarradius: 10px;
    --sidebar-left-scrollbarthumb: rgba(255,255,255,0.4);

    --menuitem-left-textcolor: #f5f5f5;
    --menuitem-left-fontsize: 15px;
    --menuitem-left-hover: #eeeeee;
    --menuitem-left-hover-text: #212529;
    --menuitem-left-lines: rgba(255,255,255,0.3);
    --menuitem-left-padding: 6px 15px;
    --menuitem-left-paddingright: 15px;

    /* =========================================
       SIDEBAR RIGHT - MENUITEM RIGHT
    ========================================= */
    --sidebar-right-background: #212529;
    --sidebar-right-width: 280px;
    --sidebar-right-widthnegativo: -280px;
    --sidebar-right-scrollbarcolor: rgba(255,255,255,0.25) transparent;
    --sidebar-right-scrollbarespessura: 6px;
    --sidebar-right-scrollbartrack: transparent;
    --sidebar-right-scrollbarradius: 10px;
    --sidebar-right-scrollbarthumb: rgba(255,255,255,0.4);
    
    --menuitem-right-textcolor: #f5f5f5;
    --menuitem-right-fontsize: 15px;
    --menuitem-right-hover: #eeeeee;
    --menuitem-right-hover-text: #212529;
    --menuitem-right-lines: rgba(255,255,255,0.08);
    --menuitem-right-padding: 6px 15px;
    --menuitem-right-paddingright: 15px;    

}








/* ====================================================================
   BOTÕES LOGIN
==================================================================== */
.btn-login {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: #f5f5f5 !important;
    background: #6c757d !important;
    font-size: 14px !important;
    font-weight: normal !important;
    cursor: pointer;
    transition: all 0.3s ease !important;
}
.btn-login:hover {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: #f5f5f5 !important;
    background: color-mix(in srgb, #6c757d 80%, white 10%) !important;
}
.btn-login:active {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: #f5f5f5;
    background: #6c757d !important;
}
.btn-login:focus,
.btn-login:focus-visible {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}


/* ====================================================================
   BOTÕES ICONES
==================================================================== */
.btn-icon {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: #212529 !important;
    background: transparent !important;
    font-size: 21px !important;
    font-weight: bold !important;
    cursor: pointer;
    transition: all 0.3s ease !important;
}
.btn-icon:hover {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: #4282c2 !important;
    background: transparent !important;
}
.btn-icon:active {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: #f5f5f5 !important;
    background: transparent !important;
}
.btn-icon:focus,
.btn-icon:focus-visible {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}


/* =========================================
   BOTÃO DEFAULT
========================================= */
.btn-default {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: #f5f5f5 !important;
    background: #6c757d !important;
    font-size: 14px !important;
    font-weight: normal !important;
    cursor: pointer;
    transition: all 0.3s ease !important;
}
.btn-default:hover {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: #f5f5f5 !important;
    background: color-mix(in srgb, #6c757d 85%, white 15%) !important;
}
.btn-default:active {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: #f5f5f5;
    background: #6c757d !important;
}
.btn-default:focus,
.btn-default:focus-visible {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}


/* =========================================
   TITULOS e DESCRIÇÕES - BOTÕES PAGEHOME
========================================= */
.pagehome-option-title {
    line-height: 1.10 !important;
}

.pagehome-option-desc {
    font-size: 10px !important;
    font-weight: 600;
    color: #6c757d !important;
    margin-top: 2px !important;

    display: block !important;

    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}


/* =========================================
   TITULOS e DESCRIÇÕES - BOTÕES BOTTOM 
========================================= */
.menu-option-title {
    line-height: 1.10 !important;
}

.menu-option-desc {
    font-size: 10px !important;
    font-weight: 600;
    color: #6c757d !important;
    margin-top: 0px !important;

    display: block !important;

    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}


/* =========================================
   BOTÕES RAPIDAPI/OPENSKY - LOCALIZADOR
========================================= */
.btn-rapidapi-opensky {
    border: none !important;
    border-radius: 20px !important;
    padding: 2px 9px !important;
    outline: none !important;
    box-shadow: none !important;
    color: #333333 !important;
    background: #eeeeee !important;
    font-size: 9px !important;
    font-weight: normal !important;
    cursor: pointer;
    transition: all 0.3s ease !important;
}
.btn-rapidapi-opensky:hover {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: #333333 !important;
    background: color-mix(in srgb, #eeeeee 90%, black 10%) !important;
}
.btn-rapidapi-opensky.active {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: #f5f5f5 !important;
    background: #6c757d !important;
}
.btn-rapidapi-opensky:focus,
.btn-rapidapi-opensky:focus-visible {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}


/* =========================================
   BOX DEBUG - VOO
========================================= */
.voo-debug-box {
    font-family: monospace;
    font-size: 13px;
    font-weight: 700; 
    color: #0f0;
    background: #0b0b1a;
    margin-bottom: 12px;
}

/* =========================================
   BOX DEBUG - AIRPORT
========================================= */
.airport-debug-box {
    font-family: monospace;
    font-size: 13px;
    font-weight: 700; 
    color: #ffd700;
    background: #0b0b1a;
}
/* =========================================
   BOX DEBUG PRE - V00/AIRPORT
========================================= */
.voo-debug-box pre,
.airport-debug-box pre {
    font-family: monospace;
    line-height: 1.25;
}