﻿#eces {
	svg {
		width: 1.5rem;
		height: 1.5rem;
	}
}

.accordion-container {
	.accordion-header {
		border-bottom: 1px solid var(--text-light-1);

		.meta {
			color: var(--text-light-0);
			font-size: 0.8rem;
		}

		&.closed {
			border-bottom: none;
		}
	}

	.accordion-content {
		ol {
			list-style: persian;
			padding: 0 2rem 0 1rem;
			line-height: 3rem;

			li {
				list-style: persian !important;
				padding-right: .5rem;
				border-bottom: 1px solid var(--text-light-1);

				.meta {
					color: var(--text-light-0);
					font-size: 0.8rem;
				}

				&:last-child {
					border: none;
				}
			}
		}
	}
}

.comments-form {
	.sec-title {
		display: block;
		color: #000;
		font-size: 1.1rem;
		margin-bottom: 1rem;
	}

	.field-holder {
		position: relative;
		border: solid 1px #F1EEEE !important;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: start;
		border-radius: 5px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		-ms-border-radius: 5px;
		-o-border-radius: 5px;
		padding: 0px 1rem;
		margin-bottom: 1rem;

		svg {
			min-width: 18px;
			width: 18px;
			height: 15px;
			stroke: #1B2C65;
			margin-left: 0.8rem;
		}

		.form-control {
			width: 100%;
			height: 42px;
			border: none !important;
			outline: none;
			font-size: 1rem;
			padding: 0.5rem 0;
			resize: none;

			&::placeholder {
				color: #959595;
				font-size: 1rem;
				font-weight: normal;
			}

			&:disabled {
				background-color: transparent;
			}
		}

		textarea {
			min-height: 150px;
		}
	}

	.rating-in-comment {
		.caption {
			color: #000;
		}
	}

	.submit-btn {
		font-size: 1rem;
		color: #fff;
		border: none;
		padding: 0.3rem 1.5rem;
		border-radius: 5px;
		background-color: var(--accent-color);
		cursor: pointer;

	}
}

.comments-list {
	border-radius: 5px;
	border: solid 1px #F5F5F5;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	padding: 3rem 1.2rem;

	li {
		list-style: none;
		margin-bottom: 2rem;

		&:last-child {
			margin-bottom: 0;
		}

		.avatar {
			width: 50px;
			min-width: 50px;
			height: 50px;
			background-color: var(--accent-color2);
			border-radius: 5px;
			margin-left: 1rem;

			svg {
				width: 20px;
				stroke: #fff;
			}
		}

		.comment-head {
			width: 100%;
			/* height: 50px; */
			padding: 0.4rem 1rem;
			background-color: #FBFBFB;
			border-radius: 5px;
			border: solid 1px #F1F1F1;
			display: flex;
			flex-wrap: wrap;

			.author {
				font-size: 1rem;
				color: #000;
			}

			.dete {
				.item {
					font-size: 0.8rem;
					color: #000;

					&:first-child {
						margin-left: 1rem;
						padding-left: 1rem;
						border-left: solid 1px #EBEBEB;
					}

					svg {
						width: 14px;
						height: 14px;
						margin-left: 0.5rem;
						stroke: var(--accent-color);
					}

				}
			}
		}

		.comment-body {
			padding: 1rem;
			border-bottom: solid 1px #E3E3E3;

			.comment-content {
				font-size: 1rem;
				color: #000;
			}

			.action-btns {
				svg {
					cursor: pointer;
				}

				.like {
					.like-couner {
						color: #000;
						margin-top: -3px;
						margin-left: 2px;
					}
				}
			}
		}

		&:last-child {
			margin-bottom: 0;

			.comment-body {
				border-bottom: none;
			}
		}

	}
}

.teacher {
	img {
		max-width: 4.5rem;
	}
}

.course-status:before {
	content: '';
	width: 1rem;
	height: 1rem;
	background-color: var(--accent-color);
	display: block;
	border-radius: 10rem;
}

.anchor-links-col {
	position: sticky;
	top: 1rem;
	z-index: 10;

	.anchor-links {
		a {
			border-radius: var(--b-radius);
			padding: 0.4rem 1rem;

			&.active,
			&:hover {
				background-color: var(--accent-color4);
			}
		}
	}
}

.count-wrapper {
	height: 0;
	overflow: hidden;
	background-color: var(--text-light-2);
	border-radius: 0.4rem;
	-webkit-border-radius: 0.4rem;
	-moz-border-radius: 0.4rem;
	-ms-border-radius: 0.4rem;
	-o-border-radius: 0.4rem;

	&.active {
		padding: 0.3rem;
		height: auto;
	}

	.basket-link {
		color: var(--Black);
		padding: 0 0.8rem;
		background: none;
		border: none;
		cursor: pointer;
	}

	.prod-count {
		.input-group {
			display: flex;
			flex-direction: row-reverse;
			padding: 0.5rem !important;
			background-color: #fff;
			border-radius: 0.4rem;
			-webkit-border-radius: 0.4rem;
			-moz-border-radius: 0.4rem;
			-ms-border-radius: 0.4rem;
			-o-border-radius: 0.4rem;

			.remove-item-from-basket {
				width: 1.84rem;
				height: 1.84rem;
				vertical-align: middle;
				cursor: pointer;
			}

			.input-group-text {

				display: inline-flex;
				vertical-align: middle;

				button {
					font-size: 1.5rem;
					padding: 0.5rem;
					line-height: 0;
					border: none;
					background-color: transparent;
					color: #144C35;
					cursor: pointer;
				}
			}

			input {
				width: 5rem;
				border: none !important;
				outline: none;
				background-color: transparent;
				text-align: center !important;
				font-size: 1rem;
				font-weight: bold;
			}
		}
	}
}

.addToBasket-clickable {
	padding: 0.8rem;
	background-color: var(--accent-color);
	color: var(--White);
	font-size: 1.07rem;
	font-weight: 700;
	border: none;
	width: 100%;
	border-radius: 0.4rem;
	-webkit-border-radius: 0.4rem;
	-moz-border-radius: 0.4rem;
	-ms-border-radius: 0.4rem;
	-o-border-radius: 0.4rem;
	cursor: pointer;

	svg {
		width: 1.84rem;
		aspect-ratio: 1/1;
		fill: var(--White);
	}
}