style.css

@font-face {
	font-family: carossoft;
	src: url(./carossoft.otf);
}

* {
	padding: 0;
	box-sizing: border-box;
	margin: 0;
	font-family: carossoft;

}

html {
	height: 100%;
	width: 100%;

}

#body {
	height: 100%;

	background-color: #F1EFFA;
	display: grid;
	grid-template-areas:

		"aside header "
		"aside section1 "
		"aside section2 "
		"aside section3 "
		"aside footer   "

	;
	grid-template-columns: max-content;
	grid-template-rows: max-content;
	gap: 10px;

}

#aside {
	grid-area: aside;
	background-color: #5D46DC;
	display: flex;
	width: 200px;
	gap: 10px;
	border-top-right-radius: 20px;
	padding: 16px;
	justify-content: center;
	color: #F1EFFA;
	;
}

#sales {
	font-weight: 700;
	font-size: 20px;
	margin-right: 860px;
	width: 170px;
}

#header {
	grid-area: header;
	justify-content: flex-end;
	display: flex;
	align-items: center;

	height: 45px;
	gap: 10px;
	margin-top: 9px;
}

#titulo {
	display: flex;
	align-items: center;
	height: 50px;


}

#subtitulo {
	display: flex;
	height: 50px;
	align-items: center;


}

#home {

	filter: invert(1);
	height: 25px;

	display: flex;

	align-items: center;
}

#dark {

	filter: invert(1);
	height: 25px;
	margin-left: 1px;

}

#exit {


	height: 25px;
	margin: 10px;

}

#campana {
	height: 40px;
	margin: 10px;
	border-right: #E9E7F4 solid 3px;
	padding: 10px;
	margin-left: 32px;

}

#name {
	font-size: 12px;
}

#cargo {
	font-size: 10px;
	color: #C6C4D1;
}

#user {
	display: flex;

	margin-bottom: 10px;
	align-items: center;

}

#foto {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	margin: 5px;
}

#arrow {
	filter: invert(1);
	height: 12px;
	margin-right: 5px;

}

#inicio {
	display: flex;

	height: 50px;
}

#perfil {
	display: flex;
	align-items: center;

}

#air {
	font-size: 20px;
	font-weight: 700;
}

#hyper {

	font-size: 9px;
}

#items {


	margin-top: 80px;
	position: absolute;


}

#item1 {
	display: flex;
	margin: 35px;
	justify-content: center;

}

#Dashboard {
	height: 25px;
	display: flex;
	margin-right: 7px;

	align-items: center;
}

#spanopt {
	display: flex;

	align-items: center;

}

#abajo {
	height: 25px;
	display: flex;
	margin-top: 135px;
	justify-content: center;
	align-items: center;

}

#section1 {
	grid-area: section1;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;


	height: 205px;
	gap: 10px;
}

#dos {
	display: flex;
	height: 40px;
	position: relative;
}

#logo {
	width: 45px;
	height: 45px;
}

#tres {
	display: flex;
	/* margin-left: -20px; */
	position: absolute;
	/* align-self: auto;*/
	margin-top: 40px;
}

#redondo {

	display: flex;
	margin-left: 15px;
	margin-right: 18px;


}

#progress {
	width: 140px;
	height: 140px;
	margin-top: 15px;
}

#online {

	display: flex;
	position: absolute;
	margin-left: 205px;
	margin-top: 20px;
	font-size: 13px;
	align-items: center;


}

#onlinenum {

	background-color: #583aff;
	color: #FFFFFF;
	margin-left: 8px;
	border-radius: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 30px;
	height: 30px;

}

#directnum {
	background-color: #31e3d9;
	color: #FFFFFF;
	margin-left: 11px;
	border-radius: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 30px;
	height: 30px;
}

#direct {

	display: flex;
	position: absolute;
	margin-left: 205px;
	margin-top: 60px;
	font-size: 13px;
	align-items: center;
}

#cinco {
	display: flex;
	position: absolute;
	flex-direction: column;
	margin-top: 25px;
}

#accion {
	font-size: 12px;
	color: #D7DADF;
	margin: 5px;
}

