/*                   */
/* CSS do sítio Alfa */
/*                   */

a
{

}

body
{
background-color: #006BD7; /* #006BD7 Azul Escuro Alfa */
background-size:  cover;
border-color:     #000000; /* Preto     */
border-style:     none;
font-family:      "Courier New", Verdana, Arial, Helvetica, sans-serif;
font-size:        0.8vw; /* 12px */
font-style:       normal;
font-weight:      bold;
/*
left:             0%;
top:              0%;
width:            100%;
height:           100%;
*/
}

div
{
font-family:      "Courier New", Verdana, Arial, Helvetica, sans-serif;
font-size:        0.8vw;
font-style:       normal;
font-weight:      bold;
}

div.BarraNavegacao
{
/* <div class="BarraNavegacao" style="left: 5px; top: 380px;"> */
background-color: #FFFFFF; /* #E9F3DE;*/
background-image: url(Imagens/Textura.jpg);
border-color:     #FFFFFF;
border-style:     outset;
color:            #000000;
font-family:      "Courier New", Verdana, Arial, Helvetica, sans-serif;
font-size:        0.8vw;/*11px*/
font-style:       normal;
font-weight:      bold;
line-height:      30%;
margin:           0cm 0cm 0cm 0cm;
position:         absolute;
left:             80%;
top:               1%;
width:            20%;
height:            8%;
}

div.Login
{
background-color: #CEEAFF; /* Azul Médio Alfa NOS CAVALEIROS #E6F2FF Azul Claro Alfa*/
border-color:     #000000; /* Preto */
border-radius:    16px;
border:           solid thin #0033FF;
/* border-style:     none; */
color:            #333333;
font-family:      "Courier New", Verdana, Arial, Helvetica, sans-serif;
line-height:      100%;
font-size:        0.8vw;
font-style:       normal;
font-weight:      bold;
margin:           0cm 0cm 0cm 0cm;
overflow:         auto;
position:         absolute;
left:             20%;
top:              47%;
width:            60%; /* DEFINIR CASO A CASO */
height:           8%; /* DEFINIR CASO A CASO */
}

div.Normas
{
background-color: #006BD7;

border-color:     #000000;
border-radius:    16px;
border-color:     #0033FF;
border-style:     none;

color:            #FFFFFF;

position:         absolute;

left:             90%;
top:              1%;
width:            14%;
height:           3%;
}

div.Operacoes
{
background-color: #CEEAFF; /* Azul Médio Alfa */
border-color:     #000000; /* Preto */
border-radius:    16px;
border-style:     none;
font-family:      "Courier New", Verdana, Arial, Helvetica, sans-serif;
font-size:        0.8vw;
font-style:       normal;
font-weight:      bold;
line-height:      100%;
margin:           0cm 0cm 0cm 0cm;
position:         absolute;
left:             1%; /* DEFINIR CASO A CASO */
top:              8%;
width:            78%; /* DEFINIR CASO A CASO */
height:           10%;
}

div.OperacoesAgenda
{
background-color: #CEEAFF; /* Azul Médio Alfa */
border-color:     #000000; /* Preto */
border-radius:    16px;
border-style:     none;

font-family:      "Courier New", Verdana, Arial, Helvetica, sans-serif;
font-size:        0.8vw;
font-style:       normal;
font-weight:      bold;
line-height:      100%;
margin:           0cm 0cm 0cm 0cm;
position:         absolute;

left:             1%; /* DEFINIR CASO A CASO */
top:              8%;
width:            78%; /* DEFINIR CASO A CASO */
height:           10%;
}



div.Suporte
{
background-color: #CEEAFF; /* Azul Médio Alfa NOS CAVALEIROS #E6F2FF Azul Claro Alfa*/
border-color:     #000000; /* Preto */
border-radius:    16px;
border:           solid thin #0033FF;
/* border-style:     none; */
color:            #333333;
font-family:      "Courier New", Verdana, Arial, Helvetica, sans-serif;
line-height:      100%;
font-size:        0.8vw;
font-style:       normal;
font-weight:      bold;
margin:           0cm 0cm 0cm 0cm;
overflow:         auto;
position:         absolute;
left:             1%;
top:              13%;
width:            98%; /* DEFINIR CASO A CASO */
height:           85%; /* DEFINIR CASO A CASO */
}

