@font-face {
  font-family: Voltaire;
  src: url(../../../fonts/Voltaire/Voltaire-Regular.ttf);
}

@font-face {
  font-family: ShareTech;
  src: url(../../../fonts/Share_Tech_Mono/ShareTechMono-Regular.ttf);
}

@font-face {
  font-family: LCD;
  src: url(../../../fonts/LCD/LCD.ttf);
}

h1,h2,h3,h4,h5,h6,
.fap-h1,.fap-h2,.fap-h3,.fap-h4,.fap-h5,.fap-h6{
	display: block;
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
}
.fap-h1{ font-size: 2em; }
.fap-h2{ font-size: 1.5em; }
.fap-h3{ font-size: 1.17em; }
.fap-h4{ font-size: 1em; }
.fap-h5{ font-size: .83em; }
.fap-h6{ font-size: .67em; }

body{
	background-color: #5b686f;
	user-select: none; // chrome and Opera
	-moz-user-select: none; // Firefox
	-webkit-text-select: none; // IOS Safari
	-webkit-user-select: none; // Safari
}

.header-pt-fap{
	margin-top:120px;
}

/* ========================================
   FAP Sidebar – Modern Section Layout
   ======================================== */
.fap-sidebar {
	background: var(--color-fd-blue-4, #081433) !important;
	border-right-color: var(--color-fd-blue-3, #112151) !important;
	width: 340px;
}

/* Override sidebar-width so dashboard__main margin-left matches the wider FAP sidebar */
.dashboard:has(.fap-sidebar) {
	--sidebar-width: 340px;
}

/* Collapsed sidebar (logo-only mode) */
.fap-sidebar.fap-sidebar--logo-only {
	width: 200px !important;
}
.dashboard:has(.fap-sidebar--logo-only) {
	--sidebar-width: 200px;
}

/* Sidebar configured off: main area spans full width */
.fap-sidebar-hidden {
	--sidebar-width: 0px;
	margin-left: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
}

.fap-sidebar-header {
	padding: 14px 14px 6px;
}
.fap-sidebar-header h6,
.fap-sidebar-header .fap-h6 {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #fff;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* ---- Sidebar accordion ---- */
.fap-accordion .accordion__item {
	border-bottom: 1px solid var(--color-fd-blue-3, #112151);
}
.fap-accordion .accordion__content {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
}
.fap-accordion .accordion__item.is-active .accordion__content {
	max-height: 1000px;
}
.fap-accordion-btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 14px;
	cursor: pointer;
	user-select: none;
	transition: background 0.2s;
}
.fap-accordion-btn:hover {
	background: rgba(255,255,255,0.05);
}
.fap-accordion-btn h6,
.fap-accordion-btn .fap-h6 {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--color-fd-green-4, #a5be00);
	margin: 0;
	display: flex;
	align-items: center;
	gap: 6px;
}
.fap-accordion-btn h6 i,
.fap-accordion-btn .fap-h6 i {
	font-size: 12px;
	opacity: 0.7;
}
.fap-accordion-arrow {
	font-size: 10px;
	color: rgba(255,255,255,0.5);
	transition: transform 0.3s ease;
}
.accordion__item.is-active .fap-accordion-arrow {
	transform: rotate(180deg);
}
.fap-accordion-body {
	padding: 0 14px 10px;
}

/* ---- Sidebar sections (legacy compat) ---- */
.fap-sidebar-section {
	padding: 0;
	border-bottom: none;
}
.fap-sidebar-section h6,
.fap-sidebar-section .fap-h6 {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--color-fd-green-4, #a5be00);
	margin-bottom: 0;
	display: flex;
	align-items: center;
	gap: 6px;
}
.fap-sidebar-section h6 i,
.fap-sidebar-section .fap-h6 i {
	font-size: 12px;
	opacity: 0.7;
}

/* ---- Sub-groups within a section ---- */
.fap-subgroup {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid rgba(255,255,255,0.08);
}
.fap-subgroup-label {
	display: block;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: var(--color-fd-green-4, #a5be00);
	margin-bottom: 4px;
	opacity: 0.8;
}

/* ---- Toggle rows ---- */
.fap-toggle-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 5px 0;
}
.fap-toggle-row + .fap-toggle-row {
	border-top: 1px solid rgba(255,255,255,0.04);
}
.fap-toggle-label {
	font-size: 12px;
	color: var(--color-fd-light-2, #f9ffe6);
	opacity: 0.85;
	line-height: 1.3;
}

/* ---- Toggle switch ---- */
.fap-switch {
	position: relative;
	display: inline-block;
	width: 36px;
	height: 20px;
	flex-shrink: 0;
	margin: 0;
}
.fap-switch input {
	opacity: 0;
	width: 0;
	height: 0;
	position: absolute;
}
.fap-switch-slider {
	position: absolute;
	cursor: pointer;
	inset: 0;
	background: rgba(255,255,255,0.12);
	border: 1px solid rgba(255,255,255,0.2);
	border-radius: 20px;
	transition: 0.25s;
}
.fap-switch-slider::before {
	content: "";
	position: absolute;
	height: 14px;
	width: 14px;
	left: 2px;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(255,255,255,0.5);
	border-radius: 50%;
	transition: 0.25s;
}
.fap-switch input:checked + .fap-switch-slider {
	background: var(--color-fd-green-4, #a5be00);
	border-color: var(--color-fd-green-4, #a5be00);
}
.fap-switch input:checked + .fap-switch-slider::before {
	transform: translateY(-50%) translateX(16px);
	background: #fff;
}

/* ---- Doors grid ---- */
.fap-doors-grid {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 8px;
	align-items: start;
}
.fap-doors-cabin {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4px;
}
.fap-doors-cabin img {
	max-height: 200px;
	opacity: 0.7;
}
.fap-door-item {
	margin-bottom: 8px;
}
.fap-door-item label {
	display: block;
	margin: 0 0 2px;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: rgba(255,255,255,0.6);
}
.fap-select,
.menu-door-options {
	display: block;
	width: 100%;
	padding: 4px 6px;
	border-radius: 4px;
	border: 1px solid var(--color-fd-blue-3, #112151);
	background: var(--color-fd-blue-5, #010714);
	color: #fff;
	font-size: 11px;
	cursor: pointer;
}
.fap-select option {
	background: var(--color-fd-blue-4, #081433);
	color: #fff;
}

/* ---- Emergency section ---- */
.fap-section-emergency {
	border-bottom: none;
}
.fap-evac-actions {
	padding: 4px 0;
}
.fap-evac-actions .evac_cmd {
	width: 100%;
	text-align: center;
	font-weight: 600;
	letter-spacing: 1px;
}

@media only screen and (max-width: 900px) {
	.header-pt-fap{
		margin-top:95px;
	}
}

.FAP_list{
	position: relative;
	list-style: none;
	padding: 0;
	margin: 0;
	width: 100%;
	border:1px solid #000;
}

.FAP_list.PRAM_List{
	max-height: 522px;
	min-height: 522px;
	overflow: hidden;
}


.FAP_list .item_container{
	display: flex;
	flex-flow: column;
}

.FAP_list .item_container .ann_titlename{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.FAP_list .item_container .ann_filestatus{
	margin-left:60px;
}

.FAP_list li{
	list-style: none;
	text-align: left;
	height: 40px;
	line-height: 18px;
	display: block;
	background:#fff;
	color: #000;
	padding:0 5px;
	border:1px solid #000;
	font-weight: bold;
	font-size: 0.9rem;
}

.FAP_list li.dln{
	line-height: 13px;
}

.FAP_list li.active{
	background:#b8f5ff;
}

.FAP_list li.playing{
	background: #b8f5ff;
}

.FAP_list .chd{
	display: none;
}



.sliderVELM{
	position: absolute;
	top:0;
	right: 0;
	width: 8px;
	margin: 2% 0;
	height: 98%;
	border-radius: 10px;
	border: 2px solid #000;
    border-right: 0;
	background: #d4f8f8;
}

.sliderVELM .full{
	height: 100%;
	background: #20f30a;
}

.sliderVELM .slider {
	height: 100%;
	background: #20f30a;
}


.sliderFake{
	display: block;
	width: 10px;
	height: 100%;
	border-radius: 10px;
	border: 2px solid #000;
	background: #20f30a;
	border-right: 0;
	padding: 0;
	margin:0 5px;
}

.annBOX{
    color: #000;
    font-weight: bold;
    background-color: #b8f5ff;
    display: block;
    width: 105%;
    height: 50px;
    margin: auto;
    padding: 10px 15px;
    text-align: center;
	box-shadow: inset 2px 2px 2px 2px #000, 2px 2px 2px 2px #ffffff38;
	font-size: 15px;
	line-height: 15px;
}

.blue-card{
	background-color: #0303c9;
	width: 95%;
	height: 100%;
	padding: 10px;
	box-shadow: inset -8px -8px 13px 5px #000, inset 8px 8px 2px 5px #ffffff7d;
	text-align: center;
	color: #fff;
	font-weight: bold;
	font-size: 30px;
	padding-top:100px;
}

.blue-card .text-yellow{
	color: #ffe200;
}

.temp-card{
	padding: 120px 40px;
	width: 400px;
	height: 400px;
	margin: 100px 220px;
}

.b-container{
	width: 100%;
	height: calc(100vh - 120px);
	overflow: hidden;
	position: relative;
}

#subpanel{
	background: #808080;
    border: 5px solid #b2b9bd;
    width: 1210px;
    position: absolute;
    top: 895px;
    left: -5px;
    padding:15px;
    margin:0;
	box-sizing: border-box;
}

#subpanel .btn{
	background-color: #595959;
	border:1px solid #333333;
	color: #d07c00;
}

#subpanel .btn.active{
	color: #ffa827;
    text-shadow: 0 0 3px #ffa827;
}

#subpanel .btn.red{
	color: #d20000;
    text-shadow: 0 0 3px #d20000;
}

#subpanel .btn.green.active{
	color: #09de09;
    text-shadow: 0 0 3px #09de09;
}

.dr-btn{
	display: flex;
	justify-content: center;
	margin:5px 0;
}


.small-btn .btn {
	margin:0 2px;
	width: 40px;
	height: 40px;
	line-height: 40px;
	font-size: 0.7rem;
}

.symbol{
	font-size: 30px;
}

#config-panel{
	transform-origin: 100% 0;

	width: 380px;
	color: #fff;
	text-align: center;
	position: absolute;
    z-index: 300;
    background: #595959;
    border: 0.4rem solid #82868a;
    padding: 1rem;
    right: 0;
    top: 2rem;
	transition:right 0.5s ease-in-out;
}

#config-panel h3,
#config-panel .fap-h3,
#config-panel h5,
#config-panel .fap-h5{
	font-family: Voltaire;
}

#config-panel .flap{
	position: absolute;
    width: 50px;
    height: 200px;
    left: -52px;
    top: 30%;
    background-color: #82868a;
    z-index: 900;
}

#config-panel .flap .fll{
	display: block;
	width: 100%;
	height: 100%;
	box-shadow: 8px 0px 13px 0px #444444;
}
#config-panel .flap .txt{
	display: block;
	position: absolute;
	transform: rotate(270deg);
	width: 120px;
    font-family: 'Voltaire';
    font-size: 18px;
    left: -35px;
    top: 115px;
}