#numaccion {
	margin: 5px;
	font-weight: 700;
}

#accionflecha {
	background-color: #583aff;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 5px;
}

#ir {
	filter: invert(1);
	height: 15px;

}

#seis {
	flex-direction: column;
	position: absolute;
	display: flex;
	margin-left: 265px;
	gap: 20px;
	margin-top: 35px;

}

#clientes {
	display: flex;
	position: absolute;
	flex-direction: column;
	margin-top: 45px;


}

#clientname {
	margin-right: 25px;

}

#enunciados {
	display: flex;
	position: absolute;
	margin-top: 25px;
	gap: 100px;
}

#names {
	width: 900px;
	color: #D7DADF;
	text-align: start;
}

#indices {
	margin-bottom: 10px;
}

#user {
	display: flex;
	align-items: center;
}

#optclient {
	margin: 3px;

	display: flex;
	align-items: center;
}

#client {
	height: 30px;
	width: 30px;
	border-radius: 5px;
	object-fit: cover;
	margin-right: 5px;
}

#section2 {
	grid-area: section2;
	display: grid;
	grid-template-columns: 0.97fr 1fr;

	gap: 10px;
	height: 220px;


}

#section3 {
	grid-area: section3;
	display: grid;
	grid-template-columns: 2.47fr 1.25fr 1.25fr;

	gap: 10px;
	height: 200px;


}

.switch {
	position: relative;
	display: inline-block;
	width: 50px;
	height: 30px;
	margin: 0 10px;
}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #FFFFFF;
	transition: .4s;
	border-radius: 34px;

}

.switch input {
	display: none;
}

.slider:before {
	/*slider es el circulo que se mueve*/
	position: absolute;
	content: '';
	height: 20px;
	width: 20px;
	left: 5px;
	bottom: 5px;
	background-color: #5D46DC;
	transition: 0.4s;
	border-radius: 50px;

}

input:checked+.slider {
	background-color: black;
}

input:checked+.slider:before {

	transform: translateX(20px);
}

#tarjetas1 {

	background-color: #FFFFFF;
	display: flex;
	justify-content: flex-start;
	padding: 15px;
	border-radius: 7px;
}

#rectangulo1,
#rectangulo2 {

	width: 120px;
	background-color: #573afb;
	display: flex;
	border-radius: 10px;
	height: 60px;
	padding: 5px;


}

#rectangulo2 {

	background-color: #d6cefc;


}

#rectangulos {


	position: absolute;
	margin-top: 40px;
	width: 290px;

	margin-bottom: 20px;

}

#rectangulocomp1,
#rectangulocomp2 {

	width: 290px;
	position: absolute;
	display: flex;


}

#rectangulocomp1 {
	justify-content: flex-start;

}

#rectangulocomp2 {

	justify-content: flex-end;
}

#flechadentro {

	display: flex;
	align-items: flex-start;
	width: 100%;
	height: 100%;
	justify-content: flex-end;

}

#flechauno {

	transform: rotate(135deg);

	filter: invert(72%) sepia(45%) saturate(4632%) hue-rotate(210deg) brightness(98%) contrast(106%);
	width: 25px;

}

#flechados {

	transform: rotate(315deg);
	width: 25px;
	filter: invert(53%) sepia(11%) saturate(1204%) hue-rotate(210deg) brightness(103%) contrast(88%);
}

#infoporcentaje {

	display: flex;
	flex-direction: column;
	margin-left: 20px;
	justify-content: center;
	align-items: center;

}

#porcentaje1,
#ascending {

	color: #FFFFFF;

}

#porcentaje1,
#porcentaje2 {
	font-size: 20px;
}

#ascending,
#descending {

	font-size: 12px;

}


#tablatop {

	margin-top: 35px;
	overflow-y: scroll;
	max-height: 150px;


}

#tablabest {

	margin-top: 25px;
	overflow-y: scroll;
	max-height: 150px;


}

#statusof,
#statuson {

	height: 10px;
	width: 10px;
	border-radius: 50%;

	margin-right: 3px;

}

#statusof {
	background-color: #d3dfd6;

}