div.SuporteAgenda
{
background-color: #CEEAFF; /* Azul Médio Alfa NOS CAVALEIROS #E6F2FF Azul Claro Alfa*/
border-color:     #000000; /* Preto */
border-radius:    16px;
border:           solid thin #0033FF;
/* border-style:     none; */
color:            #333333;
font-family:      "Courier New", Verdana, Arial, Helvetica, sans-serif;
line-height:      200%;
font-size:        1.2vw;
font-style:       normal;
font-weight:      bold;
margin:           0cm 0cm 0cm 0cm;
overflow:         auto;
position:         absolute;
left:             1%;
top:              13%;
width:            200%; /* DEFINIR CASO A CASO */
height:           85%; /* DEFINIR CASO A CASO */
}

div.SuporteAgendaAdicEdit
{
background-color: #CEEAFF; /* Azul Médio Alfa NOS CAVALEIROS #E6F2FF Azul Claro Alfa*/
border-color:     #000000; /* Preto */
border-radius:    16px;
border:           solid thin #0033FF;
/* border-style:     none; */
color:            #333333;
font-family:      "Courier New", Verdana, Arial, Helvetica, sans-serif;
line-height:      200%;
font-size:        1.2vw;
font-style:       normal;
font-weight:      bold;
margin:           0cm 0cm 0cm 0cm;
overflow:         auto;
position:         absolute;
left:             1%;
top:              13%;
width:            200%; /* DEFINIR CASO A CASO */
height:           85%; /* DEFINIR CASO A CASO */
}

div.SuporteMensagens
{
background-color: #CEEAFF;
border-color:     #000000;

border-radius:    16px;
border:           solid thin #0033FF;
/* border-style:     none; */

font-size:        2rem;

position:         absolute;

left:             10%;
top:              45%;
width:            80%;
height:           16%;
}


div.Tabelas
{
background-color: #E6F2FF; /* #E6F2FF Azul Claro Alfa */
border: solid thin #0033FF;
/*
border-radius:    16px;
border-color:     #000000;
border-style:     none;
*/
font-family:      "Courier New", Verdana, Arial, Helvetica, sans-serif;
font-size:        0.8vw;
font-style:       normal;
font-weight:      bold;
line-height:      100%;
margin:           0cm 0cm 0cm 0cm;
overflow:         auto;
position:         absolute;
left:             1%;
top:              12%;
width:            88%;
height:           94%;
}

div.TabelasAgenda
{
background-color: #E6F2FF; /* #E6F2FF Azul Claro Alfa */
border: solid thin #0033FF;
/*
border-radius:    16px;
border-color:     #000000;
border-style:     none;
*/
font-family:      "Courier New", Verdana, Arial, Helvetica, sans-serif;
font-size:        0.8vw;
font-style:       normal;
font-weight:      bold;
line-height:      200%;
margin:           0cm 0cm 0cm 0cm;
overflow:         auto;
position:         absolute;
left:             1%;
top:              12%;
width:            88%;
height:           94%;
}

div.TabelasAgendaAdicEdit
{
background-color: #E6F2FF; /* #E6F2FF Azul Claro Alfa */
border: solid thin #0033FF;
/*
border-radius:    16px;
border-color:     #000000;
border-style:     none;
*/
font-family:      "Courier New", Verdana, Arial, Helvetica, sans-serif;
font-size:        1.2vw;
font-style:       normal;
font-weight:      bold;

line-height:      100%;

margin:           0cm 0cm 0cm 0cm;
overflow:         auto;
position:         absolute;
left:             1%;
top:              11%;
width:            97%;
height:           19%;
}

img
{
width: 10px;

}

input
{
background-color: #FFFFFF; /* #E6F2FF Azul Claro Alfa */
border:           0;
font-family:      "Courier New", Verdana, Arial, Helvetica, sans-serif;
font-size:        0.8vw;
font-style:       normal;
font-weight:      bold;
}

a.Botoes
{
background-color: #006BD7; /* #006BD7 Azul Escuro Alfa */
border-style:     outset;
border-radius:    8px;
color:            white;
font-size:        0.8vw;
font-style:       normal;
font-weight:      bold;
line-height:      120%;
padding:          4px;
min-width:       50px;
}


input.Botoes
{
background-color: #006BD7; /* #006BD7 Azul Escuro Alfa */
border-style:     outset;
border-radius:    8px;
color:            white;
font-size:        0.8vw;
font-style:       normal;
font-weight:      bold;
line-height:      120%;
padding:          4px;
min-width:       50px;
}

