:root{
	--main-bg-color : #2f4050;
	--secondary-bg-color : #162738;
	--main-color : #efefef;
	--main-color-hover : #ccc;
}
.success{
	background : green;
}
.error{
	background : red;
}
.ast-modal{
	position : fixed;
	top : 0;
	left : 0;
	width : 100%;
	height : 100%;
	background-color : rgba(0,0,0,0.5);
}
.ast-modal-content{
	position : absolute;
	top : 50%;
	left : 50%;
	transform : translate(-50%,-50%);
	width : 50%;
	height : 50%;
	background-color : white;
	cursor : pointer;
}
.ast-modal-close{
	position: absolute;
    top: -12px;
    right: -12px;
    background: #870000b8;
    border-radius: 100%;
    padding: 1px 9px;
    font-size: 18px;
    color: white;
    text-shadow: 1px 1px #870000;
}
#bandeau_holder {
	height : 150px;
	border-bottom: 1px solid #1d3557;
	margin-bottom: 10px;
}
body{
	display : flex;
	overflow : hidden;
}
/* Reset des marges et paddings par défaut */
body, h1, h2, h3, p {
  margin: 0;
  padding: 0;
}

	/* Style général de la page */
	body {
	font-family: Arial, sans-serif;
	display: grid;
	grid-template-columns: auto 1fr; /* Sidebar de 250px et le reste pour le contenu */
	grid-template-rows: auto 1fr; /* Bandeau de 60px et le reste pour le contenu */
	grid-template-areas:
		"sidebar bandeau"
		"sidebar content";
	height: 100vh; /* Hauteur de la fenêtre visible */
	}


	#menu {
			grid-area: sidebar;
			background-color: var(--main-bg-color);
			color: #ccc;
			height: 100vh;
			width: 250px;
		}

		#main-container{
			display : flex;
			flex-direction : column;
			height : calc(100vh - 150px);
			overflow-y : overlay;
			min-width: 100%;
		}
		.content{
			border-top: none;
			display : flex;
			height : -webkit-fill-available;
			flex-direction : column;
				height : 100%;
		}

		.reveal-on-readonly{
			display : none;
		}
		.form-readonly{

		}
		.form-readonly input,.form-readonly select,.form-readonly .hide-on-readonly{
			display : none;
		}
		.form-readonly .reveal-on-readonly{
			display : block;
		}		
		.form-readonly i.reveal-on-readonly{
			display : inline-block;
		}

		.form-readonly .active_0{
			/* display : none; */
		}
		#profile span.tel_about{
			font-weight: bold;
			background: #22837a;
			color: white;
			padding: 0.2em;
			text-shadow: 1px 1px black;
			border-radius: 6px;
			box-shadow: 0 0 7px -2px black;
			font-size: 2em;
			display: block;
			width: fit-content;
			margin: 19px;
		}
		#profile span.tel_about i{
			margin-right : 15px;
		}
		.content{
			padding: 2em;
			border: 1px solid #e5e5e5;
			margin: 0em 2rem 2rem 2rem;
			background: white;
			border-radius: 0 4px 4px 4px;
			border-top: none;
			box-shadow: 0px 0px 7px -4px black;
		}
		.login-error{
			display : none;
		}

		.loading-link{
			position: relative;
			font-family: "Font Awesome 5 Duotone";
			font-weight: 900;
		}
		.loading-link:before {
			content: "\f3f4";
		}
		.loading-link:after {
			content: "\10f3f4";
		}
		.icon-success{
			color : green;
		}
		.icon-error{
			color : #c10000;
		}
		.loading-spinner{
			font-size: 10vh;
			width: 10vh;
			height: 15vh;
			align-self: center;
		}

		.loading-spinner:before,
		.loading-spinner:after {
			font-family: "Font Awesome 5 DuoTone";
			position: absolute;
			animation: gravity-rotation 1s infinite linear;
		}
		.loading-spinner:before {
			content: "\f3f4";
			z-index : 0;
			color : #346fa7;
		}

		.loading-spinner:after {
			color: #8dc8ff;
			z-index : 1;
			content: "\10f3f4";
		}

		.loading-spinner>*{
			display : none;
		}
		@keyframes gravity-rotation {
			0% {
				transform: rotate(0deg);
			}
			18% {
				transform:  rotate(45deg);
			}			
			28% {
				transform:  rotate(180deg);
			}
			42%{
				transform:  rotate(270deg);
			}
			57% {
				transform: rotate(315deg);
			}			
			100% {
				transform: rotate(360deg);
			}
		}
		.loading-spinner.gravity>*{
			display : block;
			animation: gravity-rotation 1s infinite linear;
		}
		#remote_holder{
			width : 0;
			height : 0;
			position : absolute;
		}
		#remote{
			position : fixed;
			top : 0;
			left : 0;
			background-color : white;
			z-index : 10;
			width : 250px;
			background : var(--secondary-bg-color);
		}
		.retractable_header,.retractable_body{
			padding : 0.5em;
		}
		#remote.retracted .retractable_body{
			display : none;
		}
		#remote.retracted .remote-maximize,#remote:not(.retracted) .remote-minimize{
			display : block;
		}		
		#remote:not(.retracted) .remote-maximize,#remote.retracted .remote-minimize{
			display : none;
		}
		.retractable_header{
			background : var(--main-bg-color);
			color : var(--main-color);
		}
		.retractable_header *{
			display : flex;
		}
		.retractable_header{
			display : flex;
			justify-content : space-between;
		}
		.retractable_body .button{
			color: white;
			border: 1px solid white;
			width: fit-content;
			border-radius: 3px;
			color: #333;
			margin: 5px;
			display: inline-block;
		}
		.retractable_body .button>a{
			display: inline-block;
			background : lightgray;
			color : #333;
			padding: 2px 8px;
		}
		.retractable_body .button.simulation_ringing>a{
			background : violet;
			color : #333;
		}		
		.retractable_body .button.simulation_call>a{
			background : orange;
			color : #333;
		}		
		.retractable_body .button.simulation_call_processing>a{
			background : yellow;
			color : #333;
		}
		.retractable_body .button.pause>a{
			background : violet;
			color : #333;
		}
		.retractable_body .button.traitedoss>a{
			background : yellow;
			color : #333;
		}		
		.retractable_body .button.unpause>a{
			background : #98d9ff;
			color : #333;
		}
		.retractable_body .button.attente>a{
			background : #111;
			color : orange;
		}
		.retractable_header{
			cursor : grab;
		}
		#remote.dragging .retractable_header{
			cursor : grabbing;
		}
		
		#tab-list {
			margin:0rem 2rem;
			padding: 8px 3px 0px 3px;
    background: #dee1e6;
    border-radius: 5px 5px 0 0;
		}
		
		.tab-open-wrapper{
			cursor : pointer;
			transition: all 150ms linear;
			box-shadow: 0px 0px 7px -4px black;
			font-size: 20px;
			display: inline-block;
			background: #dde0e5;
			/* border: 1px solid red;*/
			padding: 0 9px;
			border-radius: 5px 5px 0px 0px;
			color: #212529;
		}
		
		.tab-open-wrapper:hover{
			.ast-tab-close {
					visibility : visible;
				}
		}
		
		.tab-open-wrapper.active{
			cursor : default;
			background : white;
			/* border-color : black; */
			.ast-tab-close {
					visibility : visible;
				}
			
		}
		.tab-wrapper{
			display : flex;
		}
	
		
		.ast-tab-close {
			visibility: hidden;
			transition: all 150ms linear;
			color: #212529;
			--fa-secondary-color: #ffffff;
			font-size: smaller;
		}
		.ast-tab-close:hover {
			cursor : pointer;
			--fa-primary-color: #ffffff;
			--fa-secondary-color: #ff0000; --fa-secondary-opacity: 0.8;
		}
		
		.tabs-bottom-bar {
			position: absolute;
			bottom: 0;
			height: 4px;
			left: 0;
			width: 100%;
			background: #fff;
			z-index: 10;
		}
		
		/* test */
		.chrome-tabs .chrome-tab .chrome-tab-background {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			overflow: hidden;
			pointer-events: none;
		}
		
		.tab-name>.fa-megaphone {
			 animation: megaphone-animation 7s infinite;
		}
		.tab-name>.fa-phone-volume {
			 animation: phone-volume-animation 7s infinite;
		}
		@keyframes phone-volume-animation {
			0% {
				--fa-secondary-color: #acafb4;
			}
			50% {
				--fa-secondary-color: #ffd880;
			}
			100% {
				--fa-secondary-color: #acafb4;
			}
		}
		@keyframes megaphone-animation {
			0% {
				--fa-secondary-color: #acafb4;
			}
			50% {
				--fa-secondary-color: #ffd880;
			}
			100% {
				--fa-secondary-color: #acafb4;
			}
		}
