/* ======== LAYOUT ========= */
.left-side, .right-side {
	min-width: 425px;
}

/* ======== LOCATION AND LANGUAGE CONTAINER ========= */
.selections-flex-container {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

.input_label {
	color: var(--grey-txt-clr)
}

/* ======== SERVICE AND EMPLOYEE CONTAINER ========= */

.service_container,
.employee_container {
	display: grid;
	padding: 1rem 0.75rem;
	border: 1px solid var(--grey-background);
	border-radius: 15px;
	margin: 0.5rem 0;
	font-size: 0.875rem;
	gap: 10px;
	width: 100%;
	cursor: pointer;
}

.service_container:disabled,
.employee_container:disabled {
	cursor: not-allowed;
}

.service_container .radio_design::after,
.employee_container .radio_design::after {
	background: white;
}

.service_container .radio_container input:checked+.radio_design,
.employee_container .radio_container input:checked+.radio_design {
	background-color: var(--main-green);
	border-color: white;
}

.service_container:has(input:checked),
.employee_container:has(input:checked) {
	background-color: var(--main-green);
	color: white;
}

.service_container:has(input:checked) *,
.employee_container:has(input:checked) * {
	color: white;
}

/* ======== SERVICE CONTAINER ========= */

.service_container {
	grid-template-columns: 60% 5% 25% 5%;
}

.service-duration-div {
	color: var(--grey-txt-clr);
	font-size: 0.75rem;
}

.service-duration-div i {
	color: var(--grey-txt-clr);
}

.service_container .radio_design {
	margin-left: .5rem;
}

/* ======== EMPLOYEE CONTAINER ========= */

#all_employees_container {
	max-height: 480px;
	overflow: scroll;
}

.employee_container {
	grid-template-columns: 20% 35% 27% 5%;
	gap: 15px;
}

.picture-container {
	position: relative;
	display: grid;
	width: 60px;
	height: 60px;
	background-color: white;
	border-radius: 50%;
	align-items: center;
}

.employeePicture {
	width: 100%;
	border-radius: 50%;
}

.language-container-mobile {
	display: none;
}

.language-icons img {
	width: 18px;
	height: 18px;
	border-radius: 50%;
}

/* ======== ALL MEDIA QUERIES ========= */
@media (max-width: 1350px) {
	.service_container {
		grid-template-columns: 50% 10% 25% 5%;
	}
}

@media (min-width: 850px) and (max-width: 950px) {
	.left-side {
    	padding: 12rem 3rem 2rem 3rem;
		min-width: ;
	}

	.employee_container {
		display: grid;
		grid-template-columns: auto auto;
		grid-template-rows: auto auto;
		gap: 0.5rem;
		align-items: start;
	}

	.employee_container>.picture-container {
		grid-column: 1;
		grid-row: 1;
	}

	.employee_container>.employee-info-container {
		grid-column: 2;
		grid-row: 1;
		width: 80%;
	}

	.employee_container>.language-container {
		grid-column: 1 / span 2;
		grid-row: 2;
	}

	.employee_container>.radio_container {
		grid-column: 3;
		grid-row: 1 / span 2;
		height: 100%;
	}

	.employee_container>.content-center {
		display: flex;
		justify-content: left;
		align-items: center;
	}
}

@media (max-width: 850px) {
	#all_employees_container {
		max-width: 400px;
	}

	.left-side, .right-side {
		min-width: 100%;
	}
}

@media (max-width: 550px) {
	.service_container {
		display: grid;
		grid-template-columns: 1fr auto;
		gap: 0.5rem;
		align-items: start;
	}

	.service_container>.radio_container {
		grid-column: 2;
		grid-row: 1 / span 3;
		height: 100%;
	}

	.service_container>.content-center {
		grid-column: 1;
		display: flex;
		justify-content: left;
		align-items: center;
	}

	.service_container .radio_design {
		left: -1rem;
	}

	.employee_container {
		display: grid;
		grid-template-columns: auto auto;
		grid-template-rows: auto auto;
		gap: 0.5rem;
		align-items: start;
	}

	.employee_container>.picture-container {
		grid-column: 1;
		grid-row: 1;
	}

	.employee_container>.employee-info-container {
		grid-column: 2;
		grid-row: 1;
	}

	.employee_container>.language-container {
		grid-column: 1 / span 2;
		grid-row: 2;
	}

	.employee_container>.radio_container {
		grid-column: 3;
		grid-row: 1 / span 2;
		height: 100%;
	}

	.employee_container>.content-center {
		display: flex;
		justify-content: left;
		align-items: center;
	}

	.employee_container .radio_design {
		left: 2rem;
	}
}

@media (max-width: 480px) {
	#icb-time .input_label {
		margin-bottom: .5rem;
	}

	#all_employees_container {
		max-width: 100%;
	}

	.employee_container {
		display: flex;
		align-items: center;
		padding: 1.5rem;
		gap: 1.5rem;
	}

	.language_container {
		display: grid;
		justify-items: center;
	}

	.employee_container>.language-container {
		display: none !important;
	}

	.employee_container .language-container-mobile {
		display: block;
		margin-top: .5rem;
		gap: .5rem;
	}

	.employee_container>.picture-container {
		display: block;
	}

	.employee-info-container .flex-col {
		gap: .125rem;
	}

	.employee_container>.radio_container {
		display: none;
	}
}