select
{
background-color: #FFFFFF; /* #E6F2FF Azul Claro Alfa */
font-size:        0.8vw;
font-style:       normal;
font-weight:      bold;

}

strong
{
/* background-color: #E6F2FF; */  /* #E6F2FF Azul Claro Alfa */
font-size:        1vw;
font-style:       normal;
font-weight:      bold;

}

table
{
/* background-color: #E6F2FF; */  /* #E6F2FF Azul Claro Alfa */
border:           0;
width:            95%;
font-size:        0.8vw;
font-style:       normal;
font-weight:      bold;
}

textarea
{
font-size:        0.8vw;
font-style:       normal;
font-weight:      bold;
}

th
{
background-color: #E6F2FF;  /* #E6F2FF Azul Claro Alfa */
font-weight:      bold;
font-family:      "Courier New", Verdana, Arial, Helvetica, sans-serif;
font-size:        1vw;
font-style:       normal;
font-weight:      bold;

}

/*
TABLE WITH 2 FIXED COLUMN
*/

.view {
  margin: auto;
  width: 600px;
}

.wrapper {
  position: relative;
  overflow: auto;
  border: 1px solid black;
  white-space: nowrap;
}

.sticky-col {
  position: -webkit-sticky;
  position: sticky;
  background-color: white;  
}

.first-col {
  width: 180px;
  min-width: 180px;
  max-width: 180px;
  left: 0px;
}

.second-col {
  width: 30px;
  min-width: 30px;
  max-width: 30px;
  left: 180px;
}

/*                                   */
/* CSS do Menu vertical invisivel    */
/*                                   */
/* Cor da fonte     #000000 Preto          */
/* Seleccionado     #999999 Cinzento escuro opção seleccionada */
/* Não seleccionado #CCCCCC Cinzento claro */

/* common styling */
.menu3
{
left:        0px;
top:         -15px;
font-family: "Courier New", Verdana, Arial, Helvetica, sans-serif;
width:       120px;   /* Não afecta nada */
position:    relative;
font-size:   0.8vw; /* Tamanho da fonte do menu */
z-index:     100;
clear:       both;
margin-left: 10px; /* for this page only */

}

.menu3 ul
{
padding:         0;
margin:          0;
list-style-type: none;
}

.menu3 ul li
{
float:    left;
position: relative;
}

.menu3 li.last
{
border-bottom: 1px solid #000000; /* Rebordo inferior dos segundos menus de desdobramento */
margin:        0;
}

.menu3 ul li a, .menu3 ul li a:visited
{
display:         block;
text-decoration: none;
width:           158px; /* Comprimento do título MENU */
height:          28px;  /* Altura do título de menu */
color:           #000000; /* Cor da fonte do cabeçalho do Menu */
border:          1px solid  #000000; /* Rebordo dos menus */
border-width:    1px 1px 1px 1px;
padding-left:    10px;
line-height:     25px;
background:      #CCCCCC; /* Cor do fundo do cabeçalho do Menu */
}

.menu3 ul li ul
{
display: none;
}

.menu3 table
{
margin:          -1px;
border-collapse: collapse;
font-size:        0.8vw;
}

/* specific to non IE and IE7 browsers */
.menu3 ul li:hover a
{
color: #000000;
}

.menu3 ul li:hover ul
{
display:    block;
position:   absolute;
top:        28px; /* 34px; Topo do menu quando abre */
margin-top: 1px;
left:       0;
/* width:      100px;  */
height:     auto;
}

.menu3 ul li:hover ul li ul
{
display: none;
}

.menu3 ul li:hover ul li a
{
display:     block;
background:  #CCCCCC;
color:       #000000; /* Cor da fonte do menu de 1º nível */
height:      auto;
line-height: 15px;
padding:     6px 14px; /* Altura e comprimento dos menus */
width:       140px; /* Largura dos menus */
}

.menu3 ul li:hover ul li a.drop
{
background: #CCCCCC url(MenuVerticalInvisivelSetaPosicionada.gif) bottom right no-repeat;
}

.menu3 ul li:hover ul li:hover a
{
background: #999999; /* Opção onde se está posionado*/
color:      #000000; /* Cor da fonte da opção seleccionada */
}