#info{
	position: absolute;
	width: 100%;
	height: 100%;
	padding: 8rem;
}

#info .wd{
	box-shadow: 0 4px 12px rgb(0 0 0 / 12%), 0 1px 4px rgb(0 0 0 / 24%);
    background: #868585;
	color: #fff;
	text-align: center;
	width: 80%;
	margin:auto;
	padding: 3rem 1rem;
	font-size: 1.3rem;
}
#info .wd p{
	color: #ccc;
}

#info .wd a{
	display: block;
	color: #fff;
}

/*  Registration Popup  */
.registration{
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: rgba(89, 89, 89, 0.8);
	z-index: 1200;
}

.registration .popup{
	display: block;
	padding: 40px;
	width: 90%;
	min-height: 70vh;
	max-height: 90vh;
	background: #fff;
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.registration .popup h2,
.registration .popup .fap-h2{
	font-family: 'Voltaire', sans-serif;
	margin-bottom: 30px;
}
.registration .bttn{
	display: inline-block;
	font-weight: 400;
	color: #212529;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-color: transparent;
	border: 1px solid transparent;
	padding: 0.375rem 0.75rem;
	font-size: 1rem;
	line-height: 1.5;
	border-radius: 0.25rem;
	transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.registration .bttn-green{
	background-color: #679436;
	border-color: 679436;
	color: #fff;
}

#regCnt{
	overflow-y: scroll;
}

.splash{
	opacity: 1;
	position: absolute;
    width: 100%;
    height: 100%;
    background: #595959;
	display: flex;
	align-items: center;
	justify-content: center;
    text-align: center;
    z-index: 99999;
    transition:opacity 0.3s linear;
}
.splash.hide{opacity: 0;z-index: 0;}
.splash img{max-width: 40%;}


#screen-lock{
	padding: 100px;
	background-color: #000;
	color:#fff;
}

