* {
	margin: 0;
	padding: 0;
}

body {
	font-family: "Inter", sans-serif;
}
.material-symbols-rounded {
	font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
	color: #e5e5e5 !important;
	margin-right: 10px;
	font-size: 30px;
}

.container {
	display: flex;
	width: 100%;
}

/* styling the side bar */
.side-bar {
	background-color: #2a3f54;
	width: 20%;
	height: 100vh;
}
.logo {
	display: flex;
	align-items: center;
	/* margin-bottom: 10px; */
	padding: 10px 30px 20px 20px;
	border-bottom: 1px solid gainsboro;
}
.admin-profile-img {
	height: 100px;
	width: 100px;
}
.admin-profile-img > img {
	height: inherit;
	width: inherit;
	object-fit: cover;
	border-radius: 50%;
	cursor: pointer;
}
.logo-img {
	height: 70px;
	width: 70px;
	cursor: pointer;
}
.logo-img > img {
	height: inherit;
	width: inherit;
	background-color: blanchedalmond;
	border-radius: 50%;
	border: 1px solid #47bb9c;
}
.logo > h1 {
	color: blanchedalmond;
	margin-left: 20px;
	font-size: 30px !important;
	cursor: pointer;
	font-family: "Oleo Script", cursive;
}
.admin-profile {
	display: flex;
	align-items: center;
	padding: 40px;
}
.welcome {
	margin-left: 20px;
}
.welcome h4,
h2 {
	color: blanchedalmond;
	font-weight: 400;
}
.welcome > h2 {
	font-size: 30px;
	font-weight: 400 !important;
	cursor: pointer;
}
.welcome > h4 {
	font-size: 18px;
	/* font-weight: 400 !important; */
}
.sidebar-options > h3 {
	color: blanchedalmond;
	font-size: 30px;
	font-weight: 400;
	margin-bottom: 20px;
	padding: 40px;
}
.list-option > ul > li {
	text-decoration: none;
	list-style: none;
	margin-top: 25px;
	background-color: inherit;
}
.list-option .btn-options {
	background-color: #2a3f54;
	width: 100%;
	display: flex;
	align-items: center;
	font-size: 20px;
	border: none;
	cursor: pointer;
	padding: 10px 0 10px 30px;
	color: blanchedalmond;
	font-weight: 400 !important;
}
.list-option .btn-options:hover {
	border-right: 8px solid #47bb9c;
	box-shadow: rgba(169, 194, 236, 0.25) 0px 4px 8px -2px,
		rgba(31, 31, 32, 0.08) 0px 0px 0px 1px;
}

/* Dashboard section styling */
.right-side-container {
	width: 80%;
}
.nav-bar {
	display: flex;
	align-items: center;
	/* width: 80%; */
	justify-content: space-between;
	background-color: #ededed;
	padding: 20px;
	border-bottom: 1px solid gainsboro;
	box-shadow: rgba(0, 0, 0, 0.35) 0px -15px 36px -28px inset;
	box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em,
		rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em,
		rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
}
.nav-profile {
	display: flex;
	align-items: center;
	width: 17%;
	justify-content: space-between;
}
#close-open {
	border: none;
	cursor: pointer;
}

#close-open .material-symbols-rounded {
	color: #2a3f54 !important;
	font-size: 55px;
	padding: none;
	margin: none;
	justify-content: center;
	font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 48;
}
#close-open .material-symbols-rounded:hover {
	background-color: #2a3f54;
	color: blanchedalmond !important;
	border-radius: 50%;
	padding: 5px;
	font-size: 50px;
}
#drop-down .material-symbols-rounded {
	color: #2a3f54 !important;
}
.nav-profile > h3 {
	font-size: 25px;
	font-weight: 400;
}
.nav-profile-img {
	height: 50px;
	width: 50px;
	border-radius: 50%;
	border: 1px solid goldenrod;
}
.nav-profile-img > img {
	height: inherit;
	width: inherit;
	object-fit: cover;
	border-radius: 50%;
	cursor: pointer;
}
.text-element > P {
	font-size: 25px !important;
}
#drop-down {
	border: none;
	cursor: pointer;
}
#drop-down .material-symbols-rounded:hover {
	background-color: #2a3f54;
	color: blanchedalmond !important;
	border-radius: 50%;
	/* padding: 2px; */
	font-size: large;
}