.menu3 ul li:hover ul li:hover a.drop
{
background: #999999 url(MenuVerticalInvisivelSetaPosicionada.gif) bottom right no-repeat;
}

.menu3 ul li:hover ul li:hover ul
{
display:  block;
position: absolute;
left:     168px; /* Posição dos segundos menus de desdobramento */
top:      -1px;
width:    150px; /* Não tem influencia */
}

.menu3 ul li:hover ul li:hover ul li a
{
background: #CCCCCC;
color:      #000000; /* Cor da fonte do menu 2º nível */
}

.menu3 ul li:hover ul li:hover ul li:hover a
{
background: #999999;
color:      #000000; /* Cor da fonte da opção seleccionada do menu de 2º nível */
}

/* for IE5.x and IE6 browsers only */
.menu3 ul li a:hover
{
color:      #000000;
background: #CCCCCC; /* Sobre o Menu */
}

.menu3 ul li a:hover ul
{
display:     block;
position:    absolute;
top:         29px;
left:        0;  /* Posição na largura do menu desdobramento*/
background:  #eee;
margin-top:  0;
}

.menu3 ul li a:hover ul li a
{
display:     block;
background:  #CCCCCC;
color:       #000000;
height:      30px;  /*  Não afecta nada */
line-height: 15px;
padding:     12px 14px;
width:       151px;  /* Não tem influencia */
}

.menu3 ul li a:hover ul li a.drop
{
background: #999999 url(MenuVerticalInvisivelSetaPosicionada.gif) bottom right no-repeat; /* Sem influencia */
}

.menu3 ul li a:hover ul li a ul
{
visibility: hidden;
position:   absolute;
height:     0;
width:      0;
}

.menu3 ul li a:hover ul li a:hover
{
background: #999999; /* Sem influencia */
color:      #000000;
}

.menu3 ul li a:hover ul li a.drop:hover
{
background:  #CCCCCC url(MenuVerticalInvisivelSetaPosicionada.gif) bottom right no-repeat; /* Não tem influencia */
}

.menu3 ul li a:hover ul li a:hover ul
{
visibility: visible;
position:   absolute;
top:        0;
color:      #000000;
left:       150px; /* Não tem influencia */
}

hr
{
clear:         both;
margin-bottom: 30px; /* Não tem influencia*/
}

.left
{
clear: both;
}

<!--[if lte IE 5.5]>
.menu3 ul li a, .menu3 ul li a:visited
{
width:  151px;
}
<!--[endif]-->


div.MeuMenu
{
width: 100px;
background-color: #33FF00
}

/*
MENU NOVO
*/

        :root{
            --bg:#DCDCDC; /* cor das opções */
            --hover:#A9A9A9; /* cor da opção sobre a qual estamos */
            --text:#000000;
            --border:#000000;
            --radius:0px;
            font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
        }

        .menu {
            display: inline-block;
            position: relative;
            user-select: none;
        }

        .menu-title{
            display: block;
            padding: 10px 14px;
            background: var(--bg);
            color: var(--text);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            cursor: default;
            min-width: 340px;
        }

        .menu-items{
            display: none;
            margin: 0;
            padding: 0;
            list-style: none;
            position: absolute;
            left: 0;
            top: 100%;
            z-index: 5;
        }

        .menu:hover .menu-items,
        .menu:focus-within .menu-items{
            display: block;
        }

        .menu-item{
            background: var(--bg);
            color: var(--text);
            border: 1px solid var(--border);
            padding: 8px 12px;
            margin: 0;
            min-width: 120px;
            position: relative;
            white-space: nowrap;
        }

        .menu-item:hover{
            background: var(--hover);
        }

        .menu-item.has-submenu{
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .menu-item.has-submenu::after{
            content: "?";
            font-size: 0.8em;
            margin-left: 8px;
        }

        .submenu{
            display: none;
            position: absolute;
            left: 100%;
            top: 0;
            list-style: none;
            margin: 0;
            padding: 0;
            z-index: 10;
        }

        .menu-item.has-submenu:hover > .submenu,
        .menu-item.has-submenu:focus-within > .submenu{
            display: block;
        }

        .submenu .menu-item{
            margin-top: 0;
            min-width: 110px;
        }

        .menu-item,
        .menu-title{
            transition: background-color 120ms ease;
        }

        @media (max-width:480px){
            .submenu{
                left: 100%;
                top: 0;
            }
        }