@import "/clientside/css/fonts/kanit/stylesheet.css";
:root{
	--head-heigth: 50px;
	--border-width: 2px;
	--title-width: 210px;
	--title-decroche: 30px;
	--color-intru: #cc2e2f;
	--color-intru2: #7b1b1c;
	--color-intrusion: #3d4144;
	--color-intrusion3:#434343;
	--color-rover:#ccc22f;
	--color-btn-drone-interceptor:#1c4434;
	--color-drone-interceptor: #008542;

}
body{
	background: url("/clientside/images/bg.jpg") repeat top left / 20%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	font-family: kanit, sans-serif;
	font-weight: 400;
}
header{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: var(--head-heigth);
	background: #2d3035;
	box-shadow: 0 2px 7px 0 #000000e3;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 10px;
}
.logo{
	font-size: 32px;
	font-weight: 700;
	color: #fff;
}
.logo span{
	color: #254c6a;
}
.menu{
	color: #fff;
	font-weight: bold;
	cursor: pointer;
}

main{
	height: 100%;
	padding: var(--head-heigth) 0 0 0;
}
section{
	height: 100%;
	position: relative;
	padding: 5px;
	display: flex;
}
section > div{
	height: 100%;
	padding: 5px;

}
.center{
	width: 50%;
}
.side{
	width: 25%;
}
.tile{
	min-height: 250px;
	/*background: #008542;*/
	clip-path: polygon(var(--title-width) var(--title-decroche), calc(var(--title-width) + var(--title-decroche)) 0, 100% 0, 100% 100%, var(--title-decroche) 100%, 0 calc(100% - var(--title-decroche)), 0 var(--title-decroche));
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
}
.tile-bg{
	position: absolute;
	width: calc(100% - calc(var(--border-width) * 2));
	height: calc(100% - calc(var(--border-width) * 2));
	background: #2d3035;
	clip-path: polygon(var(--title-width) var(--title-decroche), calc(var(--title-width) + var(--title-decroche)) 0, 100% 0, 100% 100%, var(--title-decroche) 100%, 0 calc(100% - var(--title-decroche)), 0 var(--title-decroche));
	top: var(--border-width);
	left: var(--border-width);
}
.center .tile-bg{
	/*background: #2d3035 url("../../clientside/images/fondcarte.png") no-repeat 50% calc(50% + 30px) /124%;*/
	background: #2d3035 url("../../clientside/images/fondcarte.png") no-repeat 50% calc(50% + 30px) /275%;
}
.tile-box{
	position: relative;
}
.tile-box:not(:first-child){
	margin: 10px 0 0 0;
}
.tile-content{
	z-index: 2;
	position: relative;
	padding: var(--border-width);
}
.tile-box-center .tile-content{
	height: 100%;
}
.radar {
	height: calc(100% - calc(var(--title-decroche) - var(--border-width)));
}
.panelData{
	padding: 0 0 32px;
}
.title{
	height: calc(var(--title-decroche) - var(--border-width));
	line-height: calc(var(--title-decroche) - var(--border-width));
	padding: 0 0 0 5px;
	color: #fff;
	font-weight: 600;
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.title-dot{

	height: calc(var(--title-decroche) - calc(var(--border-width) * 6));
	width: calc(var(--title-decroche) - calc(var(--border-width) * 6));
	margin: 0 5px 0 0;
	border-radius: 50%;
	background: #008542;
}

/* Partie intru Alpha */
/*.tile-right.tile{*/
/*	background: var(--color-intru);*/
/*}*/
/*.title-dot-right.title-dot{*/
/*	background: var(--color-intru);*/
/*}*/

.connexion {
	display: flex;
	justify-content: end;
	margin-top: -20px;
	margin-right: 50px;
	color: #ffff;
	font-weight: bold;
}
/* Partie Intrusion en cours */
.tile-box-center{
	position: relative;
	height: 100%;
}

.tile-center.tile {
	height: 100%;
	background: var(--color-intrusion);

}

.title-intru-center{
	background-color: var(--color-intru2);

}
.fa-radar{
	position: absolute;

}
.live-radar{
	margin-left: 20px;
}

.btn-intrusion{
	height: 40px;
	border: 1px solid #2d3035 ;
	color: #fff;
	font-weight: bold;
	width: 115px;
	border-radius: 2px;
	cursor: pointer;
}
.btn-intrusion.btn-vert{
	outline: 3px solid #46775f ;
	background-color: #349c69fc;
}
.btn-intrusion:hover{
	box-shadow: inset 0 0 200px 0 #303439;

}
.button-intrusion{
	position: absolute;
	bottom: 20px;
    justify-content: space-around;
	align-items: center;
	background-color: var(--color-intrusion3);
	border-radius: 10px;
	height: 80px;
	margin: 0 0 0 -360px;
	width: 720px;
	left: 50%;
	display: none;
	z-index: 200;
	box-shadow: 0 2px 6px 0 #0000009a;
}
.name-display{
	--width: 200px;
	--oblique: 22px;
	position: absolute;
	top: -24px;
	left: 50%;
	width: var(--width);
	margin: 0 0 0 calc(-1 * var(--width) / 2);
	padding: 5px 0;

	text-align: center;
	color: #fff;
	line-height: 14px;
	clip-path: polygon(var(--oblique) 0%, calc(100% - var(--oblique)) 0%, 100% var(--oblique), 100% 100%,  0 100%,  0 var(--oblique));
}
.button-intrusion.visible{
	display: flex;
}
.title-intru-center {
	position: absolute;
	top: 12%;
	left: 50%;
	height: 80px;
	justify-content: center;
	align-items: center;
	margin: -85px 0 0 -200px;
	width: 400px;
	z-index: 120;
	clip-path: polygon(30px 0%, calc(100% - var(--title-decroche)) 0%, 100% var(--title-decroche), 100% calc(100% - var(--title-decroche)), calc(100% - var(--title-decroche)) 100%, 30px 100%, 0% calc(100% - var(--title-decroche)), 0 30px);
	display: none;
}
.title-intru-center.visible{
	display: flex;
}
.title-intrusion {
	color: #fff;
	font-size: 20px;
	font-weight: bold;
}

.btn-intrusion.btn-orange{
	background-color: #855e00;
	outline: 3px solid #767346 ;

}
.btn-intrusion.btn-red{
	background-color:#ca2e2fcc;
	outline: 3px solid #784647;

}


/*Partie rover interceptor*/

.tile-rover.tile{
	margin-top: 10px;
	min-height: 90px;
	/*background: var(--color-rover);*/
}
/*
/*.title-dot-rover.title-dot{*/
/*	background: var(--color-rover);*/

/*}*/
.offline{
	display: flex;
	justify-content: center;
	margin-top: 15px;
	color: #fff;
	font-size: 18px;
	font-weight: bold;
}

/*intru alpha*/
.indicators-1{
	margin-top: 20px;
	display: flex;
	justify-content: space-around;
	color: #fff;


}
.data-indicator{
	font-weight: bold;
	font-size: 22px;
}
.data-indicator span{
	font-size: 15px;
}
.button-drone-interceptor{
	display: flex;
	justify-content: space-around;


}
.btn-drone{
	background-color: var(--color-btn-drone-interceptor);
	border: 1px solid #2d3035 ;
	outline: 2px solid #077841 ;
	cursor: pointer;
	color: #fff;
	font-weight: bold;
	font-size: 11px;
}

.btn-drone:hover{
	box-shadow: inset 0 0 200px 0 #303439;


}
.btn-drone.btn-1{
	width: 110px;
	height: 35px;

}
.btn-info{
	width: 30px;
}


.fa-satellite{

}
#canvas-intrusion{
	width: 100%;
	height: 100%;
}