#statuson {

	background-color: #39bf73;

}


#tabletop tr {

	font-size: 12px;

}

#tablecustomer {
	display: flex;

}

#tablecustomer tr {

	font-size: 12px;

}

#tablecustomer tr th {
	width: 95px;
	height: 20px;
}

#tablecustomer tr td {
	font-size: 15px;
	font-weight: bolder;
	text-align: center;
}


#tablacustomer {
	display: flex;
	position: absolute;
	width: 22%;
	margin-top: 100px;
	/* align-items: flex-end; */

}

#barracustomer {


	display: flex;
	width: 100%;
	margin-top: 52%;
	height: 13px;
	background-color: #d6cefc;
	border-radius: 10px;

}

#rellenocustomer {
	background: linear-gradient(to right, #593bff, #917dff);

	height: 100%;
	width: 85%;
	border-radius: 10px;

}

#orders {
	height: 20px;
	/* position: absolute; */
	margin-right: 100px;
}

#rayas {

	position: absolute;
	margin-top: 45px;
	font-size: 10px;
	display: flex;
	text-align: right;
	color: #e6e6e6;
}

#meses {
	position: absolute;
	margin-top: 160px;
	/* margin-left: 3px; */
	/* letter-spacing: 0.6em; */
	word-spacing: 31px;
	color: #B9B9BB;
	font-size: 10px;
}

#numero {
	color: #B9B9BB;
	font-size: 12px;

}

[id^="barraactive"] {
	/*background-color: black;*/
	display: flex;
	align-items: flex-end;
	width: 20px;
	/* height: 50px; */
	border-radius: 5px;
	/* position: absolute;*/

}


[id^="graficas"] {
	position: absolute;

}


#barraactive1 {

	height: 75px;
	background: linear-gradient(0deg, #5739ff, #8e7aff);


}

#graficas2 {


	margin-top: 19px;
	margin-left: 50px;

}


#barraactive2 {

	height: 55px;
	background: linear-gradient(0deg, #66e7e2, #94f1ed);


}

#graficas3 {

	margin-top: -20px;
	margin-left: 104px;

}


#barraactive3 {

	height: 95px;
	background: linear-gradient(0deg, #5739ff, #8e7aff);


}


#graficas4 {

	margin-top: 6px;
	margin-left: 157px;

}


#barraactive4 {

	height: 69px;
	background: linear-gradient(0deg, #66e7e2, #94f1ed);


}


#graficas5 {

	margin-top: -49px;
	margin-left: 209px;

}


#barraactive5 {

	height: 124px;
	background: linear-gradient(0deg, #5739ff, #8e7aff);


}

#graficas6 {
	margin-top: 34px;
	margin-left: 263px;

}


#barraactive6 {

	height: 41px;
	background: linear-gradient(0deg, #66e7e2, #94f1ed);


}


#graficasactive {
	position: absolute;
	margin-top: 70px;
	font-size: 10px;
	width: 21%;
	color: #e6e6e6;
}

#rayitas {

	position: absolute;
	margin-top: -42px;

}


#dias {
	position: absolute;
	margin-top: 115px;
	margin-left: 35px;
	/*letter-spacing: 0.6em; */
	word-spacing: 20px;

}


[id^="barrita"] {
	background-color: #d6cefc;
	display: flex;
	align-items: flex-end;
	width: 10px;
	border-radius: 10px;
	position: absolute;
}

#barrita1 {
	left: 36px;
	top: 42px;
	height: 65px;

}

#barrita2 {
	left: 78px;
	top: 13px;
	height: 94px;

}

#barrita3 {
	left: 117px;
	top: 46px;
	height: 61px;

}

#barrita4 {
	left: 153px;
	top: 11px;
	height: 97px;

}

#barrita5 {
	left: 186px;
	top: 67px;
	height: 41px;

}

#barrita6 {
	left: 221px;
	top: 23px;
	height: 84px;

}

#barrita7 {
	left: 254px;
	top: 36px;
	height: 71px;

}

[id^="rellenos"] {
	background: linear-gradient(0deg, #593bff, #998af0);

	width: 100%;
	border-radius: 10px;
}

#rellenos1 {

	height: 70%;
}