.counting-bar{
	position: relative;
	width: 400px;
    margin: 50px auto;
    background-color: #06068e;
    border: 5px solid #FFF;
    height: 35px;
}

.counting-bar .pgs{
	position: absolute;
    right: 0;
    height: 25px;
    background: #FFF;
    width: 100%;
}

.fap{
	transform-origin: 0 0;
	position: relative;
	background: url('../img/simple-bg.png') repeat;
	background-size: 50%;
	width: 1200px;
	height: 900px;
	margin: 0;
	border: 5px solid #b2b9bd;
	box-sizing: content-box;
}

/* Kiosk /fap mode: the JS sets a dynamic width so the 5 fixed-size columns
   spread out to fill the available width, then scales uniformly to fit
   the viewport height. Buttons, planes and text keep their proportions. */
.fap.fap-kiosk{
	margin: 0 !important;
	box-sizing: border-box !important;
}
.fap-kiosk #cabin_status,
.fap-kiosk #pages{
	padding-top: 75px;
}
.fap-kiosk #cabin_status .titles,
.fap-kiosk #cabin_status .pages-cabin{
	display: flex;
	justify-content: space-between;
	margin: 0;
}
.fap-kiosk #cabin_status .titles .col,
.fap-kiosk #cabin_status .pages-cabin .col{
	flex: 1 1 0;
	text-align: center;
}
.fap-kiosk #cabin_status .cabin{
	margin: 0 auto;
}
.fap-kiosk #subpanel{
	width: calc(100% + 10px) !important;
	left: -5px !important;
	top: 895px;
	padding: 15px;
	box-sizing: border-box;
}

#cabin_status,#pages{
	width: 100%;
	position: absolute;
	z-index: 200;
	padding-top:75px;
}
.cabin{
	position: relative;
	background: url('../img/cabin.png') no-repeat;
	background-size: contain;
	margin: auto;
	width: 95px;
	height: 630px;
}
#cabin_status .titles{
	min-height: 40px;
}
#cabin_status .titles h3,
#cabin_status .titles .fap-h3{
	font-size: 24px;
	text-align: center;
	color: #fff;
	margin:5px 0;
}
.page-title{
	text-align: center;
	color: #fff;
}

.fap .header{
	width: 100%;
	position: absolute;
	z-index: 400;
	top: 0;
	padding: 15px 0;
}
.fap .footer{
	width: 100%;
	position: absolute;
	bottom: 0;
	padding:0;
}
.footer-btns{
	text-align: center;
	border: 4px solid #b2b9bd;
	border-bottom: 0;
	background: #808080;
	border-radius: 4px;
	padding:14px 0 20px 0;
	margin-bottom:-5px;
}

