.subpage {
	display: none;
}

#eb-content {
	margin-top: 20px;
}

#eb_maincontainer {
}

.product-list {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	margin-left: -20px !important;
	margin-bottom: 30px !important;
	overflow: hidden !important;
}

.product-list li {
	margin: 0;
	border: 1px solid var(--th-border-color-grey);
	margin-top: 20px;
	margin-bottom: 20px;
	background: #ffffff;
	box-shadow: 0 0 7px 0 rgba(0,0,0,0.12), inset 0 0 0 1px rgba(0,0,0,0.07);
	float: left;
	margin-left: 20px;
	position: relative;
	overflow: hidden;
	border-radius: var(--th-border-radius);
	padding-top: 1rem; /* Bootstrap pt-3 -  Lisätty #facelift */
	padding-bottom: 1rem; /* Bootstrap pb-3 - Lisätty #facelift */
}
	
.product-list li .cursor-default {
	cursor: default !important;
}

.product-list li > .product-list-icon {
	display: block;
	width: 165px;
	width: 175px; /* Vaihdettu 165px => 175px #facelift */
	height: 225px; /* Vaihdettu 180px => 225px #facelift */
	margin: 40px;
	margin-bottom: 0;
	text-align: center;
}

.product-list li > .product-list-icon > img {
	max-width: 117px;
}

.product-list li > .product-list-info {
	/*min-height: 7rem; Tämä kommentoitu pois #facelift*/
	width: 195px;
	/*overflow: hidden;  Tämä kommentoitu pois #facelift*/
}

.product-list li > .product-list-info > .th-text-product-card-title {
	display: block;
	padding: 16px;
	color: var(--esininen);
	font-size: 1em;
	font-weight: 600;
	padding-bottom: 20px;
}
.product-list li > .product-list-info span.type-name {
	display: inline-block;
	background: var(--eliila);
	color: #fff;
	height: 17px;
	padding: 0 4px 15px 4px;
	font-size: 0.7em;
	font-weight: normal;
	margin-top: 3px;
	/*--*/
	position: absolute;
	top: 0;
	left: 3px;
	border: 1px solid #fff;
	/*--*/
}
.product-list li > .product-list-info span.type-name:nth-child(2) {
	top: 15px;
}
.product-list li > .product-list-info span.type-name:nth-child(3) {
	top: 30px;
}
.product-list li > .product-list-info span.type-name:nth-child(4) {
	top: 45px;
}
.product-list li > .product-list-info > .th-text-product-card-title:hover {
	text-decoration: none;
}

	.product-list li > .product-list-info.type-info > .th-text-product-card-title:after {
		content: '';
		display: inline-block;
		background: var(--eliila);
		color: #fff;
		height: 12px;
		/*line-height: 12px;*/
		padding: 0 4px 2px 4px;
		font-size: 0.7em;
		font-weight: normal;
		margin-top: 3px;
		/* Lätkä siirretty yläkulmaan sillä se vie tilaa. Esim. käyttäjämäärä ei mahdu näkyviin, jos tuotteen nimi on pitkä. */
		/*--*/
		position: absolute;
		top: 0;
		right: 3px;
		border: 1px solid #fff;
		/*--*/
	}

/* Täällä korvattu product-title-name => th-text-product-card-title #facelift */
.product-list li > .product-list-info.type-info.type-school-license > .th-text-product-card-title:after {
	content: 'Koululisenssi';
}

.product-list li > .product-list-info.type-info.type-ip-license > .th-text-product-card-title:after {
	content: 'IP-käyttöoikeus';
}

.product-list li > .product-list-info.type-info.type-trial > .th-text-product-card-title:after {
	content: 'Koekäyttö';
}

/* # Toisen asteen oppilaitoslisenssit */
/* -- */
.product-list li > .product-list-info.type-info.type-seclevel-lukio > .th-text-product-card-title:after {
	content: 'Lukiolisenssi';
}
.product-list li > .product-list-info.type-info.type-seclevel-ammatillinen > .th-text-product-card-title:after {
	content: 'Ammatillinen lisenssi';
}
.product-list li > .product-list-info.type-info.type-seclevel-digikoe > .th-text-product-card-title:after {
	content: 'Digikokeet';
}
.product-list li > .product-list-info.type-info.type-seclevel-opeaineisto > .th-text-product-card-title:after {
	content: 'Opettajan aineisto';
}
.product-list li > .product-list-info.type-info.type-seclevel-minidigi > .th-text-product-card-title:after {
	content: 'Opiskelijan digiaineistot';
}
.product-list li > .product-list-info.type-info.type-seclevel-digipaketti > .th-text-product-card-title:after {
	content: 'Digipaketti';
}
/* -- */