#rellenos2 {

	height: 70%;
}

#rellenos3 {

	height: 65%;
}

#rellenos4 {

	height: 65%;
}

#rellenos5 {

	height: 80%;
}

#rellenos6 {

	height: 65%;
}

#rellenos7 {

	height: 60%;
}


#summary {
	height: 20px;
	margin-right: 180px;

}

#salesum {
	height: 20px;
	margin-right: 430px;

}

#top {
	height: 20px;

	position: absolute;

}

#best {
	height: 20px;
	/* margin-right: 465px; */
	position: absolute;

}

#active {
	height: 20px;
	/* position: absolute; */


}


#barracircular1 {

	width: 120px;
	height: 120px;

	border-radius: 50%;
	border: 7px solid #e6e1fe;


}

#rellenocircular1 {


	width: 120px;
	height: 120px;
	position: absolute;
	border-radius: 50%;
	top: 0;
	left: 0;
	border: 7px solid #583aff;

	/* Recortar forma para mostrar solo la mitad inferior */
	clip-path: circle(155% at 155% 100%);
	rotate: 20deg;


}

#spanestado {
	display: flex;

	POSITION: ABSOLUTE;
	MARGIN-LEFT: 160px;
}

#profiton,
#profitof {
	height: 8px;
	width: 8px;
	border-radius: 50%;
	margin-right: 5px;
}

#ondas2 {
	position: absolute;

	margin-top: 39px;
	margin-left: 37px;
}

#profiton {
	background-color: #02e0d5;
}

#profitof {
	background-color: #5131ff;
}

#userprofit {
	font-size: 12px;
	display: flex;
	align-items: center;
	margin: 5px;
	color: #B9B9BB;
}

#ondas1 {
	position: absolute;
	margin-top: 25px;
	margin-left: 80px;
}

#finprogreso1 {

	height: 16px;
	width: 16px;
	background-color: #583aff;
	position: absolute;
	border: 4px solid #ffffff;
	top: 0;
	left: -4px;
	margin-top: 47px;
	border-radius: 50%;
}


#rellenocircular2 {

	width: 80px;
	height: 80px;
	position: absolute;
	border-radius: 50%;
	top: -7px;
	left: -7px;
	border: 7px solid #31e3d9;
	clip-path: circle(122% at 130% 100%);
	rotate: 351deg;


}

#finprogreso2 {

	height: 16px;
	width: 16px;
	background-color: #31e3d9;
	position: absolute;
	border: 4px solid #ffffff;
	top: 0;
	left: -4px;
	margin-top: 47px;
	border-radius: 50%;
}

#barracircular2 {
	width: 80px;
	position: absolute;
	height: 80px;
	top: 20px;
	left: 20px;
	border-radius: 50%;
	border: 7px solid #e6e1fe;


}


#progreso {
	position: absolute;
	height: 120px;
	width: 120px;
	/* padding: 5px;*/


}


#pieFinal {
	text-align: center;
}


#punto {
	display: flex;
	height: 20px;
	align-items: center;
	margin-left: 570px;
	position: absolute;
}

#week {

	color: #B9B9BB;
	font-size: 12px;
	margin-left: 120px;

}

#customer {
	height: 20px;
	position: absolute;
	width: 15%;

}

#total {
	height: 20px;
	margin-right: 188px;

}

#today {
	color: #B9B9BB;
	font-size: 12px;
}

#day {
	display: flex;
	height: 20px;
	align-items: center;
}

#expand {
	display: flex;
	filter: invert(0.4);
	height: 13px;
	margin-left: 3px;

}

#puntos {
	display: flex;

	height: 28px;
	margin-left: 3px;


}

#flecha {
	display: flex;
	height: 20px;
	align-items: center;
}

#footer {


	grid-area: footer;
	height: 20px;
}

#intro {

	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	z-index: 9999;
	animation: salida 2s ease-in-out 2s forwards;
}

#intro p {
	font-size: 24px;
	text-align: center;
	margin-top: 50px;
}

@keyframes salida {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}