.btn{
	background-color: #e6e6e6;
	font-size: 13px;
	font-weight: bolder;
	line-height: 60px;
	width: 60px;
	height: 60px;
	color: #000;
	padding: 0;
	border:1px solid #000;

}

.btn.dln{
	line-height: 15px;
	padding-top: 15px;
}

.btn.tln{
	line-height: 15px;
	padding-top: 7px;
}

/* Neutralize site-wide .btn:hover effects (translateY + box-shadow from main.css)
   inside the FAP trainer so hardware buttons don't visually shift on hover. */
.fap .btn:hover,
.fap .btn:focus{
	transform: none;
	box-shadow: none;
}

.btn.active{background-color: #09de09;cursor: pointer}
.btn.disabled{background-color: #595959;cursor: initial;opacity: 1}

.warn-on{
	background-color: #ffba27;
}

.warn{
  -webkit-animation: alert 1s infinite;
  -moz-animation: alert 1s infinite;
  -o-animation: alert 1s infinite;
  animation: alert 1s infinite;
}

.lt_control{
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24);
	background-color: #5b686f;
	width: 220px;
	margin:5px 0;
	padding: 10px 0;
	text-align: center;
}

.lt_control .title{
	font-size: 1.2rem;
	color: #fff;
}

.lt_control .controls{
	width: 90%;
	margin: auto;
}

.lts{
	position: relative;
	height: 100%;
	text-align: center;
}

.lts .entry{
	position: absolute;
	margin: 5px 20px;
	height: 20px;
    width: 55%;
    -webkit-transition: background-color 600ms linear;
    -ms-transition: background-color 600ms linear;
    transition: background-color 600ms linear;
}

.lts .sc{
	position: absolute;
	margin: 5px 20px;
	min-height: 90px;
    width: 55%;
    -webkit-transition: background-color 600ms linear;
    -ms-transition: background-color 600ms linear;
    transition: background-color 600ms linear;
}


.lts #fwd_entry{top: 80px;}
.lts #aft_entry{bottom:70px;}
.lts #sc-bz{top: 105px;}
.lts #sc-ec{bottom:95px;height: 355px;}
.lts #sc-single{top: 105px;height: 450px;}
.lts #sc-ctd-single{top: 105px;height: 420px;}

.lts .brt{background-color: #efef0b;}
.lts .dim1{background-color: #c1c108;}
.lts .dim2{background-color: #989807;}


.door_label{
	font-size: 20px;
	color: #fff;
}

#doors-page h5,
#doors-page .fap-h5{font-size: 20px;}
#doors-page h5.armed,
#doors-page .fap-h5.armed{display: none;}
#doors-page .title{
	width: 220px;
	height: 30px;
	color:#ffba27;
}

#doors .dr{
	position: absolute;
	width: 10px;
	height: 27px;
	transition: all 0.2s ease-in-out;
	border: 1px solid #000;
}

.dleg{
	background-color: #09de09;
	border: 1px solid #000;
	height: 19px;
	width: 10px;
}

.dleg.dleg-open{
	background-color: #d20000;
}

#doors .dr{background-color: white;}
#doors .dr.open{background-color: white !important;}
#doors .dr.openD{display: none;}

#doors .dr-w{
	background-color: #09de09;
	border: 1px solid #000;
	height: 19px;
}

#doors .dr.armed{background-color: #09de09;}
#doors .dr.disarmed{background-color: #ffba27;}

#doors #L1{top:75px;left: 7px;transform: rotate(13deg);}
#doors #L1-open{top:50px;background-color: #d20000;}

#doors #R1{top:75px;left: 72px;transform: rotate(-13deg);}
#doors #R1-open{top:50px;left: 0;background-color: #d20000;}

#doors #L2{top:537px;left: 8px;transform: rotate(-6deg);}
#doors #L2-open{top:511px;left: -5px;background-color: #d20000;}

#doors #R2{top:539px;left: 72px;transform: rotate(6deg);}
#doors #R2-open{top:511px;left: 84px;background-color: #d20000;}

#doors #WL1{top:293px;}
#doors #WL1-open{top:293px;background-color: #d20000;}

#doors #WL2{top:319px;}
#doors #WL2-open{top:319px;background-color: #d20000;}

#doors #WR1{top:293px;left: 79px;}
#doors #WR1-open{top:293px;left: 79px;background-color: #d20000;}

#doors #WR2{top:319px;left: 79px;}
#doors #WR2-open{top:319px;left: 79px;background-color: #d20000;}

.tmps{
	position: relative;
}

.tmps .tm{
	background-color: #0c9aff;
    line-height: 250px;
    font-weight: bold;
    font-size: 19px;
	position: absolute;
	margin: 5px 18px;
	height: 250px;
    width: 60%;
    -webkit-transition: background-color 600ms linear;
    -ms-transition: background-color 600ms linear;
    transition: background-color 600ms linear;
}

.tmps #fwd{top:80px;}
.tmps #aft{top:335px;}

.label-tmp{
	color: #000;
    background-color: #b8f5ff;
    width: 75px;
    font-size: 20px;
    margin: auto;
    padding: 6px 5px;
}

.msg-section{
	background-color: #0303c9;
	width: 100%;
	height: 200px;
	color: #eddd10;
	padding: 10px;
	border-radius: 5px;
	font-size: 16px;
	width: 89%;
}

.wnw_btns{
	width: 10%;
	padding: 0;
}

.block{
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24);
	background: #868585;
    color: #fff;
    width:100%;
    text-align: center;
    padding: 10px 5px;
    opacity: 1;
    transition:opacity 0.3s linear;
}

