box$cursor-duration: 10s;
$animation-timing: cubic-bezier(0.445, 0.05, 0.55, 0.95);

.timeline {
	background: grey;
	height: 5px;
	.line {
		background: red;
		height: 5px;
		width: 0%;
		animation: timeline $cursor-duration linear both;
		border-radius: 2px;
	}
}
@keyframes timeline {
	to {
		width: 100%;
	}
}
.botn1{
	background: none;
	border: solid 1px #7ea4bf;
	border-radius: 30px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 1px;
	padding-top: 1;
	margin-right: 4px;
	margin-left: 4px;
	text-decoration-line: none;
	text-decoration-color: none;
	color: #000;
	font-weight: bold;
	font-size: 13px;
}
.tabledemande{
	background-color: #195e8d;
	color: #fff;
}
.btp{
	background-color: #fff;
	color: #000;
	font-weight: bold;
	border: solid 1px #7ea4bf;
}
.btp1{
	background-color: #195e8d;
	color: #fff;
	font-weight: bold;
	border: solid 1px #195e8d;
}
.offres{
	background-color: #fff; 
	border-radius: 10px;
	box-shadow: 0px 2px 3px #eee;
	border: solid 5px #f4f4f5;
	transition: all 0.2s ease-out;
}
.offres:hover{
	border: solid 1px #195e8d;
}
.offres img{
	border-radius: 5px;
}
.offres h5{
	padding-top: 5px;
	padding-bottom: 5px;
	color: #195e8d;
}
.btp:hover{
	background-color: #195e8d;
	color: #fff;
	font-weight: bold;
	border: solid 2px #195e8d;
}
.btp1:hover{
	background-color: #fff;
	color: #195e8d;
	font-weight: bold;
	border: solid 2px #7ea4bf;
}
.botn1:hover{
	background-color: #7ea4bf;
	color: #000;
	box-shadow: 2px 0px 2px 0px #eee;
}
.botn1:hover a{
	color: #fff;
	font-weight: bold;
	font-size: 15px;
}
.botn1active{
	background-color: #7ea4bf;
	color: #fff;
	box-shadow: 2px 0px 2px 0px #eee;
	border: solid 1px #7ea4bf;
	border-radius: 30px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 1px;
	padding-top: 1;
	font-size: 15px;

}
@media (max-width: 780px) {

.laptop {
        display: none;
}
}
@media (min-width: 790px) {

.mobile {
        display: none;
}
}
.botn1active a{
	color: #fff;
	font-weight: bold;
}
.botn1active:hover a{
	color: #fff;
	font-weight: bold;
	font-size: 15px;
}
.Backform{
        margin-top: 10px;
        background-color: #fcfcfc; 
        border-radius: 5px;
        padding: 20px;
        margin-right: 10px;
        margin-top: -50px;
        border: solid 1px #eee;
}
.boxservice{
	background-color: #fff;
	box-shadow: 0px 4px 4px #f4f4f4;
	color: #195e8d;
	height: 290PX;
	transition: all 0.5s ease-out;
	border: solid 1px #7ea4bf;
	margin-top: 10px;
	text-align: center;
}
.ft a{
	color: #000;
	font-weight: bold;
}
.boxservice p{
	color: #000;
	font: 17px arial, sans-serif;
}
.boxservice h4{
	color: #000;
}
.lienspied a.l{
	text-align: left;
	color:#8c8c8c;
	text-decoration-line: none;
	font-size: 13px;
	border-left: solid 5px #434343;
	padding-left: 5px;
}
.lienshead a{
	text-align: left;
	color:#000;
	font-weight: bold;
	text-decoration-line: none;
	font-size: 17px;
	padding-left: 5px;
	margin-bottom: 15px;
	display: block;
}
.lienshead a:hover{
	text-align: left;
	color:#fff;
	font-weight: bold;
	text-decoration-line: none;
	background-color: #7ea4bf;
	padding: 6px;
	border-radius: 0px;
	margin-right: -15px;
	margin-left: -15px;


}
.lienspied a{
	text-align: left;
	color:#8c8c8c;
	font-size: 13px;
	text-decoration-line: none;
}
.lienspied a:hover{
	text-align: left;
	color:#fff;
	font-weight: bold;
	text-decoration-line: none;
}
.tooglenav{
        background-color: #fff;
        border-radius: 5px;
        position: fixed;
        margin-top: 20px;
        padding-left: 30px;
        width: 20%;
        height: 730px;
}
.nav-pilla {
  --bs-nav-pilla-border-radius: var(--bs-border-radius);
  --bs-nav-pilla-link-active-color: #fff;
  --bs-nav-pilla-link-active-bg: #195e8d;
  --bs-nav-pilla-link-active-sty: bold;
}
.nav-pilla .nav-link {
  border-radius: var(--bs-nav-pilla-border-radius);
}
.nav-pilla .nav-link.active,
.nav-pilla .show > .nav-link {
  color: var(--bs-nav-pilla-link-active-color);
  background-color: var(--bs-nav-pilla-link-active-bg);
  font-weight: var(--bs-nav-pilla-link-active-sty);
}
.alinkadmin a{
        font-size: 16px;
        display: block;
        width: 100%;
        color: #195e8d;
        border-left: solid 8px #eee;
        padding-left: 15px;
        margin-top: 5px;
}
.alinkadmin a:hover, a:active{
        color: #fff;
}
.alinkadmin a:hover, a:active, a:focus{
        color: #fff;
}
.alinkadmin{
        font-size: 22px;
        display: block;
        width: 100%;
        color: #195e8d;
}
.alinkadmin:hover{
        background-color: #7ea4bf;
        border-radius: 8PX;
        font-weight: bold;
        color: #fff;
}
.alinkadmin:active{
        background-color: #195e8d;
}
      #plus1{
     border:solid 1px #686868; 
     border-radius: 5px;
     text-align: center;
     padding-bottom: 2px;
     padding-top: 2px;
    background-color: inherit;
    color: #000;
    font-weight: bold;
  }
    #plus1:hover{
     border:solid 2px #b32a06; 
     border-radius: 5px;
     text-align: center;
     padding-bottom: 2px;
     padding-top: 2px;
    background-color: #b32a06;
    color: #fff;
    font-weight: bold;
  }