.product-list li > .product-list-info > .product-list-validdate {
	color: #939598;
	font-weight: 600;
	font-size: 0.7em;
	padding: 15px;
	padding-top: 0;
}

.button {
	display: inline-block;
	padding: 0 10px;
	line-height: 26px;
	background-color: #004c5e;
	color: #ffffff;
	font-size: 1em;
	text-decoration: none;
	cursor: pointer;
}

.button.white {
	color: #004c5e;
	background-color: #ffffff;
}

.button.black {
	background-color: #141414;
}

.delete-group {
	margin-top: 5px;
}
/* Muokattu tyylejä #facelift */
.product-list li > .product-list-actions > a {
	color: var(--th-violet-110);
	/*text-align: center;*/
	font-family: Inter;
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	line-height: 120%;
	/*text-decoration: none; Kommentoitu pois #facelift */
	display: block;
	padding-left: 15px;
	/*padding-right: 15px;*/
	/*height: 2rem;*/
	cursor: pointer;
	padding-top: 0.75rem; 
	padding-bottom: 0.75rem
}

.product-list li > .product-list-actions > a:hover {
	color: var(--th-violet-120);
	background-color: var(--th-violet-20);
	text-decoration: none !important;
	border-radius: 4px;
}

/* yksi nappi*/
.product-list li > .product-list-actions > a:first-child:nth-last-child(1) {
	margin-top: 1rem;
	/* Tämä oli 3rem #facelift */
}

/* kaksi nappia */
.product-list li > .product-list-actions > a:first-child:nth-last-child(2),
.product-list li > .product-list-actions > a:first-child:nth-last-child(2) ~ li {
	margin-top: 1rem;
}

/* ei yhtään nappia */
.product-list li > .product-list-actions:empty:after {
	display: block;
	content: "";
	margin-top: 7rem;
}

/* Poistettu käytöstä #facelift */
/*.product-list li > .product-list-actions > a:first-child {
	box-shadow: inset 0px 1px 0 0 #dbdcdd, inset 0 -35px 35px -35px rgba(0,0,0,0.15);
}*/

.edit-add {
	background-color: var(--eliila);
	color: #fff;
	margin-bottom: 40px;
}

#content ul.group-list {
	list-style: none;
	padding: 0;
	margin: 0;
	margin-left: -10px;
}


.group {
	margin-bottom: 20px;
	float: left;
	width: 50%;
}

@media only screen and (max-width: 1100px) {
	.group {
		width: 100%;
	}
}

.group-header {
	/*padding: 20px;*/
	border-top: 7px solid var(--eliila);
	margin-left: 10px;
	position: relative;
	overflow: hidden;
	box-shadow: 0 0 7px 0 rgba(0,0,0,0.12), inset 0 0 0 1px rgba(0,0,0,0.07);
}

.group-header-wrapper {
	padding: 20px;
}

a.group-header-handle {
	position: relative;
	/*float: left;*/
	display: block;
	/*padding-right: 25px;*/
	background-color: var(--th-cream-blue);
	color: var(--th-text-color-primrary);
	text-decoration: none;
	margin-top: 10px;
	font-family: 'Inter', Arial, sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 27px;
	letter-spacing: 0em;
	text-align: left;
	padding: 12px 24px 0 20px;
}

a.group-header-handle:before {
	content: "Muokkaa ryhmää";
	/*margin-left: 20px;*/
}

a.group-header-handle:after {
	/*Täältä kommentoitu tyylejä pois ja muutettu #facelift */
	display: inline-block;
	/*position: absolute;*/
	/*top: 50%;*/
	/*margin-top: -12px;*/
	/*right: 180px;*/
	font-family: 'Font Awesome 6 Pro';
	content: '\f078';
	color: var(--th-text-color-primary);
	font-size: 16px;
	font-weight: 900;
	margin-left: 1rem; /* Bootstrap ms-2 */
}

