html, body { font-family: Calibri, Arial }
table, tr, th, td { border: 1px solid black; border-collapse: collapse }
table { margin: 2ex 0; }
th { background-color: #ccf; font-weight: bold; text-align: center; padding: 2px 4px; }
td { padding: 2px 4px;  text-align: center; }
.l { text-align: left }
.c { text-align: center }
.r { text-align: right }
.br { background: red }
.blr { background: #faa; }
.by { background: yellow }
.bg { background: green }
.cr { color: red; }
.cy { color: blue }
.cg { color: green }

td button { border: 0; background: transparent; }
td button:hover { background: #f66; }
td.click:hover { background: #f66; cursor: pointer; }
.tippy { color: blue; font-weight: bold; }

td.vt { vertical-align: top; }

p.mtip b { color: yellow; }
p.mtip { margin: 0; padding: 0; }

/*
.mytooltipdiv { color: black; font-weight: normal; } // padding-left: 1em; text-indent: -1em; }

span.click { border: 0; padding: 0 1px; margin: 0 0 0 1ex; background: #000; color: #fff; cursor: pointer; font-size: .65em; display: inline-block; }
span.click:hover { background: #f66; cursor: pointer; }
*/

@media print {
  div.sims { columns: auto 2; }
  #menu { display: none !important; }
  span.click { display: none; }

  div.sel, button.sel, .noprint { display: none !important; }
}

/*
td span { height: 1.5ex; border: 0px solid black; display: inline-block; margin-right: 1ex; }
*/

h1 { font-size: large; }
h2 { font-size: medium; }
tr:nth-child(2n+1) {background: #ffe; }

#menu { display: inline; }
#menu button, #menu span { display: inline-block; padding: 1px 3px; margin: 0; border: 1px solid #aaa; font-size: 0.9em; color: #000; }
#menu button:hover, #menu button.sp:hover { background: #f66; cursor: pointer; }
#menu button { background: #ddf; }
/*
#menu button.ativo { background: blue; color: white; }
*/
#menu button.sp { background: yellow; }
#menu button.info { background: #ccc; }
#menu button.info:hover { background: #ccc; cursor: auto; }

#menu button + button, #menu button + select, #menu select + button { margin-left: 1ex;}

#memo_registo { max-width: 98%; width: 80em; background: #ffc; border: 1px solid #888; font-family: inherit; font-size: 0.9em; color: #008; min-height: 8em; padding: .5ex; display: block; margin: 0; }
/*
_memo_registo { width: 40em; display: block; margin-bottom: 1ex; }
*/
button#guardar_registo { display: block; margin: 0; margin-top: 2px; }
button#guardar_registo.reg_changed { cursor: pointer; }
#main textarea.reg_changed { background: #fcc; }
button#guardar_registo.reg_changed:hover { background: #fcc; }


#main.inicio button { display: inline-block; margin: 0; margin-left: 1ex;}
/*
#main.inicio button + button { margin-left: 1ex; }
*/
#proc_res { display: block; margin: 0; margin-top: 1ex; }

table.rec th { text-align: right; }
table.rec td { text-align: left; }

table#registos td:nth-child(2) { text-align: left; }
table#registos button { background: #f88; }
table#registos button:hover { background: red; cursor: pointer; }

#div_reg { display: block; }
#registo_data { margin-right: 1ex; }
/*
div.rec { display: block; }
div.rec div { display: inline-block; margin-right: 1em; }
div.rec div span { background: #ccf; display: inline-block; border: 1px solid #444; padding: 1px 2px; margin-bottom: 1ex; }
div.rec div span + span { background: #fff; border-left: 0; }
*/

#diag {
  border-radius: 50%;
  border-top: 32px solid blue;
  border-right: 32px solid green;
  border-bottom: 32px solid red;
  border-left: 32px solid pink;
  width: 128px;
  height: 128px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  background: transparent;
}

#table_list_diag {
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  font-size: 10em;
  text-align: center;
}

div#page_nav {
  display: inline-block;
  margin-left: 2em;
  font-size: 0.8em;
}

div#page_nav button { margin: 0 1ex !important; cursor: pointer; }

div.sel { display: inline-block; }
div.sel { margin-right: 3ex; }
div.sel span { margin-right: 1ex; }

#diag::backdrop, #table_list_diag::backdrop {
/*
  backdrop-filter: blur(3px);
*/
  background: transparent;
}

#diag:focus, #diag:focus-visible { outline: none; }


@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#login {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

}

#login input, #login button {
    font-size: x-large;
    padding: 2px;
    border: 2px solid #ccc;
    border-radius: 1px;
}


#cal tr.dow td { font-size: 0.7em; }
#cal tr.month td.wd { cursor: pointer; }
#cal td.noday { background: #fff; }
#cal td.fds { background: #ccc; }
#cal td.wd { background: #fff; }
#cal td.wd_g { background: #8f8; cursor: pointer; }
#cal td.wd_r { background: #f88; cursor: pointer; }

.small { font-size: 0.7em; }

th.menu { text-align: center; padding: 0; margin: 0; }
th.menu button.sp { background: yellow; border: 0; margin: 2px !important; cursor: pointer; }

#input { font-size: large; font-family: Consolas, Calibri, Arial; }