.toogledashboard{
        margin-left: 20%;
        width: 80%;
}
.alinkadmin:active{
        background-color: #195e8d;
}
.dashbox2{
        background-color: #7ea4bf;
        border-radius: 10px;
        box-shadow: 0px 5px 5px #eee;
        height: 110px;
        padding-top: 15px;
         border: none;
         color: #fff;
         font-weight: bold;
}
.dashbox2:hover{
        background-color: #7ea4bf;
        color: #fff;
        font-weight: bold;
}
.dashbox{
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0px 0px 8px #eee;
        height: 100px;
        padding-top: 15px;
}
.dashbox:hover{
        background-color: #fff;
        box-shadow: 0px 0px 20px #e8e8e8;
        border: solid 1px #b0b0b0;

}
.faded {
        color: var(--c-text-secondary);
}
.lienspied{
	text-align: left;
	font-size: 13px;
}
.boxservice:hover{
	background-color: #7ea4bf;
	box-shadow: 0px 4px 5px #fff;
	color: #fff;
	font-weight: bold;
	border: none;
}
.det li{
	font-weight: none;
	font-size: 13px;
}
.bbt{
	color: #195e8d;
	background-color: #fff;
}
.box:hover a.bbt{
	color: #fff;
	background-color: #195e8d;
}
.box{
	background-color: #195e8d;
	box-shadow: 0px 4px 4px #195e8d;
	color: #fff;
	transition: all 0.5s ease-out;
	margin-top: 15px;
}
.box:hover{
	background-color: #7ea4bf;
	box-shadow: 0px 4px 5px #fff;
	color: #fff;
	font-weight: bold;
	border: none;
}
.box2 a.bbt{
	color: #fff;
	background-color: #7ea4bf;
}
.box2:hover a.bbt{
	color: #fff;
	background-color: #195e8d;
}
.box2{
	background-color: #fff;
	box-shadow: 0px 4px 4px #d5e0e8;
	color: #000;
	border: solid 1px #fff;
	margin-top: 15px;
	transition: all 0.5s ease-out;
}
.box2:hover{
	background-color: #fff;
	box-shadow: 0px 2px 20px #d5e0e8;
	color: #195e8d;
	border: solid 2px #7ea4bf;
	margin-top: -2px;
}