.zone{
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24);
	background: #868585;
    color: #fff;
    width: 350px;
    position: absolute;
    right: 0;
    text-align: center;
    padding: 10px 5px;
    opacity: 1;
    transition:opacity 0.3s linear;
}
.zone.hide{display: none;}

.zone h5,
.zone .fap-h5{
	margin-top: 20px;
	font-size: 16px;
	font-weight: normal;
}

.zone.area-control{height: 510px;}
.zone.reset{top:50px;}
.b-t-n{margin:10px 0;}


/* Thermometer column and text */
.thermometer{
    margin:10% 0 0 50%;
    width:40px;
    height:350px;
    display:block;
    background: -webkit-linear-gradient(top, #fff 0%, #fff 57%, #0b18ad 57%, #0d085d 100%);
    border-radius:22px 22px 0 0;
    border:5px solid #4a1c03;
    border-bottom:none;
    position:absolute;
    box-shadow:inset 0 0 0 4px #fff;
    color:#4a1c03;
    z-index: 200;
}

/* Thermometer Bulb */
.thermometer:before{
    content:' ';
    width:80px;
    height:80px;
    display:block;
    position:absolute;
    top:325px;
    left: -25px;
    z-index:100; /* Place the bulb under the column */
    background:#0d085d;
    border-radius:44px;
    border:5px solid #4a1c03;
    box-shadow:inset 0 0 0 4px #fff;
}

/* This piece here connects the column with the bulb */
.thermometer:after{
    content:' ';
    width:20px;
    height:20px;
    display:block;
    position:absolute;
    top:320px;
    left:4px;
    background:#0d085d;
    z-index: 200;
}

.thermometer .marks{
	margin-left: -75px;
   	font-size: 18px;
	color: #fff;
}
.thermometer .marks div{margin:8px 0;}

.thermometer .marks .n:after{
	content: '-';
	margin-left:5px;
}

.needle_holder{
	background-color: #89dfff;
    width: 30px;
    height: 80px;
    position: absolute;
    margin-left: 36px;
    top: 160px;
}
.needle_holder:after{
	content: ' ';
    border-top: 3px solid #000;
    width: 100%;
    height: 2px;
    position: absolute;
    left: 0;
    top: 47%;
}

.needle{
	position: absolute;
	width: 0;
    height: 0;
    margin-top: 25px;
    margin-left: 10px;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-right: 20px solid green;
    z-index: 200;
}

#water-page h3,
#water-page .fap-h3{
	color: #fff;
	font-size: 18px;
	text-align: center;
}

.tank{
	position: relative;
	width: 190px;
    height: 250px;
    border: 2px solid #8c8c8c;
    margin: 20px auto;
    background-color: #c5c5c5;
}
.tank .level{
	position: absolute;
	width: 100%;
	bottom: 0;
	z-index: 100;
	transition: all 0.7s ease-in-out;
}
.waste-tank .level{
	background: rgb(129,129,129);
	background: linear-gradient(180deg, rgba(129,129,129,1) 0%, rgba(108,108,108,1) 100%);
}

.water-tank .level{
	background: rgb(48,0,198);
	background: linear-gradient(180deg, rgba(48,0,198,1) 0%, rgba(15,0,136,1) 100%);
}

.form-control-range{
	overflow: hidden;
	width: 100%;
	margin-top: 10px;
    -webkit-appearance: none;
    background-color: #fff;
}

.form-control-range::-webkit-slider-runnable-track {
      height: 15px;
      -webkit-appearance: none;
    }

.form-control-range::-webkit-slider-thumb{
      -webkit-appearance: none;
      width:15px;
      height: 15px;
      background: #c2dada;
    }

#waste-selector::-webkit-slider-thumb {box-shadow: -300px 0 0 300px #6c6c6c;}
#water-selector::-webkit-slider-thumb {box-shadow: -300px 0 0 300px #3000c6;}

.tank .marks{
	color: #fff;
    font-size: 15px;
    z-index: 200;
    position: absolute;
    margin-top: -47px;
    margin-left: -41px;
}
.tank .marks div{margin:8px 0;}
.tank .marks .n:after{
	content: '-';
	margin-left:5px;
}

.lav{
	position: absolute;
	background-color: #fff;
	width: 13px;
	height: 13px;
}
.lav.smoke{background-color: #d20000;}


.lav .smoke-label{
	display: none;
    background: #d20000;
    position: absolute;
    margin-left: -70px;
    padding: 2px;
    color: #fff;
    width: 60px;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
}
.lav .smoke-label.r{margin-left: 40px;}

#lav_a{top: 103px;left: 110px;}
#lav_d{top: 607px;left: 102px;}
#lav_e{top: 607px;left: 150px;}

#smoke-page .row .col:nth-child(3){
	position: relative;
}

#smoke_cabin_sensor_fault{
	display: none;
	border: 2px solid #fff;
    text-align: center;
    color: #fff;
    width: 150px;
    position: absolute;
    top: 210px;
    left: 45px;
    letter-spacing: 2px;
}