/* Working on the Dashboard card */
.dashboard-section {
	width: 92%;
	margin: auto;
}
.data-info-cards {
	display: flex;
	align-items: center;
	width: 100%;
	justify-content: space-between;
	margin-top: 20px;
}
.total-staff {
	display: flex;
	align-items: center;
	font-size: 30px;
	font-weight: 200;
}
.total-staff > img {
	height: 20px;
	margin-right: 6px;
	color: grey !important;
}
.total-staff > h3 {
	font-weight: 400;
	color: grey;
	font-size: 20px;
}
.percent {
	font-size: 20px;
	font-weight: 300;
	margin-left: 10px;
	color: #47bb9c;
}
.employ-weeks {
	display: flex;
	align-items: center;
	margin-top: 20px;
	/* justify-content: space-around; */
}
.employ-weeks > h3 {
	font-size: 20px;
	font-weight: 300;
	margin-left: 10px;
	color: gray;
}
.data-cards > h1 {
	margin-top: 10px;
	font-family: "Alfa Slab One", cursive;
	color: #73879c;
	text-align: center;
	font-size: 60px;
}
.empty-line {
	background-color: grey;
	width: 4px;
	height: 90px;
}
.cows {
	color: aquamarine !important;
}
.sold {
	color: goldenrod !important;
}

/* Card design for the cow */
.breed-card {
	height: 500px;
	width: 400px;
	cursor: pointer;
	/* background-color: red; */
	border-radius: 5px;
	box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,
		rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}
.breed-card:hover {
	background-color: #2a3f54;
	color: antiquewhite;
}
.card-cows {
	margin-top: 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.cow-img {
	height: 400px;
	width: 400px;
	border-radius: 5px;
}
.cow-img > img {
	height: inherit;
	width: inherit;
	border-radius: 5px;
	object-fit: cover;
	border-bottom-right-radius: 900px;
}
.container-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.icons-elements {
	display: flex;
	align-items: center;
	margin-left: 20px;
	text-align: right;

	float: left;
}
.text-element {
	float: left;
	text-align: right;
	align-items: right;
	margin-right: 10px;
}
.icons-elements > span {
	color: #47bb9c !important;
	padding-top: 1px;
}
.icons-elements > p > span {
	color: #47bb9c;
	font-size: 20px;
	text-align: right;
}
.icons-elements > p {
	color: #73879c;
	font-size: 20px;
}
.text-element > h6 {
	font-size: 16px;
	color: gray;
}
.text-element > h6 > span {
	color: rgb(3, 107, 9);
}
.dashboard-section > h1 {
	font-size: 40px;
	margin-top: 10px;
	font-weight: 500;
	font-family: "Alfa Slab One", cursive;
}

/* Styling production section */
.production-section {
	/* margin-top: 10px; */
	display: flex;
	justify-content: space-between;
}
#show-total {
	font-size: 20px;
	padding: 10px;
	font-weight: 900;
	background-color: #47c247;
	color: #fff;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}
#show-total:hover {
	box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
	color: #2a3f54;
}
.empty-div {
	font-size: 20px;
	display: block;
	margin-top: 20px;
}
.empty-div > input {
	font-size: 20px;
	padding: 10px;
	width: 100px;
	margin-right: 25px;
	box-sizing: border-box;
	align-items: center;
	border: 1px solid #73879c;
	border-radius: 4px;
	background-repeat: no-repeat;
	transition: width 0.4s ease-in-out;
}

.production-data-day {
	margin: 0 auto;
	width: 100%;
	justify-content: center;
	/* background-color: red; */
	height: 1200;
}
table {
	margin: auto;
	border-collapse: collapse;
	font-size: 20px;
	width: 80%;
	margin-top: 30px;
	border-radius: 5px !important;
}
td,
th {
	border: 1px solid #2a3f54;
	text-align: left;
	padding: 15px;
	font-weight: 300;
}
th {
	font-weight: 500;
}

tr:nth-child(even) {
	background-color: #dddddd;
}
.sum-production {
	display: flex;
	justify-content: space-between;
	width: 80%;
	margin: auto;
	margin-top: 20px;
	font-size: 20px;
}
.total > span {
	color: #47c247;
}
.income-rate {
	font-size: 20px;
	padding: 5px;
	color: #fff;
	background-color: #47c247;
	border: none;
	border-radius: 4px;
	font-weight: 800;
	cursor: pointer;
}