.info{
	background-color: #7ea4bf;
	border-radius: 4px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 7px;
	padding-bottom: 7px;
	color: #fff;
	font-size: 10px;
}

.animation-container {
	width: 100%;
	height: 50vw;
	max-height: 420px;
	max-width: 840px;
	margin: 40px auto;
	position: relative;
	animation: fadeIn 0.2s ease-out both;
	&:after,
	&:before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: url("https://unitienda.net/demo/finalis/wp-content/uploads/2021/06/dots.png")
			30% 0 no-repeat;
		background-size: 18%;
		z-index: -1;
	}
	&:before {
		background-position: 80% 100%;
	}
	img {
		width: 100%;
		position: absolute;
		user-drag: none;
		user-select: none;
		-moz-user-select: none;
		-webkit-user-drag: none;
		-webkit-user-select: none;
		-ms-user-select: none;
	}
	$circles: 1 10vw 10% 0% transparent #d6d3f8 bg-pulse 5s,
		2 15vw 0% 15% #d6d3f8 transparent bg-rotation 22s,
		3 5vw 52% 0% transparent #f6f7fe bg-pulse 3s,
		4 4vw 48% 5% #d6d3f8 transparent bg-rotation 23s,
		6 13vw 74% 32% #d6d3f8 transparent bg-rotation 23s,
		5 6vw 88% 50% transparent #ccecfc bg-pulse 4s;
	.circle {
		border-radius: 100%;
		position: absolute;
		@each $index, $size, $left, $top, $border, $bg, $animation,
			$duration in $circles
		{
			&:nth-child(#{$index}) {
				border: 2px dashed $border;
				background: $bg;
				left: $left;
				top: $top;
				width: $size;
				height: $size;
				animation: $animation $duration $animation-timing both infinite;
			}
		}
	}
	.cursor {
		width: 2vw;
		max-width: 20px;
		left: calc(50% - 10px);
		top: calc(50% - 10px);
		animation: cursor $cursor-duration $animation-timing both;
		animation-direction: alternate;
		fill: #333;
		.rotateCursor {
			transform: rotateY(180deg);
			transform-origin: center center;
		}
	}
	.dashboard {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 70%;
		display: block;
		margin: 0 auto;
		animation: scaleInCenter 1s ease-in-out;
	}
	svg {
		height: auto;
		position: absolute;
		user-drag: none;
		user-select: none;
	}
	.activity {
		width: 100%;
		max-height: 400px;
		top: 50%;
		right: 0%;
		width: 45%;
		animation: scaleInUp 0.7s ease-in-out 5.5s both;
		animation-direction: alternate;
		$sizesBars: 10, 20, 30, 40, 50, 60, 70, 80, 90, 110;
		$timeOffset: 0.07s;
		$i: 1;
		@each $sizesBar in $sizesBars {
			$delayBar: 6 + $i * $timeOffset;
			.bar.size-#{$sizesBar} {
				animation: barHeight-#{$sizesBar} 0.7s ease-in-out $delayBar both;
			}
			@keyframes barHeight-#{$sizesBar} {
				from {
					height: 0;
					transform: translateY(0px);
				}
				to {
					height: $sizesBar + px;
					transform: translateY(-$sizesBar + px);
				}
			}
			$i: 1 + $i;
		}
		.bubble {
			animation: showBubble 0.7s ease-in-out 7.5s both;
			transform-origin: center;
		}
		.days {
			$timeOffsetDays: 0.3s;
			animation: fadeIn 0.7s ease-in-out both;
			@for $i from 1 through 8 {
				&.day-#{$i} {
					animation-delay: 5.5 + $i * $timeOffsetDays !important;
				}
			}
		}
		.select {
			$timeOffsetDays: 0.3s;
			animation: fadeInUp 0.7s ease-in-out both;
			transform-origin: center;
			@for $i from 1 through 2 {
				&.sele-#{$i} {
					animation-delay: 5.5 + $i * $timeOffsetDays !important;
				}
			}
		}
		.title {
			animation: fadeInRight 1s ease-in-out 5.7s both;
		}
		.sub-title {
			animation: fadeInRight 1s ease-in-out 5.9s both;
		}
	}
	.menu {
		max-height: 520px;
		top: 0;
		left: 0;
		width: 30%;
		animation: scaleInUp 0.7s ease-in-out 1.5s both;
		animation-direction: alternate;
		.logo {
			animation: fadeInRight 0.7s ease-in-out 2s both;
		}
		.menu-item {
			$timeOffsetMenuItem: 0.3s;
			transform-origin: center;
			@for $i from 1 through 5 {
				&:nth-child(#{$i}) {
					animation: flipVertical 0.7s ease-in-out both;
					animation-delay: 1.5 + $i * $timeOffsetMenuItem !important;
				}
			}
		}
	}
	.compliance {
		top: 0;
		right: 10%;
		width: 30%;
		display: block;
		margin: 0 auto;
		animation: scaleInUp 0.7s ease-in-out 3.5s both;
		animation-direction: alternate;
		.bottom-link,
		.title {
			animation: fadeInRight 0.3s ease-in-out 4.5s both;
		}
		.text-step {
			animation: fadeInUp 0.3s ease-in-out 4.7s both;
		}
		.progress-bar {
			animation: fadeInUp 0.3s ease-in-out 4.9s both;
			.bar {
				width: 0;
				animation: progressBar 1s ease-in 5.3s both;
			}
		}
		.button-blue {
			animation: fadeInUp 0.3s ease-in-out 5.1s both;
		}
	}
}
@keyframes bg-pulse {
	50% {
		transform: scale(0.7) translatey(5%);
	}
}
@keyframes bg-rotation {
	100% {
		transform: rotate(360deg);
	}
}
@keyframes progressBar {
	to {
		width: 177px;
	}
}
@keyframes flipVertical {
	from {
		transform: rotateY(90deg);
	}
	to {
		transform: rotateY(0deg);
	}
}
@keyframes showBubble {
	from {
		transform: rotate(15deg) translatey(10px);
		opacity: 0;
	}
}