.smoke-on{
  -webkit-animation: ambar_blink 1s infinite;
  -moz-animation: ambar_blink 1s infinite;
  -o-animation: ambar_blink 1s infinite;
  animation: ambar_blink 1s infinite;
}

.red.emerg-on{
  -webkit-animation: red_blink 1s infinite;
  -moz-animation: red_blink 1s infinite;
  -o-animation: red_blink 1s infinite;
  animation: red_blink 1s infinite;
}

.pink.emerg-on{
	-webkit-animation: pink_blink 1s infinite;
	-moz-animation: pink_blink 1s infinite;
	-o-animation: pink_blink 1s infinite;
	animation: pink_blink 1s infinite;
}

.red-flashing{
  -webkit-animation: redF_blink 1s infinite;
  -moz-animation: redF_blink 1s infinite;
  -o-animation: redF_blink 1s infinite;
  animation: redF_blink 1s infinite;
}

.smk-panel{
	position: absolute;
	top: 210px;
	right: 20px;
	display: none;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24);
	background: #868585;
    color: #fff;
    width: 120px;
    text-align: center;
    padding: 10px 5px;
}

.smk-lt{
	content: ' ';
	display: block;
	width: 12px;
	height: 12px;
	margin: 5px auto;
	background-color: #d20000;
	border:1px solid #000;
	-webkit-animation: smk_blink 1s infinite;
	-moz-animation: smk_blink 1s infinite;
  	-o-animation: smk_blink 1s infinite;
  	animation: smk_blink 1s infinite;
}

.smk-label{
	position: relative;
	background-color: #d20000;;
	font-weight: bold;
	margin: 10px 0;
}

.sensor-fault{
	display: none;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24);
	background: #868585;
	color: #fff;
	width: 120px;
	text-align: center;
	padding: 10px 5px;
}

.sensor-fault-panel{
	position: absolute;
	top: 390px;
	right: 20px;
	display: none;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24);
	background: #868585;
	color: #fff;
	width: 120px;
	text-align: center;
	padding: 10px 5px;
}

.sensor-fault-lt{
	content: ' ';
	display: block;
	width: 12px;
	height: 12px;
	margin: 5px auto;
	background-color: #ffa827;
	border:1px solid #000;
}

.sensor-fault-label{
	position: relative;
	color: #ffa827;
	font-weight: bold;
	margin: 10px 0;
	line-height: 1rem;
}

#fap-msg{
	position: absolute;
    background: #c2dada;
    z-index: 500;
    font-size: 14px;
    font-weight: bold;
    padding: 4px;
    color: #000;
    width: 70%;
    top: -35px;
    left: 15%;
    border: 4px solid #82868a;
    border-top: 0;
	transition:top 0.5s ease-in-out;
	visibility: hidden;
}
#fap-msg.show{top:7px;visibility: visible;}

.bgm{
    width: 80px;
    text-align: center;
    margin:auto;
}

.bgm p{
    color: #fff;
    font-weight: 400;
    font-size: 20px;
    margin:10px 0;
}

.bgm .status{
	color: #000;
	font-weight: bold;
	background-color: #b8f5ff;
	display: block;
    width: 80%;
    margin: auto;
	padding: 10px 15px;
	box-shadow: inset 2px 2px 2px 1px #000, 2px 2px 2px 1px #ffffff38;
}



.bgm-panel{
	box-shadow: 0 4px 12px rgb(0 0 0 / 12%), 0 1px 4px rgb(0 0 0 / 24%);
    background: #868585;
    color: #fff;
    padding: 15px;
}

.bgm-panel p{
	font-size: 16px;
	text-align: center;
	margin: 0;
}
.bgm-panel .pnl{
	margin:0;
}
.bgm-panel .col{
	padding: 0 1px;
	text-align: center;
}
#audio-page h3,
#audio-page .fap-h3{
	font-size: 24px;
	text-align: center;
	color: #fff;
}

.vlin{
	width: 80%;
	margin:auto;
	border:1px solid #000;
	box-shadow: inset 3px 3px 3px 2px #000, 3px 3px 3px 2px #ffffff38;
}

.vlin .vlbd{
	height: 10px;
	background-color: #b8f5ff;
	border-top:1px solid #000;
}
.vlin .vlbd:first-child {border:0;}
.vlin .vlbd.on{background-color: #0f0088;}

.other_panels{
	position: absolute;
	top: 0;
	right: -600px;
	width: 600px;
	height: 1000px;
	background: #808080;
}
#acp{
	width: 240px;
	height: 60px;
	position: absolute;
	top: 0px;
	left: calc(50% - 120px);
	z-index: 600;
	transition:all 0.3s linear;
}

#acp.show{top:0px;}

#acp #amber{border-bottom-left-radius: 10px;}
#acp #amber.on{background-color:#ffa827;box-shadow: 0 0 5px 5px #ffa827;z-index: 800;}
#acp .red.on{background-color:#d20000;box-shadow: 0 0 5px 5px #d20000;z-index: 800;}
#acp .pink.on{background-color: #fc519a;box-shadow: 0 0 5px 5px #fc519a;z-index: 800;}
#acp #blue{border-bottom-right-radius: 10px;}
#acp #blue.on{background-color:#2020ca;box-shadow: 0 0 5px 5px #2020ca;}

.acpLT{
	background-color: #fbf8f1;
	box-shadow: inset 0 0 15px 4px #eaeaea;
	width: 60px;
	height: 60px;
}

