@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

body {
background: #f0f4f8;
background-size: 100% 100%;
background-attachment: fixed;
background-repeat: no-repeat;
margin: 0;
padding: 0;
font-family: 'Inter', 'Roboto', sans-serif;
color: #1a2332;
}

.fixed-footer {
position: fixed;
bottom: 0;
border-top: 1px solid #dde3ea;
width: 100%;
text-align: center;
padding: 0;
z-index: 1000;
font-weight: 500;
background-color: #1e3a5f;
color: #c8d8e8;
font-size: 12px;
letter-spacing: 0.02em;
}
footer p {
padding: 8px;
margin: 0;
}
footer a {
color: #64b5f6;
text-decoration: none;
}
footer a:hover {
color: #90caf9;
}

h1 {
text-align: center;
background: linear-gradient(135deg, #1e3a5f, #2563a8);
color: #fff;
padding: 16px;
font-size: 1.4em;
font-weight: 600;
letter-spacing: 0.03em;
margin: 0;
border-radius: 0 0 8px 8px;
}

.banniere td {
border-radius: 8px;
}
#bannere {
width: 90%;
max-width: 1200px;
margin: auto;
}
.entt {
border: 0px solid #000;
padding: 0;
}
.icm {
height: 80px;
width: 80px;
text-align: center;
margin-left: 16px;
margin-top: 8px;
border-radius: 8px;
}
.logo-title {
font-size: 24px;
font-weight: 600;
text-align: center;
color: #1e3a5f;
letter-spacing: 0.02em;
}
.bl01 {
display: block;
width: 80%;
margin: 0 40px 5px;
padding: 0 15px 5px;
}
.tex01 {
font-size: 14px;
color: #3a5270;
text-align: left;
font-weight: 400;
}

.iframe-container {
position: relative;
width: 100%;
margin: 0 auto;
overflow: hidden;
}
.iframe-container iframe {
width: 100%;
height: 100%;
border: 0;
}
.iframe-title {
position: absolute;
font-size: 18px;
top: 0;
left: 0;
right: 0;
text-align: center;
background-color: #e8f0fe;
color: #1e3a5f;
padding: 5px;
margin: 0;
}
.center-content {
text-align: center;
margin: auto;
display: block;
}

.txdefl {
max-width: 30em;
margin: 0 auto 0;
overflow: hidden;
font-size: 18px;
font-family: 'Inter', sans-serif;
font-weight: 500;
color: #1e3a5f;
}
.txdefl > :first-child {
display: inline-block;
padding-right: 2em;
padding-left: 100%;
white-space: nowrap;
animation: defilement-rtl 20s infinite linear;
}
@keyframes defilement-rtl {
0% { transform: translate3d(0,0,0); }
100% { transform: translate3d(-100%,0,0); }
}

.styled-fieldset {
width: 50%;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
border-radius: 8px;
border: 1px solid #dde3ea;
}
.lien {
text-decoration: none;
color: #2563a8;
border-bottom: 1px solid #2563a8;
}
.lien:hover {
color: #1e3a5f;
}

#squareLigt { padding-inline: 10px; }
#squareDARK { padding-inline: 10px; }

.boxbt {
flex: 1;
min-width: 220px;
margin: 0 0 16px;
padding: 0 10px 12px;
}
.button {
padding: 8px 16px;
background: #fff;
text-align: center;
display: inline-block;
font-size: 14px;
font-weight: 500;
position: relative;
will-change: transform;
border: 1px solid #dde3ea;
cursor: pointer;
border-radius: 6px;
font-family: 'Inter', sans-serif;
}
.button-mat:hover { color: transparent; }

.btn01 {
letter-spacing: 0.03em;
position: relative;
background: #1e3a5f;
color: #fff;
overflow: hidden;
transition: background 0.2s ease, transform 0.15s ease;
border-radius: 6px;
z-index: 1;
box-shadow: 0 2px 6px rgba(30,58,95,0.25);
border: none;
font-family: 'Inter', sans-serif;
}
.btn01:hover {
background: #2563a8;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(30,58,95,0.3);
}
.btn01:active {
background: #152a47;
transform: translateY(0);
}

