		/* LIEN D'ENCRYPTAGE: https://www.phpkobo.com/css-obfuscator */
		
	*{
		box-sizing: border-box;
		margin: 0;
		padding: 0;
		font-size: 13px;
		transition: 0.2s !important;
		font-family:  sans-serif;
	}
		
	body,html{
		width:100%;
		height:100%;
		background:#fff;
	}
	#wrapper{
		width:100%;
		height:100%;
		position:relative;
	}
	.phone{
		width: 20%;
		min-width:300px;
		min-height:550px;
		height: 80%;
		border: 1px solid #000;
		border-radius: 35px;
		/* margin: 3% auto; */
		margin: 3%;
		background-color: #000;
		box-shadow: 0px 5px 10px #444;
		position: relative;
	}
	.phone .powerButton{
		position: absolute;
		top: 56px;
		width: 5px;
		height: 50px;
		background-color: #222;
		border-radius: 5px 0px 0px 5px;
		left: -5px;
	}
	.phone .volumeRocker{
		position: absolute;
		top: 125px;
		width: 5px;
		height: 50px;
		background-color: #222;
		border-radius: 5px 0px 0px 5px;
		left: -5px;
	}
	.phone .phoneBorder{
		width: 98%;
		height: 98%;
		background-color: #242424;
		border-radius: 27px;
		margin: 5px auto;
		position:relative;
	}
	.phone .phoneBorder .cameraCirlce{
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background-color: #111;
		position: absolute;
		top: 25px;
		left: 43px;
	}
	.phone .phoneBorder .cameraCirlce .camerLens{
		width: 12px;
		height: 12px;
		border-radius: 50%;
		background-color: #444;
		margin: 4px;
		-webkit-animation:light 2s infinite 0s;
		-moz-animation:light 2s infinite 0s;
		animation:light 2s infinite 0s;
		-webkit-transition:all 0.5s cubic-bezier(0.4,0,0.4,-0.4);
		-webkit-transition:all 0.5s cubic-bezier(0.4,0,0.4,-0.4);
		-webkit-transition:all 0.5s cubic-bezier(0.4,0,0.4,-0.4);
	}
	.phone .phoneBorder .boomSound{
		text-align:center;
	}

	.phone .phoneBorder .boomSound ul{
		list-style:none;text-align:center;
	}
	.phone .phoneBorder .boomSound ul li{ 
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background-color: #3B3B3B;
		display: inline-block;
		margin: 15px 5px;
		box-shadow: 0px 2.5px 5px inset;
	}
	.phone .phoneBorder .screenShot{
		width: 100%;
		height: 87%; 
		color:#e4e4e4;
		text-align:center;
		background-color: #000;
	}
	.phone .phoneBorder .screenShot .ledLight{
		width: 5px;
		height: 5px;
		border-radius: 50%;
		background-color: #FF0;
		position: relative;
		margin-left: 18%;
		top: 10px;
		-webkit-animation:light 2s infinite 0s;
		-moz-animation:light 2s infinite 0s;
		animation:light 2s infinite 0s;
		-webkit-transition:all 0.5s cubic-bezier(0.4,0,0.4,-0.4);
		-webkit-transition:all 0.5s cubic-bezier(0.4,0,0.4,-0.4);
		-webkit-transition:all 0.5s cubic-bezier(0.4,0,0.4,-0.4);
	}
	
	@keyframes light{
		to{ background-color:#F00;}
	}
	@-webkit-keyframes light{
		to{ background-color:#F00;}
	}
	@-moz-keyframes light{
		to{ background-color:#F00;}
	}
	.phone .phoneBorder .screenShot .screeWallpaper{
		width: 100%;
		height: 81%;
		background-color: #111;
		margin-top: 5px;
	}

	.phone .phoneBorder .screenShot .screeWallpaper img{
		width:100%;
		height:100%;
	}
	.phone .phoneBorder  .screenShot .logo{
		padding:10px; font-family:'logo';
	}
		
	.screen {
		position: absolute;
		top: 52px;
		left: 5px;
		width: 293px;
		height: 440px;
		border: 0px solid green;
		z-index: 1;
	}
	.screen .bar{
		height: 12px;
		width: 100%;
	}
	@media screen and (min-width: 1536px) {
		.screen .iconsPage,.screen .ussd {
			height: 420px;
			width: 96%;
			background: green;
			padding: 10px;
			z-index: 0;
			position: absolute;
			right: 6px;
		}
		ul{
			position: absolute;
			top: 10px;
			right: 53px;

		}
	}
	@media screen and (max-width: 1535px) {
		.screen .iconsPage,.screen .ussd {
			height: 420px;
			width: 280px;
			background: green;
			padding: 10px;
			z-index: 0;
			position: absolute;
			right: 9px;
		}
		ul{
			position: absolute;
			top: 10px;
			right: 47px;

		}
	}
	.iconsPage{
		border:none !important;
		display: block;
		background: url('../images/back.jpg') !important;
		background-repeat: no-repeat;
		background-size: cover !important; 
	}
	.screen .ussd{
		background: #242424 !important;
		padding: 0 !important;
		display: none;
		height: 420px;
		border: 1px solid #736767;
	}
	.screen .iconsPage .icons {
		height: 60px;
		width: 60px;
		border: 0px solid white;
		background: none;
		display: inline-flex;
		margin-left: 10px;
		text-align: center !important;
		padding-top: 17px;
		padding-left: 13px;
		color: #4169e1;
		font-weight: bold;
		letter-spacing: 1px;
		box-shadow: 4px 10px 5px 8px rgb(0,5,5,0.30);
		margin-top: 78px;
	}
	.screen .iconsPage .icons:hover{
		cursor: pointer;
	}
	.btm{
		position: absolute;
		bottom: -9px;
		left: 14px;
		width: 280px;
		height: 65px;
		border: none;
		text-align: center;
	}
	.btm button{
		border:1px solid green;
		background: transparent;
		border-radius: 1px;
		box-sizing: content-box;
		padding: 4px 9px;
		width: 22%;
		margin-top: 15px;
		cursor: pointer;
		border:none;
		color: white;
		font-weight:bold;

	}
	.circleBtn{
		border:1px solid white !important;
		border-radius: 20px !important;
		color: ;
	}
	.keyboard{
		position: absolute;
		bottom: -2px;
		width: 100%;
		background: #242424;
		padding-top: 10px;
		border-bottom: 0px solid green;
		bottom: 0;
		-webkit-box-shadow: 1px -6px 8px 5px rgba(0,0,0,0.06);
		-moz-box-shadow: 1px -6px 8px 5px rgba(0,0,0,0.06);
		box-shadow: 1px -6px 8px 5px rgba(0,0,0,0.06);

	}
	.keyboard .row button{
		width: 30%;
		height: 27px;
		font-size: 24px;
		margin-bottom: 10px;
		background: none;
		cursor: pointer;
		color: black;
		border-style: groove;
		border-color: black;
	}
	.keyboard .row button:hover{
		opacity: 0.7;
		color: white;
		border-style: groove;
		border-color: silver;
	}
	.send{
		font-size: 14px !important;
		border-radius: 50% !important;
		border:0px solid red !important;
		height: 50px !important;
		width: 50px !important;
		background:;
		background: url('../images/playstore-icon.png') !important;
		background-size: 100% 100% !important;
		cursor: pointer;
		color: white !important;

	}
	.input{
		border: none;
		outline: none;
		border-bottom: 1px solid silver;
		background: #242424;
		padding-left: 5px;
		display: inline;
		margin-left: 3%;
		width: 86%;
		height: 23px;
		font-weight: bold;
		font-size: 16px;
		color: #dad6d6;
	}
	.input:focus{
		border-bottom: 1px solid gray !important;
	}
	.result .resultInputs .delete {
		word-break: break-all;
		border: none;
		cursor: pointer;
		background-color: black;
		display: inline;
		color: white;
		font-weight: bold;
		border-radius: 3px;
		padding: 2px;
		margin-top: 0;
		margin-left: 2px;
	}
	.result .resultInputs .buttons-container {
		display: flex;
		gap: 10px;
		margin-left: 132px;
	}
	.result{
		min-height: 160px;
		height: 233px;
		width: 245px;
		margin-left: 0px;
		border: 0px solid #000;
		position: absolute;
		left: 18px;
		/* top: 10px; */
		top: 50px;
		z-index: 100;
		background: #3b3939;
		display: none;
		-webkit-box-shadow: 3px 5px 5px 5px rgba(0,0,0,0.31);
		-moz-box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.31);
		box-shadow: 2px 2px 7px 4px rgb(0,0,0,0.31);

	}
	.result .textOutput{
		position: absolute;
		top: 0px;
		left: 15px;
		height: 200px;
		width: 225px;
		border: 0px solid lightgray;
		padding: 8px;
		font-size: 13px;
		color: #dbd9d9 !important;
	}
	.result .resultInputs {
		height: 45px;
		width: 100%;
		position: absolute;
		bottom: 0;
		padding-bottom: 5px;
		display: flex;
		align-items: center;
		justify-content: space-between; /* Ajouté */
		padding-right: 10px; /* Ajouté pour la marge à droite */
	}

	.result .resultInput {
		border: none;
		outline: none;
		border-bottom: 1px solid silver;
		margin-bottom: 5px;
		width: 83%;
		height: 23px;
		padding-left: 3px;
		font-weight: bold;
		font-size: 16px;
		color: white;
		background: #3b3939;
		display: inline;
		margin-left: 7%;
	}
	.result .resultInput:focus .keyboard{
		
		border:5px solid yellow;
	}
	.result .resultInputs button {
		border: none;
		background: transparent;
		font-weight: bold;
		cursor: pointer;
	}
	.loading{
		position: absolute;
		height: 39.5px;
		width: 250px;
		border:0px solid green;
		/* top: 200px; */
		top: 365px;
		left: 22px;
		z-index: 9999;
		background: black;
		color: white;
		border-radius: 0px;
		display: none;
		-webkit-box-shadow: 3px 0px 5px 5px rgba(0,0,0,0.21);
		-moz-box-shadow: 3px 0px 5px 5px rgba(0,0,0,0.21);
		box-shadow: 1px 1px 5px 2px rgb(0,0,0,0.21);
	}
	.loader{
		height: 30px;
		width: 30px;
		background: transparent;
		display: inline-block;
		border-radius: 50%;
		margin-left: 10px;
		border:3px solid transparent;
		border-top:3px solid gray;
		border-right:3px solid gray;
		margin-top: 6px;
		animation-name: loader;
		animation-duration: 1s;
		animation-delay: 0s;
		animation-timing-function: linear;
		animation-iteration-count: infinite;
		animation-direction: ;

	}
	@keyframes loader{
		100%{
			transform: rotate(360deg);
		}
	}
	.textOutput{
		text-align: left !important;
	}
	.resend {
		/* color: #04b630 !important; */
		color: #FFFFFF !important;
	}
	.cancel{
		/* color: #FF4500 !important; */
		color: #FFFFFF !important;
	}
	.time{
		margin-top: 60px;
		margin-bottom: 200px;
		height: 70px;
		background-color: none ;
		border-radius: 100px;
		border:0px solid white;
		opacity: 1;
		color: black;
	}
	.time h1{
		padding-top: 30px;
		font-size: 35px;
		line-height: 10px;
		font-weight: 700;
		color: white;
		text-shadow: rgba(61, 61, 61, 0.3) 1px 1px, rgba(61, 61, 61, 0.2) 2px 2px, rgba(61, 61, 61, 0.3) 3px 3px;
	}
	pre[class*="language-"].line-numbers {
		position: relative;
		padding-left: 0px !important;
		counter-reset: linenumber;
	}
	.tempCont,.codes{
		position: absolute;
		top: 70px;
		left: 420px;
		height: 530px;
		width: 605px;
		background: white;
		border-radius: 20px;
		overflow: hidden;
		-webkit-box-shadow: 13px 21px 22px 19px rgba(0,0,0,0.04);
		-moz-box-shadow: 13px 21px 22px 19px rgba(0,0,0,0.09);
		box-shadow: rgba(0, 0, 0, 0.2) 13px 21px 22px 19px;
	}
	.codes{
		border-radius: 0 !important;
		left: 500px !important;
		right: 10px !important; 
		width: 450px !important;
		padding-left: 0px !important;
		display: none;
	}
	pre{
		padding-left: -20px !important;
	}
	code{
		padding-left: -20px !important;
	}
	.tempCont{
		display: block;
	}
	.settings{
		max-height: 400px;
		width: 505px;
		margin-left: 50px;
		display: ;
		border:0px solid green;
		background-color: white;
		position: absolute;
		top: 140px;
		-webkit-box-shadow: 13px 21px 22px 19px rgba(0,0,0,0.04);
		-moz-box-shadow: 13px 21px 22px 19px rgba(0,0,0,0.04);
		box-shadow: 13px 21px 22px 19px rgba(0,0,0,0.04);
		padding: 30px;
		border-radius: 10px;
		border-top: 5px solid darkorange;
	}
	.settings h1{
		font-size: 24px;
		color: black;
	}
	.form .row{
		margin-top: 20px;
	}
	.form .row input{
		display: block;
		width: 100%;
		padding: 0.375rem 0.75rem;
		font-size: 1rem;
		line-height: 1.5;
		color: #495057;
		background-color: #fff;
		background-clip: padding-box;
		border: 1px solid #ced4da;
		border-radius: 0.25rem;
		transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
		margin-top: 5px;
	}
	.form .row input:focus{
		border-bottom: 1px solid darkblue;
	}
	.form .row4 button{
		height: 30px;
		width: 120px;
		border:none;
		outline: none;
		background: linear-gradient(143deg, orangered, transparent);
		border: 1px solid orangered;
		border-radius: 20px;
		cursor: pointer;
		color: #000000;
		width: 100%;
		font-size: 15px;
		font-weight: bold;
		margin-top: 30px;
	}
	.form .row4 button:hover{
		background: orange;
		border: 1px solid orange;
		color: #000000;
	}
	.alert, .alertMsg{
		height: 40px;
		border:1px solid green;
		background:green;
		text-align: left;
		margin-top: 10px;
		margin-bottom: 10px;
		display: none;

	}
	.alertMsg{
		border:1px solid red ;
		background: rgb(200,20,20,0.8);


	}
	.alertMsg p,.alert p{ 
		color: white !important;
	}
	.alert p,.alertMsg p{
		font-size: 16px;
		padding-top: 10px;
		padding-left: 20px;
	}
	.endSession{
		position: absolute;
		bottom: 10px;
		right: 0;
		border:none;
		background: transparent;
		font-weight: bold;
		margin-right: 10px;
		cursor: pointer;
		color: white !important;
	}
	.copy{
		border:none;
		background: transparent;
		font-weight: bold;
		margin-right: 10px;
		cursor: pointer;
		color: #4169e1 !important;
		margin-top: -10px;
	}
	.nav{
		height: 40px;width: 100%;position: fixed;top: 0;left: 0;font-weight: bold;background-color: #4169e1;box-shadow:-1px 6px 9px -4px rgba(0,0,0,0.06)
	}
	.nav h1{
		padding-top: 10px;padding-left: 30px;
	}
	ul li{
		display: inline;
		margin-right: 10px;
	}
	a{
		text-decoration: none;
	}
	.colorCont{
		position: absolute;top: 0;left: 0;width: 100%;height: 250px;background:  #4169e1
	}
	.colorCont h1{
		color: white;font-size: 25px;font-weight: bold;padding-top: 30px;padding-left: 60px;
	}
	.colorCont p{
		font-size: 16px;color: white;padding-left: 60px;margin-top: 20px;
	}
	.codes .header{
		position: absolute;top: 0px;left: 0;width: 100%;height: 10%;border-bottom: 1px solid white;background: #6495ed;
	}
	.codes .header h1{
		color: black;padding-top: 20px;padding-left: 10px;
	}
	.codes .container{
		height: 90%;position: absolute;bottom: 0;left: 0;width: 100%;overflow-y: scroll;padding-top: -5px;background-color: #272822;
	}
	.codes .header button{
		float: right;margin-left: 10px;
		color: green !important;
	}
	.footer {
		margin-left: auto;
		margin-right: auto;
		padding: 14px;
		font-family: serif;
		font-size: 15px;
		/* text-align: center; */
	}