#aip{
    position: absolute;
    z-index: 600;
    background: #a9a2a1;
    width: 380px;
    bottom: 20px;
    right: 110px;
    border:20px solid #fefbfc;
    border-radius: 10px;

	transition:bottom 0.5s ease-in-out;
}

#aip .aipnl{
	display: flex;
    align-items: center;
}
#aip .ld{
	margin:auto;
	width: 10px;
	height: 20px;
	background-color: #403d3d;
}

#red-ld.on{background-color: #d20000;}
#green-ld.on{background-color: #09de09;}

#red-ld.emerg-on{
  -webkit-animation: red_blink 1s infinite;
  -moz-animation: red_blink 1s infinite;
  -o-animation: red_blink 1s infinite;
  animation: red_blink 1s infinite;
}

#aip #display{
	background-color: #299453;
	text-align: center;
	font-family: LCD;
	font-size: 16px;
	line-height: 16px;
	width: 60%;
	margin:auto;
	padding: 5px;
}

#aip .scts{
	height: 20px;
	padding: 0;
}

.footer-controls{
	padding: 8px;
}

.nav-bar-container{
    border: 4px solid #b2b9bd;
    border-bottom: 0;
    background: #808080;
    border-radius: 15px;
	padding: 4px 5px 11px 5px;
    margin: 0 auto;
    margin-bottom: -15px;
	width: 80%;
}

.nav-bar{
	background: #d4f8f8;
	width: 100%;
	height: 12px;
	position: relative;
	bottom: auto;
	left: auto;
	border-radius: 15px;
	margin: 0 auto 8px auto;
}

.nav-bar .current-bar{
	background: #09de09;
	height: 10px;
	width: 50%;
	position: absolute;
}

.nav-bar .current-bar.left{
	left: 0;
}

.right-menu{
	display: none;
}

/* legacy – kept for compat */
.trainer-menu{
	font-size: 1.2rem;
}

.arrow-right {
	margin:5px auto;
	width: 40px;
	height: 22px;
	border-top: 22px solid transparent;
	border-bottom: 22px solid transparent;
	border-left: 40px solid #000;
}

.arrow-left {
	margin: 8px auto;
	width: 40px;
	height: 22px;
	border-top: 22px solid transparent;
	border-bottom: 22px solid transparent;
	border-right: 40px solid #000;
}


.nav-bar .current-bar.right{
	right:0;
}

#subpanel .btn.emer{
	color: white;
	background: #ca0707;
}

.emer-led{
	display: block;
	background: #b31c1c;
	width: 15px;
	height: 8px;
	margin: 0 auto;
	margin-top: 5px;
	margin-bottom: 0;
}

.emer-led.on {
	background: #ff0000;
	box-shadow: 0 0 3px 6px #eb444463;
}

#system_info{
	max-width: 95%;
	margin: auto;
	height: 650px;
}

#system_info .msg-section{
	width: 100%;
	height: 605px;
	color: #20f30a;
}

#system_info .big-box{
	width: 89%;
	padding: 0;
}

#system_info .small-box{
	width: 10%;
	padding: 0;
}

#system_info .triangle{
	width: 0;
	height: 0;
	margin: 10px;
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-right:20px solid #ffe508;
}

#sysinfo_error{
	width: 800px;
	height: 680px;
	position: absolute;
	left: 160px;
	padding-top: 250px;
}

#fap-setup{
	width: 600px;
	height: 500px;
	margin: 0 auto;
	margin-top: 140px;
}

#fap-setup-alternate{
	position: absolute;
	right: 20px;
	bottom: -30px;
	display: flex;
}

.indicator .buttons .btn{
	display: block;
}

.indicator{
	width:100px;
	margin:auto;
}
.indicator .bar{
	position: relative;
	display: block;
	background-color: #b8f5ff;
	width: 20px;
	margin: 0 5px;
	box-shadow: inset 1.5px 1.5px 1.5px 1.5px #000, 1.5px 1.5px 1.5px 1.5px #ffffff38;
}

.indicator .bar .ind{
	position: absolute;
	width: 100%;
	bottom: 0;
	height: 80%;
	background: #0f0088;
}

.volumen_box{
	display: block;
	color: #000;
	font-weight: bold;
	background-color: #b8f5ff;
	max-width: 50px;
	margin: 10px auto;
	padding: 10px;
	box-shadow: inset 2px 2px 2px 1px #000, 2px 2px 2px 1px #ffffff38;
}

#code-box{
	width: 300px;
	height: 400px;
	margin: 140px auto;
	position: absolute;
	z-index: 800;
	left: 450px;
}

#code-box .screen{
	display: block;
	color: #000;
	font-weight: bold;
	background-color: #b8f5ff;
	margin: 10px auto;
	margin-top:30px;
	padding: 10px;
	box-shadow: inset 2px 2px 2px 1px #000, 2px 2px 2px 1px #ffffff38;
	width: 185px;
	height: 35px;
}

#layout-selector-box{
	margin: auto;
	margin-top:70px;
	width: 750px;
	height: 600px;
}

#layout-selector-box .white-box{
	background: #fff;
	width: 100%;
	height: 540px;
	box-shadow: inset 2px 2px 2px 1px #000, 2px 2px 2px 1px #ffffff38;
	color: #000;
	text-align: left;
}