.btntogl {
letter-spacing: 0.03em;
padding: 10px 16px;
margin-left: 8px;
font-size: 14px;
font-weight: 500;
background: #1e3a5f;
color: #fff;
overflow: hidden;
transition: background 0.2s ease, transform 0.15s ease;
border-radius: 6px;
border: none;
z-index: 1;
box-shadow: 0 2px 6px rgba(30,58,95,0.25);
font-family: 'Inter', sans-serif;
cursor: pointer;
}
.btntogl:hover {
background: #2563a8;
transform: translateY(-1px);
}
.btntogl:active {
background: #152a47;
transform: translateY(0);
}

@media all and (max-width: 1024px) {
body { background-size: auto 100%; }
#bannere { width: 100%; }
.logo-title { margin-left: 0; font-size: 18px; }
.entt { padding-left: 10px; }
.tex01 { font-size: 12px; }
.boxbt { min-width: 200px; margin: 0 16px 16px; padding: 0 8px 8px; }
.bl01 { margin: 0 16px 16px; padding: 0 8px 5px; }
.icm { height: auto; width: 60px; margin-left: 0; }
.btntogl { margin-left: 4%; }
.fixed-footer { font-size: 11px; }
}

#container {
width: 98%;
max-width: 1400px;
margin: 16px auto 60px;
}
table {
width: 100%;
margin-bottom: 16px;
border-collapse: separate;
border-spacing: 0;
}
th, td {
padding: 10px 14px;
}
th, td, tr {
border: 1px solid #dde3ea;
border-radius: 6px;
}
th {
font-size: 0.85em;
background: #1e3a5f;
color: #e8f0fe;
padding: 8px 14px;
border-collapse: separate;
vertical-align: middle;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
}
td.tx {
padding: 0;
font-size: 20px;
background: url(/icon/tx.gif) center center no-repeat;
text-align: center;
vertical-align: middle;
}
th.led {
padding: 2px 6px;
font-size: .8em;
background: url(/icon/led.png) center right no-repeat;
border-collapse: separate;
border: 1px solid #dde3ea;
text-align: center;
vertical-align: middle;
}
td.double {
padding: 0;
font-size: 20px;
background: url(/icon/double.png) center center no-repeat;
text-align: center;
vertical-align: middle;
}
td.denied {
padding: 0;
font-size: 20px;
background: url(/icon/accden.png) center center no-repeat;
text-align: center;
vertical-align: middle;
}
td.ear {
padding: 0;
width: 0px;
text-align: center;
background: url(/icon/ear.png) center center no-repeat;
background-position: center;
transition: all 0.4s ease;
}
td.logshow {
padding: 0;
text-align: left;
font-size: 88%;
width: 500px;
background: #f8fafc;
border-radius: 6px;
transition: background 0.4s ease;
}
td.logshow:hover {
background: #e8f0fe;
}

.tooltip {
font-size: 1em;
position: relative;
display: inline-block;
padding: 0;
text-align: center;
transition: all 0.4s ease;
}
.tooltip .tooltiptext {
font-size: 0.78em;
visibility: hidden;
width: 130px;
background-color: #1e3a5f;
color: #e8f0fe;
text-align: center;
border-radius: 6px;
padding: 5px 8px;
position: absolute;
z-index: 1;
opacity: 0;
transition: opacity 0.3s;
top: -5px;
left: 110%;
font-family: 'Inter', sans-serif;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 50%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent #1e3a5f transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}

td.darkgrey {
padding: 6px;
font-size: 1.1em;
text-align: center;
vertical-align: middle;
background: #e0e6ed;
transition: background 0.4s ease;
}
td.grey {
padding: 6px;
font-size: 1em;
text-align: center;
vertical-align: middle;
background-color: #f8fafc;
transition: background 0.4s ease;
}
td.green {
padding: 6px;
font-size: 1.1em;
text-align: center;
vertical-align: middle;
background: #dbeffe;
color: #1e3a5f;
}
td.red {
padding: 6px;
font-size: 1.1em;
text-align: center;
vertical-align: middle;
background: #fde8e8;
color: #7b1c1c;
transition: background 0.4s ease;
}
td.yellow {
padding: 6px;
font-size: 1.1em;
text-align: center;
vertical-align: middle;
background: #fef9c3;
color: #7a5c00;
transition: background 0.4s ease;
}