.group-header > .group-header-name {
	color: #004c5e;
	font-weight: bold;
	font-size: 1.3em;
	padding-right: 20px;
	width: 50%;
	box-sizing: border-box;
	float: left;
}

.group-header-info > p,
.group-header-info > div {
	font-size: 0.83em;
}

.group-header-info > p > em,
.group-header-info > div > em {
	font-weight: bold;
	font-style: normal;
}

.user-table-container {
	display: none;
}

.group .user-table {
	display: block;
	background: var(--th-cream-blue);
	padding: 0 12px;
	/*border: 1px solid #c0c0c0;*/
	max-height: 150px;
	overflow: auto;
	width: 100%;
	font-size: 14px;
	/*max-width: 450px;*/ /* Muutettu 350px => 450px #facelift*/
	/*margin-top: 10px;*/
}

.group.opened .group-header > a.group-header-handle:after {
	/*-moz-transform: scaleY(-1);
	-o-transform: scaleY(-1);
	-webkit-transform: scaleY(-1);
	transform: scaleY(-1);*/
	transform: scaleY(-1);
}

.group.opened .user-table-container {
	display: block;
}

.user-table table {
	width: 100%;
	border-collapse: collapse;
}

.user-table table th, .user-table table td {
	padding: 5px;
	padding-left: 10px;
	font-size: 0.8em;
	text-align: center;
}

.user-table table th {
	font-weight: bold;
}

.user-table table th:first-child, .user-table table td:first-child {
	text-align: left;
	padding-left: 0px;
}

.user-table table td:last-child {
	text-align: right;
	padding-right: 10px;
}

.user-table table td:last-child a {
	color: #004c5e;
}

	.user-table table td {
		color: var(--esininen);
	}

.user-table table tr td:first-child > span:first-child {
	font-weight: bold;
	display: inline-block;
	margin-right: 0.4em;
}

.list-item-student {
	margin-bottom: 10px;
}

.list-item-student > span {
	color: #004c5e;
	font-size: 1em;
	margin-left: 10px;
}

.list-item-student > span:first-child {
	margin-left: 0;
	font-weight: bold;
}

.list-item-student > span:last-child {
	color: #a0a0a0;
}

.list-item-pending span, .user-table .list-item-pending td {
	color: #cd1a1d;
}

.group-content-pending-actions {
	display: none;
}

.isPending .group-content-pending-actions {
	display: block;
}

.isPending .group-content-students-actions, .isPending .isPendingHide {
	display: none;
}

.group-pending-count-text-part {
	color: #cd1a1d;
}

.group-content-students-actions {
	margin-top: 20px;
}

/*#edit-student-delete-student, #edit-pending-reject {
	background-color: #cd1a1d;
	color: #ffffff;
}*/

/*#edit-student-cancel,
#edit-pending-cancel {
	background-color: transparent;
	box-shadow: inset 0 0 0 1px #004c5e;
	color: #004c5e;
	box-sizing: border-box;
	margin-right: 10px;
}*/

#modal {
	background: rgba(0,0,0,0.3);
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 1000;
	display: none;
}

#edit-student {
	position: fixed;
	width: 500px; /* Ennen max-width: 300px #facelift */
	background-color: #ffffff;
	box-shadow: 0 0 10px 0 rgba(0,0,0,0.15);
	top: 25%;
	left: 50%;
	margin-left: -160px;
	/*padding: 10px;*/
	overflow: hidden;
}

#dk-dialog {
	display: none;
	position: fixed;
	width: 300px;
	overflow: auto;
	background-color: #ffffff;
	box-shadow: 0 0 10px 0 rgba(0,0,0,0.15);
	top: 50%;
	margin-top: -5em;
	left: 50%;
	margin-left: -160px;
	padding: 10px;
}

#modal,
#edit-student {
	display: none;
}

#modal.show-edit-student,
#modal.show-edit-student #edit-student {
	/* important-määre lisätty, jotta dialogit yleensäkään näkyvät*/
	display: block !important;
}

#edit-student p {
	color: #004c5e;
	font-size: 0.7em;
}

