@import url("/srcs/main.css");
@import url("/srcs/cust.css");
html, body { height: 100%; width: 100%; vertical-align: middle; }
html[middle]{ display: table; }
body{ background: transparent;}
html{ background: var(--background);}
[middle] body { display: table-cell; text-align: center; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.card, card,box,.box { display: block; background: var(--background-alt); border-radius: 20px; padding: 20px; max-width: 100%;}
box,.box { margin: auto; }
label { display: flex ; flex-wrap: wrap; align-items: center; justify-content: center; }
label input, label select, label textarea { flex-grow: 1;padding: 5px;}
[lblico]::before{line-height: 3.5; padding: 0 5px; margin-left: 10px; background: var(--links); border-radius: 10px; color: var(--background);}

body { scrollbar-width: thin; scrollbar-color: rgba(100, 100, 100, 0.4) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background-color: rgba(100, 100, 100, 0.4); /* subtle gray */ border-radius: 10px; transition: background-color 0.2s ease-in-out; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(100, 100, 100, 0.6); }
input{border-bottom: 1px solid; border-radius: 0;}
body>section{
  min-height: calc(100vh - 220px);
  align-items: center; display: flex ; justify-content: center; flex-wrap: wrap;
}
done, error, info { display: block; padding: 20px; background: mediumseagreen; border-radius: 15px; margin: 10px 0; color: #fff; }
error{ background: #ebc5c5; color: darkred; }
info{ background: skyblue; color: steelblue; }