/* retour caméra */

.canvas-retour-camera{
	border: 3px solid red;
	display: flex;
	justify-content: center;
	margin: 20px;

}
.hidden{
	display:none;
}

.drone-yellow{
	background: var(--color-rover);
}
.drone-green{
	background: var(--color-drone-interceptor);

}
.drone-red{
	background: var(--color-intru);

}
.intrusion-pop{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	background: #7b1b1cef;
	color: #fff;
	display: none;
	text-align: center;
}
.intrusion-pop.visible{
	display: flex;
	align-items: center;
	justify-content: center;
}
.intrusion-pop.visible h1{
	font-size: 60px;
	font-weight: 700;
}

.intrusion-btn, .btn-terminer{
	width: fit-content;
	margin: 10px auto;
	padding: 10px 25px;
	border: 2px solid transparent;
	background: #ffffffa0;
	color: #333;
	outline: 2px solid #ffffffa0;
	background-clip: padding-box;
	cursor: pointer;
	transition: .3s;

	font-weight: 700;
	letter-spacing: .8px;
}
.intrusion-btn:hover, .btn-terminer:hover{
	background: #ffffffe0;
	background-clip: padding-box;
}
.liste-interceptor{
	padding: 30px 0;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
}
.intrusion-tile {
	min-height: 150px;
	padding: 10px;
	border: 2px solid #fff;
	width: 200px;
}
.intrusion-tile-action{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100px;
}
.intrusion-tile-name{
	border-bottom: 2px solid #fff;
	padding: 0 0 5px 0;
	margin: 0 0 5px 0;
	text-transform: uppercase;
}
.popup-modal{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2000;
	background: #00000066;
	align-items: center;
	justify-content: center;
	display: none;
}
.popup-modal.visible{
	display: flex;
}
.popup{
	height: calc(100% - 40px);
	width: calc(100% - 40px);
	max-width: 500px;
	max-height: 110px;
	background: #333;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	box-shadow: 0 2px 7px 0 #000000e3;
}
.popup > div{
	padding: 10px 25px;
	border: 2px solid #fff;
	color: #FFF;
	cursor: pointer;
}
.popup > div:hover{
	background: #ffffff33;
}