#layout-selector-box .white-box .cell:not(last-child){
	height: 77px;
	border-bottom: 1px solid #00000052;
}
#layout-selector-box .white-box .cell{
	display: flex;
	justify-content: space-between;
	padding: 10px;
	line-height: 15px;
}

.white-box .cell .layout-info {
	flex: 2;
}

.white-box .cell .layout-date {
	flex: 1;
	text-align: right;
}

.level-bar{
	margin: 5px 10px;
	width: 150px;
	height: 6px;
	background-color: #181c4e;
	border-radius: 20px;
	border-top: 3px solid #9a9cd6;
}

/* Tablet / small screens – align with internal_layout.css breakpoint (991px) */
@media (max-width: 991px){
	.dashboard.-home-9{
		margin-top:0;
		padding-top:0;
	}

	/* Sidebar slides off-screen; hamburger toggles it */
	.dashboard.-home-9 .fap-sidebar{
		width: 300px;
		margin-top: 0;
	}

	.dashboard__main {
		margin-left: 0 !important;
		padding-left: 0 !important;
		padding-top: 0px !important;
	}

	.b-container {
		height: 100vh;
	}
}

@-webkit-keyframes ambar_blink{
  	50%{
  		z-index: 800;
  		background-color:#ffa827;
		box-shadow: 0 0 5px 5px #ffa827;
	}
	0%{
		background-color: #fbf8f1;
		box-shadow: none;
	}
}

@-webkit-keyframes red_blink{
  	50%{
  		z-index: 800;
  		background-color:#d20000;
		box-shadow: 0 0 5px 5px #d20000;
	}
	0%{
		background-color: #fbf8f1;
		box-shadow: none;
	}
}

@-webkit-keyframes pink_blink{
	50%{
		z-index: 800;
		background-color:#fc519a;
		box-shadow: 0 0 5px 5px #fc519a;
	}
	0%{
		background-color: #fbf8f1;
		box-shadow: none;
	}
}

@-webkit-keyframes redF_blink{
  	50%{
  		color: #d20000;
    	text-shadow: 0 0 3px #d20000;
	}
	0%{
		color: inherit;
    	text-shadow: none;
	}
}

@-webkit-keyframes alert{
  0%, 49% {
    background-color: #ffba27;
  }
}

/* ========================================
   Kiosk start overlay
   ======================================== */
.fd-kiosk-start-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(8, 20, 51, 0.92);
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.fd-kiosk-start-overlay.hide {
	display: none;
}
.fd-kiosk-start-card {
	background: var(--color-fd-blue-4, #081433);
	border: 1px solid var(--color-fd-blue-3, #112151);
	border-radius: 16px;
	padding: 40px 32px;
	width: 100%;
	max-width: 420px;
	text-align: center;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.fd-kiosk-start-card__icon {
	width: 72px;
	height: 72px;
	margin: 0 auto 20px;
	background: rgba(165, 190, 0, 0.12);
	border: 1px solid rgba(165, 190, 0, 0.3);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-fd-green-4, #a5be00);
	font-size: 28px;
}
.fd-kiosk-start-card__title {
	font-family: Voltaire, sans-serif;
	font-size: 2rem;
	color: #fff;
	margin: 0 0 12px;
}
.fd-kiosk-start-card__hint {
	font-size: 15px;
	color: rgba(249, 255, 230, 0.7);
	margin: 0 0 28px;
	line-height: 1.45;
}
.fd-kiosk-start-card .btn {
	width: 100%;
	height: auto;
	min-height: 54px;
	line-height: 1.4;
	border-radius: 10px;
	padding: 16px 24px;
	font-size: 16px;
	font-weight: 600;
	color: #081433;
	background: var(--color-fd-green-4, #a5be00);
	border: none;
	box-shadow: none;
	transition: filter 0.2s ease, transform 0.15s ease;
}
.fd-kiosk-start-card .btn:hover,
.fd-kiosk-start-card .btn:focus {
	filter: brightness(1.08);
	transform: translateY(-1px);
	box-shadow: none;
}
.fd-kiosk-start-card .btn i {
	margin-right: 8px;
}

/* Variant for the connection-lost overlay (same style, different z-order) */
.fd-connection-lost-overlay {
	z-index: 99998;
}

.fd-kiosk-start-card__actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.fd-kiosk-start-card__icon--error {
	background: rgba(239, 68, 68, 0.12);
	border-color: rgba(239, 68, 68, 0.3);
	color: #ef4444;
}

/* Override admin_brand .btn-primary / .btn-ghost inside the kiosk card */
.fd-kiosk-start-card .btn.btn-primary {
	color: #081433;
	background: var(--color-fd-green-4, #a5be00);
	border: none;
}
.fd-kiosk-start-card .btn.btn-primary:hover,
.fd-kiosk-start-card .btn.btn-primary:focus {
	filter: brightness(1.08);
	transform: translateY(-1px);
}

.fd-kiosk-start-card .btn.btn-ghost {
	background: transparent;
	color: rgba(249, 255, 230, 0.9);
	border: 1px solid rgba(249, 255, 230, 0.35);
}
.fd-kiosk-start-card .btn.btn-ghost:hover,
.fd-kiosk-start-card .btn.btn-ghost:focus {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(249, 255, 230, 0.6);
	transform: translateY(-1px);
}

/* Sidebar FAB now shared via internal_layout.css (.trainer-sidebar-fab) */