/* .headeragendamento{
    background-image: url("../marcanobg.png");
    background-position: right;
    background-repeat: no-repeat;
    background-size: clamp(8%, 15%, 16%) auto;

    /* so a imagem, sem ser fundo... 
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 1000; 
} */
/* .logo img{
    width: 46%;
} */
.logosm, .logo, .logobig{
    z-index: 1000;    
}
.logo, .logobig{
    position: fixed;
    top: 2px;
    right: 10px;
}
.logosm, .logo{
    display: none;
}
.logosm{
    top: 2px;
    right: 3px;
}
.logo{
    right: 0px;
}

body{
    font-family: Arial, Helvetica, sans-serif;
    margin: 0px;
}
/* Inverte/transpose tabela  ----   SERIA UMA BOA SÓ EXIBIR ASSIM PARA DESKTOP, TALVEZ TIRAR QUASE TUDO PARA MOBILE */ 
table { /*border-collapse: collapse;*/
    /*border: 1px solid black;*/
    border-radius: 8px;
    background-color: rgba(228,205,161,0.5);
    box-shadow: 0px 1px 16px rgba(0,0,0,0.36);
    /* width: 100%; */
}

.tabclass{
    margin-left: 20px;
}

tr{
    border: 1px solid #A6E3E5;
    min-width: 70px;    
    /* talvez 100px a 120px pra mobile */
}
 /* td tr ou th */
 th, td { 
    padding-left:10px;
 }

.leftcol {
    text-align: right;
    height: 30px;
    padding-right: 8px;
}

@media only screen and (max-width: 480px) {
    /* horizontal scrollbar for tables if mobile screen */
    .tabclass {
        margin-left: 10px;
    }
    tr{
        width: 15vw;
        min-width: inherit;
    }
    th, .leftcol{
        padding-left: 3px;
        padding-right: 3px;
    }
    .obshora br{
        display: none;
    }

    /* logo */
    .logo{
        right: 10px;    
        top: 10px;
    }
    .logo{
        display:inherit;        
    }
    .logosm, .logobig{
        display: none;
    }

}

@media only screen and (max-width: 450px) {
    td , tr{
        font-size: small;
    }
    .logosm{
        position: fixed;
        display: inherit;
    }
    .logo, .logobig{
        display: none;
    }
}

tr { display: block; float: left;}
th, td { 
    display: block; 
    text-align: center; 
    border: 1px solid white; 
    min-height:30px;
    height: 50px;
}
        /* final Inverte/transpose tabela */


.headercol {text-align: center;}

.horario{
     height: 30px;
     background-color: rgba(227,187,189,0.5);
}

.horario_selecao
{
    padding-top: 20px;
    padding-bottom: 10px;
    display: inline;
}
.titulo_horario_selecao{
    /* font-weight: bold; */
    padding-bottom: 10px;
    display:inline;
    margin-left: 20px;
    /* font-family: Roboto; */
}

.frm_forms, .msgpag{
    margin-left: 20px;
    text-align: justify;
}

.frm_button_submit:hover{
    cursor: pointer;
}

a { text-decoration: none; }

.diasemana {
    font-size:150%;
    background-color: ligthblue;
}
.titulopagina{
    display:block;
    margin-block: 5px;
    font-weight: bold;
}


#headeragendamento{
    position: sticky;
    top: 0px;
    height: 90px;
    background-color: rgba(227,187,189,0.5);
    padding-left: 10px;
}

.titulotabela, .titulodadospaciente, .titulopagamento{
    margin-top: 20px;
    margin-bottom: 10px;
    font-weight: bold;
    padding-left: 10px;
}

.passo2{
    display: none;
}

.peqredefine
{
    font-size: 80%;
    margin-left: 5px;
    /* display: inline;  */
    display:none;
}
.frm_paciente_horario{
    visibility: hidden;    
}
#pagamentodiv{
    display:none;
}

#horario_dia, #horario_hora{
    display:inline;
}

.msgpagseg, .intromsgpag, .botaopagseg
{
    margin-top:15px;
    margin-right: 5px;
}

#xcolor{
    color: red;
    display: inline;
    font-size: 1.2em;
}

.horabutton
{
  border: none;
  padding: none;
  background-color: transparent;
  color: blue;
}
.horabutton:hover{
    /* border: 10px solid black; */
    transform: scale(1.2);
}

.obshora{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8em;
    margin-top: 5px;
    margin-left: 20px;
    text-align: justify;   
    margin-right: 10px;

}

.div-table {
  display: table;
  width: auto;
  background-color: #eee;
  border: 1px solid #666666;
  border-spacing: 5px;
  /* cellspacing:poor IE support for  this */
}

.div-table-row {
  display: table-row;
  width: auto;
  clear: both;
}

.div-table-col {
  float: left;
  /* fix for  buggy browsers */
  display: table-column;
  width: 200px;
  background-color: #ccc;
}

.div-table-colspan {
  float: left;
  /* fix for  buggy browsers */
  display: table-column;
  width: 100%;
  background-color: #ccc;
  text-align:center;
}

.calendar{
    display:grid;
    /*gap: 10px;*/
    /*grid-template-columns: auto 1fr;*/
    margin: 2rem;
}
.timeline{
    display:grid;
    /*grid-template-rows: repeat(var(--numHours), var(--timeHeight));*/
}
.days{
    display:grid;
    grid-column: 2;
    gap: 5px;
    grid-template-columns: repeat(auto-fit,minmax(150px; 1fr));
}

.confdadosag{
    background-color: lightgrey;
    width: fit-content;
    margin-top: 10px;
    margin-bottom: 20px;
}
.daytimeloc, .finalmsgs{
    margin-top: 20px;
    font-size: 80%;
    margin-right: 5px;
}

#day, #time, #pac_nome{
    display: inline;
}
.icontime, .finalmsgs{
    display: block;
    margin-top: 5px;
}

#codreserva{
    color: red; 
    display: inline-block;
    margin-bottom: 20px;
}