.m_appointments.G_grid {
	padding-top: 0.5rem;
	grid-template-columns: var(--m_grid_col_appointments);
	grid-template-rows: var(--m_grid_row_appointments);
/*	align-items: end;*/
	justify-items: center;
}

.m_appointments.G_grid[data-active]:not([data-active=""]) {
	padding-top: 0;
	grid-template-columns: var(--m_grid_t_cols_app);
	grid-template-rows: var(--m_grid_t_rows_app);
}

.m_appointments.show_artikle .app_items {
	overflow: hidden;
}

.app_element {
	position: relative;
	cursor: pointer;
	grid-template-rows: var(--m_grid_t_rows_app_el);
	grid-template-areas: "top" "pic" "space1" "num" "space2" "txt" "bottom";
	width: 80%;
	height: 90%;
	background-image: linear-gradient(145deg, transparent 30%, var(--main_bkg_rgb_color_0-5) 125%);
	border-radius: var(--m_border_r_app);
/*	box-shadow:  0.15rem 0.15rem 0.25rem rgba(var(--mainColorRGB), 0.5);*/
	box-shadow: var( --mainShadow );
	border-left: 1px solid rgba(255, 255, 255, 0.5);
	border-top: 1px solid rgba(255, 255, 255, 0.5);
	border-right: 1px solid rgba(255, 255, 255, 0.25);
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
	/*backdrop-filter: blur(0.25vw);*/
	transition: height 0.5s ease-out, opacity 0.25s 0.25s ease-in; /*width 0.5s ease-out, */
}
.m_appointments[ data-active = "" ] .app_element {
	overflow: hidden;
}
.m_appointments[ data-active = "" ] .app_element[ data-in_action = "1" ]::before {
  content: "— %";
  position: absolute;
  top: 0.5rem;
  right: -1.5rem;
  width: 6rem; /* Length of the strip */
  height: 1rem; /* Thickness of the strip */
  background-color: #f28f3b;
  transform: rotate( 45deg ); /* Rotate to create diagonal strip */
/*  transform-origin: top right;*/ /* Set the rotation point */
  color: white;
  text-align: center;
}


.app_element[ data-in_action = "1" ] {
	background-color: var( --secondColorRGB_0-5 );
}
.app_element .ap_total {
	grid-area: num;
	font-size: var(--m_font_size_app_total); /*1vw;*/
	font-weight: bolder;
	z-index: 1;
}

.app_element > a {
	grid-area: txt;
	font-size: var(--m_font_size_app_a); /*1.75vw;*/
	font-weight: 600;
	text-decoration: none;
	color: inherit;
	z-index: 1;
}

.app_element[ data-total = "0" ] {
	background-color: LavenderBlush;
}

.app_element:hover {
	background-image: linear-gradient(145deg, transparent 30%, var(--secondColorRGB_0-5) 125%);
}

.app_items {
	position: absolute;
	top: var( --m_app_items_top );
	width: 100%;
	height: calc( 100% - var( --m_app_items_top ) );
	display: none;
	overflow-y: auto;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-evenly;
}
/*
.ap_discount_pic {
	grid-area: top;
	display: none;
	position: absolute;
	right: 0.5rem;
	height: 3rem;
	width: 3rem;
	background: url("/imgs/appointments/in_action.png") center no-repeat;
	background-size: contain;
	z-index: 2;
}
.m_appointments[data-active=""] .app_element[ data-in_action = "1" ] .ap_discount_pic {
	display: block;
}
*/
.app_element .ap_pic {
	grid-area: pic;
	z-index: 1;
}

.app_element .ap_pic > img {
	max-width: 100%;
	max-height: 100%;
	padding: 1.5vw;
	border-radius: 50%;
/*	background: radial-gradient(farthest-corner at 40% 40%, white 45%, rgb(var(--mainColorRGB)) 85%, rgb(var(--mainColorRGB)) 100%);
	box-shadow: 0.25vw 0.25vw 3vw rgba(var(--mainColorRGB), 0.5), 0 0 2px white;*/
	background-color: white;
	backdrop-filter: blur(0.25vw);
	opacity: 1;
}

.m_appointments:not( [ data-active="" ] ) .app_element .ap_pic {
	padding: 0.5vw;
}

.ap_total_text {
	padding-left: 5%;
}

.m_appointments:not( [ data-active="" ] ) .app_element.active {
	grid-area: selected;
	width: 100%;
/*	height: calc( 100% - var( --m_margin_top_sel ) );
	margin-top: var( --m_margin_top_sel );*/
	grid-template-columns: var( --m_grid_t_cols );
	grid-template-rows: 3rem auto;
	grid-template-areas: "pic txt num" "items items items";
}

.m_appointments:not( [ data-active="" ] ) .app_element.active .app_items {
	display: flex;
}

.m_appointments:not( [ data-active="" ] ) .app_element.active .ap_total {
	display: flex;
	position: relative;
	top: -50%;
	height: var(--m_height_app_el_a);
    margin-left: var(--m_border_r_app_el_a);
	padding: var(--m_padding_app_el_a);
/*	justify-self: flex-start;*/
	justify-content: center;
	border-radius: var(--m_border_r_app_el_a);
	align-items: center;
	font-size: var(--m_font_size_app_el_a);
}

.m_appointments:not( [ data-active="" ] ) .app_element.active .ap_pic {
	position: relative;
	padding: 0;
	top: -50%;
	width: 5.5vw;
	height: 5.5vw;
	border-radius: 50%;
	box-shadow: 0.25vw 0.25vw 3vw rgba(var(--mainColorRGB), 0.5);
	background-image: linear-gradient(145deg, white 30%, rgba(var(--mainColorRGB), 0.75) 125%);
}

.m_appointments:not( [ data-active="" ] ) .app_element.active > a {
/*    justify-self: flex-end;*/
	position: relative;
	top: -50%;
	height: var(--m_height_app_el_a);
    margin-right: var(--m_border_r_app_el_a);
/*	transform: translateY(-10%);*/
	padding: var(--m_padding_app_el_a);
	border-radius: var(--m_border_r_app_el_a);
	font-size: var(--m_font_size_app_el_a);
}
/*
.m_appointments:not([data-active=""]) .app_element:not(.active) {
	align-self: center;
}*/

.m_appointments:not([data-active=""]) .app_element {
	grid-template-columns: var(--m_grid_t_cols_app_el_s);
	grid-template-rows: var(--m_grid_t_rows_app_el_s);
	grid-template-areas: "pic num" "txt txt";
	/*	height: 75%;*/
	border-radius: var(--m_border_r_app_s);
}

.m_appointments:not([data-active=""]) .app_element .ap_pic {
	grid-area: pic;
	margin-top: 0;
}

.m_appointments:not([data-active=""]) .app_element .ap_pic > img {
	padding: var(--m_padding_app_el_img);
	background-color: transparent;
}

.m_appointments:not([data-active=""]) .app_element .ap_total {
	/*	grid-area: num;*/
	font-size: var(--m_font_size_app_total_s);
}

.m_appointments:not([data-active=""]) .app_element > a {
	font-size: var(--m_font_size_app_a_s);
}
/*
.m_appointments.show_artikle {
	top: var( --m_nav_neg_marg_b );
}
*/
.m_appointments.show_artikle .app_element.active {
	box-shadow: none;
	margin-top: 0;
}