/* Sider Menu */

.sider-menu {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.sider-menu .logo {
	text-align: center;
}

.sider-menu .logo img {
	width: 130px;
	margin-top: 20px;
	margin-bottom: 30px;
}

/* Header */

.header {
	padding: 0;
	height: 16px;
	background: #F5F5F5;
}

/* Content */

.content {
	min-height: 100vh;
	padding: 1rem 5.5rem 2.5rem;
	overflow: initial;
	background: #F1F1F1;
}

@media (max-width: 768px) {
	.content {
		padding: 1rem 1rem 2.5rem;
	}
}

/* Home */

.home-img {
	width: 240px;
}

.home-title {
	font-size: 57px !important;
	color: #9B9B9B !important;
}

/* Recipes */

#recipe-img-upload .ant-upload.ant-upload-select {
	width: 130px !important;
	height: 130px !important;
}

#recipe-img-upload .ant-upload-list-item-container {
	width: 130px !important;
	height: 130px !important;
}

.ant-typography-edit {
	/* Hide edition icon */
	display: none !important;
}

/* Buttons */

.btn-add-step {
	background-color: #D9D9D9;
	color: #9E9E9E;
	width: 4rem !important;
	height: 4rem;
	box-shadow: 0 10px 15px -5px rgba(0, 0, 0, 0.3);
}

.btn-add-step:hover {
	background-color: #D9D9D9 !important;
	color: #9E9E9E !important;
}

li::marker {
	color: #F18B71;
}

.btn-save {
	background-color: #CFF1E6 !important;
	color: #11B981 !important;
}

.btn-cancel {
	background-color: #F9D2DA !important;
	color: #E11D48 !important;
}

.btn-edit {
	background-color: #D1E8EB !important;
	color: #3F7A7F !important;
}

.ant-typography .ant-typography-copy, .ant-typography .ant-typography-copy:focus {
	color: #F18B71;
}

.ant-typography .ant-typography-copy:hover {
	color: #FFB7A1;
}

.ant-typography .ant-typography-copy-success, .ant-typography .ant-typography-copy-success:hover, .ant-typography .ant-typography-copy-success:focus {
	color: #52c41a;
}

/* Ingredients */

.btn-add-ingredient-state {
	display: grid;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 170px;
	padding: 1rem;
	color: #9E9E9E;
	background-color: white;
	border: dashed 2px #9E9E9E;
	border-radius: 23px;
	text-align: center;
	font-size: 20px;
	cursor: pointer;
}

/* Pagination */

.ant-pagination .ant-pagination-item-active a {
	color: #FFFFFF;
}

.ant-pagination .ant-pagination-item-active a:hover {
	color: #FFFFFF;
}

/* Ant design Icon */

.icon-bold {
	color: black;
	stroke: black;
	stroke-width: 30;
}

/* Material Icons */

.material-symbols-outlined {
	font-variation-settings:
	'FILL' 1,
	'GRAD' 0,
	'opsz' 24
}

.material-symbols-outlined-200 {
	font-variation-settings:
	'FILL' 1,
	'wght' 200,
	'GRAD' 0,
	'opsz' 24
}

.material-symbols-outlined-400 {
	font-variation-settings:
	'FILL' 1,
	'wght' 400,
	'GRAD' 0,
	'opsz' 24
}

/* Tabs */

.ant-tabs-tab .anticon {
	vertical-align: middle;
	margin-right: 8px; /* Espacio entre el icono y el texto */
}

.ant-tabs-tab span {
	display: flex;
	align-items: center;
}

/* Filter image with color */

.container {
	position: relative;
	width: 80px;
	height: 80px;
}

.background,
.foreground {
	position: absolute;
	top: 0;
	left: 0;
	width: 80px;
	height: 80px;
}

/* Hover effect */

.hover-div {
  width: 110px;
  height: 110px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
}

.hover-div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 0.3s ease;
}

.hover-div:hover img {
  filter: brightness(0.5);
}

.hover-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -65%);
  font-size: 24px;
  color: white;
  font-weight: bold;
  z-index: 10;
	cursor: pointer;
}

/* Recipe lock */

.lock-overlay {
  position: absolute;
	cursor: pointer;
}

.lock-icon {
  font-size: 30px;
  color: black;
}

/* Recipes circle data */

.recipe-circle {
	width: 5.5rem;
	height: 5.5rem;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
  margin: 0px auto;
  padding: 3%
}

.recipe-circle > p {
	font-weight: bold;
	font-size: 9px;
}

/* Tabs */

:where(.css-dev-only-do-not-override-klaz8j).ant-tabs-top >.ant-tabs-nav::before, :where(.css-dev-only-do-not-override-klaz8j).ant-tabs-bottom >.ant-tabs-nav::before, :where(.css-dev-only-do-not-override-klaz8j).ant-tabs-top >div>.ant-tabs-nav::before, :where(.css-dev-only-do-not-override-klaz8j).ant-tabs-bottom >div>.ant-tabs-nav::before {
	position: absolute;
	right: 0;
	left: 0;
	border-bottom: 1px solid  #E7E7E7;
	content: '';
}

.km-colors {
	color: #F18B71;
	/* color: #D8D8D8; */
	color: #A2D7DC;
	color: #FCC354;
	color: #9DD2C0;
	color: #EF85A7;
	color: #E0DD6B;
	color: #3F3F3F;
}