*{
			box-sizing: border-box;
			margin: 0;
			padding: 0;
			font-size: 11px;
			color: darkslategray;
			transition: 0.2s !important;
			font-family:  sans-serif;
		}
		body{
			background: #eef2f7;
			min-height: 100vh;
		}
		.simulator-wrap{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			padding: 70px 16px 40px;
			min-height: 100vh;
		}
		.phone{
			margin: 0 auto;
			height: 550px;
			width: 270px;
			border:5px solid white;
			position: relative;
			border-radius: 30px;
			background: black;
			box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
		}
		.top{
			position: absolute;
			top:5px;
			height: 40px;
			width: 240px;
			left: 10px;
			text-align: center;
		}
		.top .mic{
			height: 5px;
			width: 60px;
			border-radius: 5px;
			border:1px solid green;
			margin-top: 10px;
			margin-bottom: 10px;

		}
		.top label{
			font-weight: bold;
		}
		.screen{
			position: absolute;
			top: 50px;
			left: 10px;
			width: 240px;
			height: 440px;
			border:0px solid green;
			background: white;
			z-index: 1;

		}
		.screen .bar{
			height: 20px;
			width: 100%;
			
			background: royalblue;
		}
		.screen .iconsPage,.screen .ussd{
			height: 420px;
			width: 100%;
			background: green;
			padding: 10px;
			z-index: 0;
			position: relative;

		}
		.iconsPage{
			border:none !important;
			display: block;
			background: url('../images/back.jpeg') !important;
			background-repeat: no-repeat;
			background-size: cover !important; 
		}
		.screen .ussd{
			background: #e2e8f0 !important;
			padding: 0 !important;
			display: none;
			height: 420px;
			overflow: hidden;
			position: relative;
		}
		.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;

		}
		.screen .iconsPage .icons:hover{
			cursor: pointer;
		}
		.btm{
			position: absolute;
			bottom: 5px;
			left: 10px;
			width: 240px;
			height: 50px;
			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;

		}
		.circleBtn{
			border:2.5px solid white !important;
			border-radius: 20px !important;
			color: ;
		}
		.keyboard{
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			background: #fff;
			padding: 8px 0 6px;
			z-index: 40;
			box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
		}
		.keyboard .row button{
			width: 30%;
			height: 30px;
			border:none;
			font-size: 22px;
			margin-bottom: 8px;
			background: none;
			cursor: pointer;
			color: #1e293b;
		}
		.keyboard .row button:hover{
			opacity: 0.7;
		}
		.send{
			font-size: 14px !important;
			border-radius: 50% !important;
			border:0px solid red !important;
			height: 48px !important;
			width: 48px !important;
			background: url('../images/playstore-icon.png') !important;
			background-size: 100% 100% !important;
			cursor: pointer;
			color: transparent !important;
		}
		.dial-row{
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 6px;
			width: 100%;
			padding: 0 8px 10px;
			box-sizing: border-box;
		}
		.dial-display{
			flex: 1 1 auto;
			min-width: 0;
			background: #f8fafc;
			border: 1px solid #94a3b8;
			border-radius: 10px;
			padding: 8px 10px;
			text-align: center;
			box-shadow: inset 0 1px 2px rgba(15,23,42,0.06);
		}
		.dial-label{
			display: block;
			font-size: 9px !important;
			letter-spacing: 0.12em;
			color: #64748b !important;
			font-weight: 700;
			margin-bottom: 4px;
			line-height: 1;
		}
		.keyboard .input,
		input.input{
			border: none !important;
			outline: none !important;
			background: #ffffff !important;
			width: 100% !important;
			max-width: 100%;
			height: 34px !important;
			line-height: 34px !important;
			text-align: center !important;
			font-size: 20px !important;
			font-weight: 700 !important;
			letter-spacing: 0.06em;
			color: #0f172a !important;
			padding: 0 4px !important;
			margin: 0 !important;
			display: block !important;
			border-radius: 6px;
			box-sizing: border-box;
			-webkit-appearance: none;
			appearance: none;
		}
		.keyboard .input:focus,
		input.input:focus{
			color: #1d4ed8 !important;
			box-shadow: 0 0 0 2px rgba(37,99,235,0.25);
		}
		.delete{
			border: none;
			cursor: pointer;
			background-color: #fee2e2;
			color: #b91c1c !important;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 38px;
			height: 38px;
			border-radius: 50%;
			font-size: 15px !important;
			font-weight: 700;
			flex-shrink: 0;
		}
		.delete:hover{
			background-color: #fecaca;
		}
		/* USSD response dialog on the phone screen */
		.ussd > center{
			display: block;
			width: 100%;
			height: 100%;
			position: relative;
		}
		.result{
			display: none;
			flex-direction: column;
			position: absolute;
			left: 12px;
			right: 12px;
			top: 12px;
			width: auto;
			max-width: none;
			min-height: 150px;
			max-height: 250px;
			z-index: 120;
			background: #ffffff;
			border: 1px solid #cbd5e1;
			border-radius: 10px;
			overflow: hidden;
			box-shadow: 0 10px 24px rgba(15,23,42,0.22);
			padding: 0;
			text-align: left;
		}
		.result.is-visible{
			display: flex !important;
		}
		.result.compact{
			max-height: 160px;
			top: 8px;
		}
		.result .textOutput{
			position: relative;
			top: auto;
			left: auto;
			flex: 1 1 auto;
			width: 100%;
			min-height: 90px;
			max-height: 170px;
			overflow-y: auto;
			overflow-x: hidden;
			padding: 12px 12px 8px;
			font-size: 13px !important;
			line-height: 1.45;
			color: #0f172a !important;
			white-space: normal;
			word-break: break-word;
			text-align: left !important;
			background: #fff;
		}
		.result .resultInputs{
			position: relative;
			bottom: auto;
			flex: 0 0 auto;
			width: 100%;
			padding: 8px 10px 10px;
			background: #f8fafc;
			border-top: 1px solid #e2e8f0;
			box-sizing: border-box;
		}
		.result .resultInput{
			display: block !important;
			width: 100% !important;
			height: 32px !important;
			line-height: 32px !important;
			border: 1px solid #94a3b8 !important;
			border-radius: 6px;
			background: #ffffff !important;
			margin: 0 0 8px !important;
			padding: 0 8px !important;
			font-size: 14px !important;
			color: #0f172a !important;
			outline: none;
			box-sizing: border-box;
			-webkit-appearance: none;
			appearance: none;
		}
		.result .resultInput:focus{
			border-color: #2563eb !important;
			box-shadow: 0 0 0 2px rgba(37,99,235,0.2);
		}
		.result .resultInputs button{
			border: none;
			color: #1d4ed8 !important;
			background: transparent;
			font-weight: 700;
			font-size: 12px !important;
			float: right;
			margin-left: 12px;
			margin-right: 0;
			cursor: pointer;
			padding: 4px 2px;
		}
		.result .endSession{
			position: static;
			float: right;
			margin: 0 10px 10px 0;
			border: none;
			background: transparent;
			font-weight: 700;
			cursor: pointer;
			color: #1d4ed8 !important;
			font-size: 12px !important;
		}
		.loading{
			position: absolute;
			height: 40px;
			width: 160px;
			border:0px solid green;
			top: 200px;
			left: 40px;
			z-index: 9999;
			background: 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: 3px 0px 5px 5px rgba(0,0,0,0.21);
		}
		.loader{
			height: 30px;
			width: 30px;
			background: transparent;
			display: inline-block;
			border-radius: 50%;
			margin-left: 10px;
			border:5px solid transparent;
			border-top:5px solid green;
			border-right:5px solid green;
			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;
		}
		.result .resend,
		.result .cancel{
			color: #1d4ed8 !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;
		}
		.phone{
			border: 5px solid rgba(0,0,0,0.09) !important;
		}
		.tempCont,.codes{
			position: absolute;top: 70px;left: 420px;height: 550px;width: 450px;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: 13px 21px 22px 19px rgba(0,0,0,0.09);
		}
		.codes{
			border-radius: 0 !important;
			left: 420px !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: 350px;
			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 darkorchid;
		}
		.settings h1{
			font-size: 24px;
		}
		.form .row{
			margin-top: 20px;
		}
		.form .row input{
			width: 95%;
			margin-bottom: 10px;
			height: 25px;
			border: none;
			border-bottom-color: currentcolor;
			border-bottom-style: none;
			border-bottom-width: medium;
			outline: none;
			border-bottom: 1px solid green;
			padding-left: 0px;
			color: #4169e1;
			margin-left: 5%;
		}
		.form .row input:focus{
			border-bottom: 1px solid darkblue;
		}
		.form .row4 button{
			height: 30px;
			width: 120px;
			border:none;
			outline: none;
			background-color: transparent;
			border: 1px solid #4169e1;
			border-radius: 20px;
			cursor: pointer;
			color: #4169e1;
		}
		.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;
		}
		.phone .volume{
			height: 100px;
			width: 7px;
			background: rgba(0,0,0,0.9);
			border:1px solid transparent;
			position: absolute;
			top: 100px;
			left: -7px;
			border-radius: 2px;
		}
		.phone .power{
			height: 50px;
			width: 7px;
			background: rgba(0,0,0,0.9);
			border:1px solid transparent;
			position: absolute;
			top: 120px;
			right: -7px;
			border-radius: 2px;
		}
		.endSession{
			position: static;
			border: none;
			background: transparent;
			font-weight: 700;
			margin: 0 10px 10px 0;
			float: right;
			cursor: pointer;
			color: #1d4ed8 !important;
			font-size: 12px !important;
		}
		.copy{
			border:none;
			background: transparent;
			font-weight: bold;
			margin-right: 10px;
			cursor: pointer;
			color: #4169e1 !important;
			margin-top: -10px;
		}
		.nav{
			height: 48px;
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 20;
			background-color: white;
			box-shadow: -1px 6px 9px -4px rgba(0,0,0,0.06);
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20px;
		}
		.nav h1{
			padding: 0;
			font-size: 14px;
		}
		.nav-project{
			font-size: 12px;
			font-weight: 700;
			color: #4338ca;
			background: #eef2ff;
			padding: 4px 10px;
			border-radius: 999px;
		}
		.home-project-label{
			color: white;
			margin-top: -40px;
			margin-bottom: 40px;
			font-size: 12px;
			letter-spacing: 1px;
			font-weight: 700;
			text-shadow: 0 1px 2px rgba(0,0,0,0.35);
		}
		.tempCo{
			margin-top: 18px;
			text-align: center;
		}
		.tempCo button{
			border: 1px solid #4338ca;
			background: #fff;
			color: #4338ca;
			padding: 8px 16px;
			border-radius: 999px;
			cursor: pointer;
			font-size: 12px;
			font-weight: 700;
		}
		.tempCo button:hover{
			background: #eef2ff;
		}
		ul{
			position: absolute;
			top: 10px;
			right: 30px;

		}
		ul li{
			display: inline;
			margin-right: 10px;
		}
		a{
			text-decoration: none;
		}
		.colorCont{
			position: absolute;top: 0;left: 0;width: 100%;height: 250px;background:  cornflowerblue
		}
		.colorCont h1{
			color: white;font-size: 20px;font-weight: 10;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: white;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;
		}