.edit-student-title {
	text-transform: uppercase;
	color: #004c5e;
	margin-bottom: 10px;
}

.edit-student-label {
	color: #004c5e;
	font-size: 0.7em;
}

.edit-student-text,
.edit-student-text-label-like {
	margin-bottom: 10px;
}

/*.edit-student-text input {
	background-color: #f3f3f3;
	border: 1px solid #c3c3c3;
	width: 200px;
	padding: 3px;
}*/

.edit-student-text-label-like input {
	background: var(--th-cream-blue);
	border: none;
	color: var(--th-text-color-primary);
	font-family: 'Inter',Arial,sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 150%;
	width: 100%;
}

.upload-excel-actions {
	margin-top: 20px;
}

.upload-excel-actions > a {
	float: right;
	margin-left: 0.5em;
}

#notification {
	display: none;
	position: fixed;
	top: 0px;
	height: 45px;
	left: 0px;
	right: 0px;
	background-color: #f2f2f2;
	overflow: hidden;
	border: 1px solid rgba(0, 0, 0, 0.30);
	z-index: 11000;
}

#notification .notification-text {
	padding-left: 5px;
	padding-right: 5px;
	color: #000000;
	font-size: 18px;
	text-align: center;
	font-size: 22px;
	line-height: 45px;
}

input:focus {
	outline: none;
	box-shadow: 0 0 1px 1px rgba(0, 76, 255, 0.41);
}

#edit-student .ui-menu-item {
	font-weight: normal;
	font-size: 0.8em;
	color: #004c5e;
	box-shadow: inset 0 -1px 0 0px rgba(0,0,0,0.1);
}

#edit-student .ui-menu-item.ui-state-focus {
	background: #f3f3f3;
	border: none;
	font-weight: normal;
	color: #004c5e;
}

.ui-state-hover, ui-button:hover {
	background: none;
	font-weight: normal;
	color: #004c5e;
	border: 1px solid #c3c3c3;
}

#edit-student .ui-icon-triangle-1-s {
	background: none;
}

#edit-student .ui-icon-triangle-1-s {
	display: inline-block;
	width: 15px;
	height: 15px;
	content: "";
	margin-top: -12px;
	background: transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNC4wNSIgaGVpZ2h0PSI4LjY3OSIgdmlld0JveD0iMCAwIDI0LjA1IDguNjc5IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyNC4wNSA4LjY3OSI+PHBhdGggZmlsbD0iI2QwZDBkMCIgZD0ibTEzLjUxNiA4LjY3OWwxMC41MzQtOC42NzloLTUuMzQxYy0uMzgyIDAtLjczMi4wNDMtMS4wNTYuMTI5cy0uNjAyLjIyMS0uODMzLjQwN2wtMy44IDMuMDQzYy0uMjMyLjE3OC0uNDI4LjM3My0uNTg0LjU4My0uMTU4LjIxMS0uMzAzLjQzMS0uNDM2LjY1OS0uMTMyLS4yMjgtLjI2OS0uNDQ4LS40MS0uNjU5LS4xNC0uMjEtLjMyNy0uNDA1LS41NTktLjU4M2wtMy44MjYtMy4wNDNjLS4yMzItLjE4NS0uNTA1LS4zMjEtLjgyLS40MDctLjMxNC0uMDg2LS42NjItLjEyOS0xLjA0My0uMTI5aC01LjM0MmwxMC41MSA4LjY3OWgzLjAxIi8+PC9zdmc+") no-repeat bottom !important;
	background-size: contain !important;
}

/*-- Dialogi: Rinnakkaiskäyttäjätunnuksien hallinta --------*/
.ui-dialog {
	font-size: 0.9em;
}
/*-- Dialogi: Rinnakkaiskäyttäjätunnuksien hallinta: loppu --------*/

/*TODO: tämä on hotfix! pitää korjata juurisyy, eli vapauta lisenssejä -dialogin leveys on automaattisesti väärä!*/
.ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-front[aria-describedby="dialog-modal-activation-code-license-manager"] {
	width: 400px !important;
}


#eb-content {
	min-height:150px;
	position:relative;
}

