@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
@import url('./icons.css');

html, body {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

.button-link {
    text-decoration: unset;
}

.title {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 0;
}

.title.title-secondary {
    padding: 0.313rem 0 0;
    color: var(--bs-secondary-color);
}

.title-header-text {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 2.5rem;
}

.title-content-text {
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.375rem;
}

.main-content {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    width: 100%;
}

.diec-marker-label { --marker-color:#ef6100; transform:translate(-50%,-118%); display:flex; align-items:center; gap:6px; max-width:190px; padding:4px 9px; border:1px solid color-mix(in srgb,var(--marker-color) 65%,white); border-radius:999px; background:rgba(255,255,255,.92); color:#273246; font-size:11px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; box-shadow:0 7px 20px rgba(26,40,64,.12); pointer-events:none; }
.diec-marker-label i { flex:0 0 auto; width:7px; height:7px; border-radius:50%; background:var(--marker-color); box-shadow:0 0 0 4px color-mix(in srgb,var(--marker-color) 14%,transparent); }
.diec-marker-label span { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.diec-marker-label.level-3 { padding:6px 12px; color:#c94800; font-size:13px; border-width:2px; }

.diec-screen-marker-layer { position:fixed; z-index:7; inset:0; overflow:hidden; pointer-events:none; }
.diec-screen-marker { --marker-color:#ef6100; position:absolute; width:48px; height:48px; padding:0; border:0; color:var(--marker-color); background:transparent; transform:translate(-50%,-100%); pointer-events:auto; cursor:pointer; }
.diec-screen-marker::after { position:absolute; left:50%; bottom:-3px; width:15px; height:15px; border:1px solid color-mix(in srgb,var(--marker-color) 58%,transparent); border-radius:50%; content:""; transform:translate(-50%,50%); animation:diec-screen-pulse 1.8s ease-out infinite; }
.diec-screen-marker i { position:absolute; left:50%; bottom:0; width:2px; height:31px; border-radius:2px; background:#68758a; box-shadow:0 1px 2px rgba(38,49,67,.2); transform:translateX(-50%); }
.diec-screen-marker i::before { position:absolute; top:0; left:2px; display:grid; place-items:center; width:29px; height:17px; padding:0 4px 0 3px; box-sizing:border-box; clip-path:polygon(0 0,100% 0,84% 50%,100% 100%,0 100%); color:#fff; background:var(--marker-color); box-shadow:0 4px 10px color-mix(in srgb,var(--marker-color) 24%,transparent); content:attr(data-mark); font-size:7px; font-style:normal; font-weight:800; letter-spacing:.04em; }
.diec-screen-marker i::after { position:absolute; left:50%; bottom:-5px; width:10px; height:10px; border:2px solid #fff; border-radius:50%; background:var(--marker-color); box-shadow:0 0 0 3px color-mix(in srgb,var(--marker-color) 18%,transparent); content:""; transform:translateX(-50%); }
.diec-screen-marker span { position:absolute; bottom:51px; left:50%; max-width:190px; padding:4px 9px; overflow:hidden; border:1px solid color-mix(in srgb,var(--marker-color) 45%,white); border-radius:999px; color:#273246; background:rgba(255,255,255,.92); box-shadow:0 6px 18px rgba(27,39,60,.12); font-size:11px; font-weight:700; white-space:nowrap; text-overflow:ellipsis; transform:translateX(-50%); }
.diec-screen-marker.level-3 i { height:34px; }
.diec-screen-marker.level-3 i::before { width:34px; height:20px; font-size:8px; }
.diec-screen-marker.level-3 span { color:#c94800; font-size:13px; }
.diec-marker-tooltip { --marker-color:#ef6100; position:fixed; z-index:2; display:flex; flex-direction:column; gap:4px; width:min(250px,calc(100vw - 28px)); padding:12px 14px; border:2px solid #ef6100; border-radius:9px; color:#273246; background:rgba(255,255,255,.96); box-shadow:0 12px 34px rgba(31,43,65,.18); box-sizing:border-box; pointer-events:none; transform:translate(22px,-50%); backdrop-filter:blur(12px); }
.diec-marker-tooltip[hidden] { display:none; }
.diec-marker-tooltip.align-left { transform:translate(calc(-100% - 22px),-50%); }
.diec-marker-tooltip strong { overflow:hidden; font-size:14px; white-space:nowrap; text-overflow:ellipsis; }
.diec-marker-tooltip span { display:-webkit-box; overflow:hidden; color:#64748b; font-size:12px; line-height:1.45; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.diec-marker-tooltip small { color:#64748b; font-size:12px; }
.diec-marker-tooltip em { color:var(--marker-color); font-size:12px; font-style:normal; font-weight:700; }
@keyframes diec-screen-pulse { 0% { opacity:.8; transform:scale(.55); } 80%,100% { opacity:0; transform:scale(1.85); } }

.scene-tooltip .inf-globe-tooltip {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 12rem;
	padding: 0.7rem 0.8rem;
	color: #1f2937;
	border: 1px solid rgba(255, 106, 0, 0.28);
	border-radius: 0.6rem;
	background: rgba(255, 255, 255, 0.96);
	box-shadow: 0 0.7rem 2rem rgba(51, 65, 85, 0.14);
	backdrop-filter: blur(8px);
}

.scene-tooltip .inf-globe-tooltip strong {
	font-size: 0.9rem;
}

.scene-tooltip .inf-globe-tooltip span,
.scene-tooltip .inf-globe-tooltip small {
	color: #64748b;
}

.scene-tooltip .inf-globe-tooltip div {
	margin-top: 0.3rem;
	font-size: 0.8rem;
}

.scene-tooltip .inf-globe-tooltip em {
	color: #c2410c;
	font-size: 0.75rem;
	font-style: normal;
	font-weight: 650;
}

.inf-globe-site-label-anchor {
	pointer-events: none;
}

.inf-globe-site-label {
	position: relative;
	padding: 0.18rem 0.48rem;
	color: #7c2d12;
	font-family: "Microsoft YaHei UI", "PingFang SC", sans-serif;
	font-size: 0.72rem;
	font-weight: 650;
	line-height: 1.35;
	white-space: nowrap;
	border: 1px solid rgba(234, 88, 12, 0.34);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.82);
	box-shadow: 0 0.35rem 1rem rgba(124, 45, 18, 0.12);
	backdrop-filter: blur(8px);
	transform: translateY(-145%);
}

.inf-globe-site-label::after {
	position: absolute;
	top: 100%;
	left: 50%;
	width: 1px;
	height: 0.45rem;
	background: rgba(234, 88, 12, 0.52);
	content: "";
}

.inf-globe-site-label.is-abnormal {
	color: #9a3412;
	border-color: rgba(194, 65, 12, 0.55);
	background: rgba(255, 247, 237, 0.9);
}

.inf-globe-site-label.is-stopped {
	color: #475569;
	border-color: rgba(100, 116, 139, 0.35);
}

.admin-page {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 1rem;
    min-height: 0;
    overflow: auto;
    padding: 1.25rem 1rem;
    width: 100%;
}

.admin-page-header {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: 1rem;
    justify-content: space-between;
}

.admin-page-header h2 {
    margin-bottom: 0.25rem;
}

.admin-grid {
    flex: 0 0 auto;
    min-width: 0;
    width: 100%;
}

@media (max-width: 767.98px) {
    .admin-page {
        padding: 1rem 0.5rem;
    }

    .admin-page-header {
        align-items: stretch;
        flex-direction: column;
    }
}

.block-content {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    height: auto;
    max-width: 100%;
    width: 31.25rem;
}

.or {
    align-items: center;
    display: flex;
    flex-direction: row;
    padding: 0.3125rem 0;
}

.or .or-line {
    opacity: 0.2;
    width: 100%;
    border-bottom: 1px solid var(--bs-body-color);
}

.or .or-text {
    padding: 0 0.625rem 0 0.625rem;
    font-size: 0.75rem;
    line-height: 1.125rem;
    color: var(--bs-body-color);
    opacity: 0.7;
}

.links-container {
    align-items: center;
    display: flex;
    gap: 0.25rem;
    justify-content: center;
}

.links-container .dot {
    border-radius: 50%;
    height: 0.3125rem;
    margin: 0 0.1875rem;
    opacity: 0.7;
    width: 0.3125rem;
    background-color: var(--bs-body-color);
}

.manage-layout {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.info-message {
    align-items: center;
    display: flex;
    justify-content: center;
    padding: 0.625rem 1rem 0.625rem 1rem;
    position: relative;
    background-color: rgb(var(--bs-primary-rgb) / 0.15);
}

.info-message.info-panel {
    margin-bottom: 0.625rem;
}

.manage-content {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.large-input {
    font-size: 1.875rem;
    height: 4.3125rem;
}

.title-content-text-secondary {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.button-group {
    display: flex;
    flex-direction: row;
    gap: 0.625rem;
}

.confirm-button {
    margin-top: 0.3125rem;
}

.display-desktop {
    display: block;
}

.display-mobile {
    display: none;
}

@media (max-width: 768px) {
    .display-desktop {
        display: none;
    }

    .display-mobile {
        display: block;
    }
}