@keyframes scaleInCenter {
	0% {
		transform: translate(-50%, -50%) scale(0.8);
		opacity: 0.2;
	}
	100% {
		transform: translate(-50%, -50%) scale(1);
		opacity: 1;
	}
}
@keyframes scaleInUp {
	from {
		transform: scale(0);
		opacity: 0;
	}
	to {
		transform: scale(1);
		opacity: 1;
	}
}
@keyframes float {
	0% {
		transform: translatey(0px);
	}
	50% {
		transform: translatey(-20px);
	}
	100% {
		transform: translatey(0px);
	}
}
@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@keyframes fadeInUp {
	from {
		opacity: 0;

		transform: translatey(10px);
	}
	to {
		opacity: 1;
		transform: translatey(0);
	}
}
@keyframes fadeInRight {
	from {
		opacity: 0;

		transform: translatex(-10px);
	}
	to {
		opacity: 1;
		transform: translatex(0);
	}
}
@keyframes cursor {
	0% {
		opacity: 0;
	}
	5% {
		opacity: 1;
	}
	10%,
	20% {
		left: 23%;
	}
	14% {
		transform: scale(1);
	}
	15% {
		transform: scale(0.8);
	}
	16% {
		transform: scale(1);
	}
	30%,
	40% {
		top: 40%;
		left: 73%;
	}
	34% {
		transform: scale(1);
	}
	35% {
		transform: scale(0.8);
	}
	36% {
		transform: scale(1);
	}
	50%,
	60% {
		top: 75%;
		left: 73%;
	}
	51% {
		transform: scale(1);
	}
	52% {
		transform: scale(0.8);
	}
	53% {
		transform: scale(1);
	}
	70% {
		opacity: 1;
	}
	80% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}



/*Laptop*/

@media (min-width: 780px) {

.mobile {
        display: none;
}
.bod{
	width: 75%;
	margin: auto;
}


}



/*Mobile*/

@media (max-width: 780px) {

.laptop {
        display: none;
}
.bod{
	width: 90%;

}


}