#eb-content:after {
	opacity: 0;
}
#eb-content.loading *, #fav-list-container.loading * {
	display: none;
}
#eb-content.loading:after, #fav-list-container.loading:after {
	display: block;
	content: "Haetaan sisältöä, odota hetki...";
	color: #222;
	font-size: 1rem;
	text-align: center;
	padding: 2rem;
	animation: 1s ease 0s normal forwards 1 loadingfadein, loadingtext 3s infinite;
}
#eb-content.loading.immediate:after, #fav-list-container.loading.immediate:after {
	animation: 0s ease 0s normal forwards 1 loadingfadein, loadingtext 3s infinite;
}

/*Lisenssin 3kk jatko -sivu alkaa*/

/*tää on myös master-v22.css -filussa*/
#NavLinkLicenseJatko {
	display: none;
	/*padding-top: 0,5em;
	margin-top: 0,5em;
	border-top: solid 2px white;
	font-size: 0.9rem;
	width: 60%;*/
}
#lisenssiJatkoBanner > div.etunimi {
	background-color: whitesmoke;
	padding: 20px 10px 20px 10px;
}

#lisenssiJatkoBanner > div.nappi-jatkolinkki {
	width: 30%;
	/*display: inline-block;*/
}

#lisenssiJatkoBanner > .jatko-banner-container {
	display: grid;
	justify-items: center;
	grid-template-rows: 1fr;
	grid-template-columns: 2fr 1fr;
	width: 100%;
	/*grid-column-gap: 10%;*/
	background-color: aliceblue;
	align-items: center;
}

#lisenssiJatkoBanner > .jatko-banner-container > div.etunimi{
	padding: 10px 10px 10px 20px;
}
#lisenssiJatkoBanner > .jatko-banner-container > div.nappi-jatkolinkki > a {
	height:initial;
}

div.body-gridtable {
	background-color: ghostwhite;
	display: grid;
	grid-template-columns: 0.7fr 3fr 2fr 2fr;
	grid-template-rows: 1fr;
	/*grid-template-rows: repeat(999, 100px);*/
	grid-column-gap: 0px;
	grid-row-gap: 0px;
	/*grid-row-gap: 5px;*/
	border-top: 10px solid white;
	height: 105px;
}
div.body-gridtable .headerrow-gridtable.image {
	padding: 5px 0px 5px 5px;
}
div.body-gridtable .headerrow-gridtable {
	background-color: lightblue;
}
div.body-gridtable  > div:not(.image) {
	padding-left: 10px;
}
div.body-gridtable .headerrow-gridtable:not(.image) {
	padding: 5px 0px 5px 0px;
}
div.body-gridtable > div > img {
	height: 95px;
	padding: 5px;
/*    display: block;
	margin-left: -3px;*/
}
.body-gridtable > div:not(.image, .headerrow-gridtable) {
	align-self: center;
}

/*
div.body-gridtable > div.grid-row-spacer {
	height: 10px;
	background-color: white;
	display:block;
	width: 100%;
}*/

/*Lisenssin 3kk jatko -sivu loppuu*/
span.action-button.copy-linkcode {
	float: right;
	margin-right: 11px;
	background-color: initial;
	border: 1px solid black;
}

.copy-licensecode-container {
	margin-right: 55px;
	padding-left: 15px;
}
.copy-licensecode-title {
	color: #939598;
	font-weight: 600;
	font-size: 0.7em;
	padding: 15px;
	padding-top: 0;
	padding-bottom: 0;
}

.action-button {
	font-family: 'Inter';
	display: inline-block;
	background-color: var(--th-violet-default);
	color: #fff;
	border-radius: 2px;
	font-size: 10px;
	padding: 5px;
	line-height: 11px;
	cursor: pointer;
}

input.licensecode {
	width: 70px !important;
	padding: 0px !important;
	margin: 0 !important;
	outline: none !important;
	font-size: 11px;
	border: none !important;
	background: transparent;
	color: #404040 !important;
	margin-bottom: 0.5rem !important;
}

@keyframes loadingfadein {
	0% {
		opacity: 0;
	}
	66% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes loadingtext {
	0% {
		color: #222222;
	}

	15% {
		color: #fff;
	}

	30% {
		color: #222222;
	}

	100% {
		color: #222222;
	}
}