.wssDebug{
    position:fixed;bottom:0;right:0;
     background-color:rgba(0,0,0,0.5);
     color:white;
     padding:10px;
     font-size:12px;
     z-index:9999;
     height : 250px;
      overflow : auto
}

#remote{
    left: 0px; top: 500px;
}
}.argos-wrapper{

}
.argos-img{
	width : 50px;
}
.argos-link {
	display: flex;
    padding: 5px;
    border: 1px solid #c375ff;
    color: #8704cc;
    width: fit-content;
    font-weight: bold;
    border-radius: 5px;
	justify-self: center;
	 box-shadow: 1px 1px 1px #8704cc, inset 0px 0px 3px #ff6900;
	 
}
.argos-link:hover{
	color: #8704cc;
	box-shadow: inset 1px 1px 3px #8704cc, inset 0px 0px 3px #ff6900;
	text-decoration : none;
}
.argos-img{
	 transition: all 200ms linear;
}
.argos-link:hover>.argos-left>.argos-img{
    transform: rotate(40deg);
    transition: all 200ms linear;
}


.argos-link:hover>.argos-right>.down::first-letter{
    color : #ff6900;
    transition: color 1000ms linear;
}


.argos-right{
	display: flex;
    flex-direction: column;
	    align-self: center;
}

.argos-right>.up::first-letter{
	/* color : #ff6a02;	 */
}
.loading .argos-img{
	animation: 1.5s pendulum-spin infinite;
	transform-origin: center;
}
.loading {
	filter : grayscale(1) opacity(0.7);
	cursor : progress;
}
.argos-error{
	filter: hue-rotate(60deg) opacity(0.3);
	cursor : not-allowed;
}
.loading:hover, .argos-error:hover{
	box-shadow: 1px 1px 1px #8704cc, inset 0px 0px 3px #ff6900;
}


@keyframes pendulum-spin {
  0% {
    transform: rotate(0deg);
    animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); /* accélération */
  }
  50% {
    transform: rotate(180deg);
    animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1); /* décélération */
  }
  100% {
    transform: rotate(360deg);
  }
}
}