*, ::after, ::before{
	box-sizing: border-box;
}
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');

@font-face {
	font-family: 'Caslon Doric Web';
	src: url('https://prepmyfuture-assets.s3.eu-west-1.amazonaws.com/CaslonDoric-Semibold-Web.woff2') format('woff2'),
	url('https://prepmyfuture-assets.s3.eu-west-1.amazonaws.com/CaslonDoric-Semibold-Web.woff') format('woff');
	font-weight: 600;
	font-style: normal;
	font-stretch: normal;
}

:root {
  --primary1:hsl(358,95%,22%);
  --primary2:hsl(358,95%,32%);
  --primary3:hsl(358,95%,42%);
  --primary4:hsl(358,95%,50%);
  --primary5:hsl(0,100%,62%);
  --primary6:hsl(2,100%,72%);
  --primary7:hsl(3,95%,80%);
  --primary8:hsl(10,90%,92%);
	--primary9:hsl(24,71%,97%);


	--secondary1:hsl(200, 97%, 39%);
  --secondary2:hsl(200, 97%, 45%);
  --secondary3:hsl(200, 97%, 60%);
  --secondary4:hsl(200, 97%, 65%);
  --secondary5:hsl(200, 97%, 70%);
  /*--secondary6:hsl(200, 97%, 75%);*/
  --secondary7:hsl(200, 97%, 87%);
  --secondary8:hsl(200, 97%, 91%);
  --secondary9:hsl(200, 97%, 96%);

	--tertiary8:hsl(24, 71%, 92%);
	--tertiary9:hsl(24, 71%, 97%);

	--neutral1:hsl(219, 22%, 31%);
	--neutral2:hsl(217, 20%, 37%);
	--neutral3:hsl(215, 20%, 44%);
	--neutral4:hsl(214, 20%, 52%);
	--neutral5:hsla(220, 22%, 31%, 0.4);
	--neutral6:hsla(220, 22%, 31%, 0.3);
	--neutral7:hsla(220, 22%, 31%, 0.2);
	--neutral8:hsl(212, 33%, 94%);
	--neutral9:hsl(220, 45%, 98%);

	--danger1:var(--primary1);
	--danger2:var(--primary2);
	--danger3:var(--primary3);
	--danger4:var(--primary4);
	--danger5:var(--primary5);
	--danger6:var(--primary6);
	--danger7:var(--primary7);
	--danger8:var(--primary8);
	--danger9:var(--primary9);

  --success1:hsl(145, 64%, 13%);
  --success2:hsl(145, 64%, 33%);
  --success3:hsl(145, 64%, 23%);
  --success4:hsl(145, 64%, 33%);
  --success5:hsl(145, 64%, 43%);
  --success6:hsl(145, 64%, 53%);
  --success7:hsl(145, 64%, 63%);
  --success8:hsl(145, 64%, 80%);
	--success9:hsl(145, 64%, 93%);

  --warning1:hsl(30, 100%, 20%);
  --warning2:hsl(30, 100%, 30%);
  --warning3:hsl(30, 100%, 40%);
  --warning4:hsl(30, 100%, 50%);
  --warning5:hsl(30, 100%, 60%);
  --warning6:hsl(30, 100%, 70%);
  --warning7:hsl(30, 100%, 80%);
  --warning8:hsl(30, 100%, 90%);
	--warning9:hsl(30, 100%, 95%);

	--admin:#990099;

	--mainfontfamily:'DM Sans', sans-serif;
	--titlefontfamily:'Caslon Doric Web', sans-serif;
	--titlefontweight:600;
}


/* RESPONSIVE */
@media (max-width: 950px) {
	.hide_responsive {display:none;}
}

@media (max-width: 507px) {
	.show_transaction table tr{
			display: flex;
			margin: 0px 0;
			justify-content: center;
			flex-direction: column;
			height: 110px;
	}
}

body {
	font-family:var(--mainfontfamily);
	background-image: url("https://prepmyfuture-assets.s3.eu-west-1.amazonaws.com/platform2022/layout/body-header-bg.png");
	background-repeat: no-repeat;
	background-position: top 0 right 0%;
	color:var(--neutral1);
	font-size: 16px;
	border-top: var(--primary4) 5px solid;
	min-width: 420px;
}

.container {
	padding-bottom:60px;
}

/*----------------------------
            HEADER
------------------------------*/
header .container {
	padding-bottom:0px;
}
.navPlatform{
	background-color: #ffffff;
	box-shadow: 0px 0px 40px 0px #55555514;
	border-radius:100px;
	opacity: 1;
	padding: 6px 11px 6px 11px;
}
.myAccount{
	background-color: var(--secondary7);
	border-radius:100px;
}
.navPlatform .nav-item.active_header_tab{
	background-color: var(--neutral1);
	border-radius: 100px;
	color: white !important;
}
.navPlatform .nav-item.active_header_tab .nav-link{
	background-color: var(--neutral1);
	border-radius: 100px;
	color: white !important;
}
.nav-item{
  padding: 0 0.8rem;
}
.nav-item .nav-link {
  color: var(--neutral1);
}
.nav-item .nav-link:hover {
  color: var(--primary5);
}

.btnDropdownLanguage{
  border: none;
  background: none;
}
.dropdownLanguage.dropdown-menu.show{
  top: 38px;
  border: none;
  left: 13px;
  font-size: 14px;
}
.dropdownLanguage.dropdown-menu .dropdown-item:hover {
  background: none;
  color: var(--primary5);
}
/* END - HEADER */

#flash-msg-container {text-align:center; font-weight:bold;}
#flash-msg-container .flash_success {background:var(--success8);  padding:3px 12px;}
#flash-msg-container .flash_notice {background:var(--warning8);  padding:3px 12px;}
#flash-msg-container .flash_error {background:var(--danger8);  padding:3px 12px;}

a {
	text-decoration:none;
}
h1, h2, h3, h4 {
	font-family: var(--titlefontfamily);
	font-weight: var(--titlefontweight);
	text-align:left;
}
h1 {
	font-size: 52px;
}
h2 {
	font-size: 40px;
}
h3 {
	font-size: 20px;
}

.btn {
	box-shadow:0 1px 5px hsla(0, 0%, 0%, .2);
	border-radius:60px;
	padding:0.5rem 1.4rem;
}
.btn:hover {
	background-color:var(--neutral8)!important;
}
.btn.btn-small {
	font-size:14px;
	line-height:1.2;
	padding:6px 14px;
	background-color:var(--neutral9)!important;
}
.btn.btn-lg {
	padding:0.6rem 2.2rem;
}
.btn.btn-primary {
	background-color:var(--primary5)!important;
	border:none;
}
.btn.btn-secondary {
	color:var(--neutral2);
	background-color:var(--neutral8)!important;
}
.btn.btn-secondary:hover {
	background-color:var(--neutral7)!important;
}
.btn.btn-admin, .btn.btn-admin.btn-primary, .btn.btn-admin.btn-secondary {
	background-color: var(--admin) !important;
}

.show_transaction input,select {
	border:1px solid var(--neutral6);
	border-radius:4px;
	box-shadow: 0px 0px 14px rgba(85, 85, 85, 0.1);
	padding:8px 14px;
}

.show_transaction select{
		display: inline-block;
		font: inherit;
		line-height: 1.5em;
		padding: 0.5em 3.5em 0.5em 1em;
		width: 100%;
		height: 50px;
		border-radius: 20px;
		border:1px solid var(--secondary6);
		margin: 0;
		cursor: pointer;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		-webkit-appearance: none;
		-moz-appearance: none;
}

select.arrow {
		background-image:
		linear-gradient(45deg, transparent 50%, var(--neutral1) 50%),
		linear-gradient(135deg, var(--neutral1) 50%, transparent 50%),
		linear-gradient(to right, var(--secondary5), var(--secondary5));
  background-position:
    calc(100% - 20px) calc(1em + 5px),
    calc(100% - 10px) calc(1em + 5px),
    100% 0;
  background-size:
    10px 10px,
    10px 10px,
    2.5em 3.5em;
  background-repeat: no-repeat;

}


.show_transaction tr {
	height:80px;
}

.show_transaction select,
.show_transaction input {
	width: 100%;
	height: 50px;
	border-radius: 20px;
}

.h1_header {
	background-repeat: no-repeat;
	background-position: bottom -60px right 60px;
	padding: 60px 0 0 0;
}
.h1_header.lesson_header {
	background-image:url('https://prepmyfuture-assets.s3.eu-west-1.amazonaws.com/platform2022/layout/body-header-icon-lesson.png');
	background-position: bottom 0px right 60px;
}
.h1_header.lesson_header.header_large {
	background-position: top 30% right 60px;
}
@media (max-width: 1000px) {
	.h1_header.lesson_header {
		background-image:none;
	}
	.show_transaction .col-lg-6:first-child {
		border-right:none;
		border-bottom:1px solid rgba(0, 0, 0, 0.252);
		padding-bottom: 32px;
		margin-bottom: 32px;
	}
}
.h1_header h1 {
	padding-top:24px;
	padding-bottom:31px;
	margin-bottom:0;
	max-width:720px;
	min-height:170px;
}

.card {
	border:none;
	box-shadow: 0px 0px 40px rgba(85, 85, 85, 0.12);
	border-radius: 60px;
}
.card .card-header {
	padding:12px 30px;
	border-top-left-radius:60px;
	border-top-right-radius:60px;
}
.card .card-body {
	padding:30px;
}
.card-secondary {
	padding:30px;
	background:var(--tertiary9);
	border-radius:30px;
	box-shadow: 0px 0px 10px rgba(85, 85, 85, 0.12);
}
.box_tabs {
	display:flex;
	font-family: var(--titlefontfamily);
	font-weight: var(--titlefontweight);
	border-bottom: 1px solid var(--neutral7);
}
.box_tabs .tab {
	text-align:center;
	padding:20px 0 20px 0;
}
.box_tabs .tab a {
	color: var(--neutral5);
	padding-left:10px;
	padding-right:10px;
}
.box_tabs .tab.active_tab a, .box_tabs .tab a:hover  {
	padding-bottom:21px;
	border-bottom:3px var(--primary5) solid;
	text-decoration:none;
	color: var(--neutral1);
}
.sub_tab {
	padding: 6px 24px;
	border: var(--neutral5) solid 1px;
	margin:8px 8px;
	float:left;
	cursor:pointer;
	border-radius:30px;
	box-shadow: 0px 0px 6px rgba(85, 85, 85, 0.15);
	background:white;
}
.sub_tab.active {
	color:var(--primary5);
	border:1px solid var(--primary5);
	font-weight:600;
	background:var(--tertiary9);
}
/* BIG HORIZONTAL MENU - TEACHERS */
.horizontal-menu {background:white; border-radius:20px; padding:0px; margin-bottom:30px; border:2px var(--neutral1) solid;}
.horizontal-menu .tab {text-transform:capitalize; float:left; border-right:2px var(--neutral1) solid; padding: 6px 0px; text-align:center;}
.horizontal-menu .tab.first_tab {border-top-left-radius:20px; border-bottom-left-radius:20px;}
.horizontal-menu .tab.last_tab {border-top-right-radius:20px; border-bottom-right-radius:20px; border-right:none;}
.horizontal-menu a {color:black;}
.horizontal-menu .tab.active_tab {background:var(--primary5);}
.horizontal-menu .tab.active_tab a, .horizontal-menu a.active_tab {color:white;}

.container-with-bottom-bg {
	background-image: url("https://prepmyfuture-assets.s3.eu-west-1.amazonaws.com/platform2022/layout/bottom-left-bg.png");
	background-repeat: no-repeat;
	background-position: bottom 0 left 0;
	margin:0 -60px -60px -60px;
	padding:0 60px 60px 60px;
	min-height: 221px;
}

.modal_box {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background:white;
	border:2px var(--neutral1) solid;
	padding:32px;
	text-align:center;
	border-radius:20px;
}

/* STICKY BOX */
.stuck {position:fixed; top:0px; left:0px; width:100%; z-index:1; }
.stuck.card {border-bottom:1px var(--neutral6) solid; border-radius:0px; box-shadow: 0px 0px 16px rgba(85, 85, 85, 0.2); margin-top:0px!important;}
.stuck.card .card-body {padding-top:10px; padding-bottom:10px;}



/* ACTIVITIES */
/* icons */
.contained-icon {
	padding:20px;
	color:var(--neutral3);
	background-color: var(--neutral8);
	border-radius:100px;
	box-shadow:1px 2px 2px hsla(0, 0%, 0%, .15);
	display:inline-block;
}
.contained-icon.small-icon {
	padding:6px;
	color:var(--neutral1);
	background-color: var(--tertiary9);
	border-radius:100px;
	box-shadow:none;
	min-width:28px;
	text-align:center;
	display:inline-block;
}

.icon-activity-small {
	display:inline-block;
	background-color:var(--secondary7);
	background-repeat: no-repeat;
	background-position: bottom 50% left 50%;
	min-width:30px;
	height:30px;
	border-radius:50px;
	margin-right:12px;
}
.icon-activity-medium {
	display:inline-block;
	background-color:var(--secondary7);
	background-repeat: no-repeat;
	background-position: bottom 50% left 50%;
	width:60px;
	min-width:60px;
	height:60px;
	border-radius:50px;
	margin-right:12px;
}
.adaptive-activity {
	background-image: url("https://prepmyfuture-assets.s3.eu-west-1.amazonaws.com/platform2022/icons/icon-medium-studyplan-nobg-adaptive.png");
}
.exercise-activity {
	background-image: url("https://prepmyfuture-assets.s3.eu-west-1.amazonaws.com/platform2022/icons/icon-medium-studyplan-nobg-exercise.png");
}
.lesson-activity {
	background-image: url("https://prepmyfuture-assets.s3.eu-west-1.amazonaws.com/platform2022/icons/icon-medium-studyplan-nobg-lesson.png");
}
.test-activity {
	background-image: url("https://prepmyfuture-assets.s3.eu-west-1.amazonaws.com/platform2022/icons/icon-medium-studyplan-nobg-test.png");
}
.book-activity {
	background-image: url("https://prepmyfuture-assets.s3.eu-west-1.amazonaws.com/platform2022/icons/icon-medium-studyplan-nobg-lesson.png");
}

.icon-activity-small.adaptive-activity {
	background-image: url("https://prepmyfuture-assets.s3.eu-west-1.amazonaws.com/platform2022/icons/icon-small-studyplan-nobg-adaptive.png");
}
.icon-activity-small.exercise-activity {
	background-image: url("https://prepmyfuture-assets.s3.eu-west-1.amazonaws.com/platform2022/icons/icon-small-studyplan-nobg-exercise.png");
}
.icon-activity-small.lesson-activity {
	background-image: url("https://prepmyfuture-assets.s3.eu-west-1.amazonaws.com/platform2022/icons/icon-small-studyplan-nobg-lesson.png");
}
.icon-activity-small.test-activity {
	background-image: url("https://prepmyfuture-assets.s3.eu-west-1.amazonaws.com/platform2022/icons/icon-small-studyplan-nobg-test.png");
}
#study-plan-unit-header .icon-activity-small {
	background-color:transparent;
	width: 100%;
	height: 100%;
}
#study-plan-unit-header .icon-activity-small.current_activity {
	/*background-color:var(--primary8);*/
}


/* LISTS */
.row.row-list {margin:0; padding:26px 0px 22px 0;}
.row.row-list.row-not-first {border-top: var(--neutral7) 1px solid;}
.col-padding-bottom {padding-bottom:8px;}
.col-v-align {margin:auto 0;}
.col-right-separator {border-right:1px solid var(--neutral7);}

/* TABLES */
table {
	border-collapse:collapse;
	display:block;
	page-break-inside: avoid;
}

table.v-top td {vertical-align:top;}
table.text-align-left {text-align:left}
table.text-align-left td {text-align:left}
table.text-align-center td {text-align:center}

table.border td, table.border th {border:1px solid grey;}

table.classic, table.sumuary {
	box-shadow: 0px 0px 20px rgba(85, 85, 85, 0.15);
	display: table;
	margin:1em 0;
	border-radius: 30px;
}
table.classic tr:nth-child(even) td {
	background-color:rgba(62, 74, 97, 0.005);
}
table.classic th, table.sumuary td.c1 {
	border:1px solid rgba(157, 194, 220, 0.3);
	background:var(--secondary8);
	text-align:left;
	padding:20px 28px;
	font-weight:bold;
}
table.classic td, table.sumuary td {
	border:1px solid rgba(157, 194, 220, 0.3);
	padding:20px 28px;
	background:#FDF7F3;
}

table.classic tr td:last-of-type,  table.classic tr th:last-of-type, table.sumuary tr td:last-of-type,  table.sumuary tr th:last-of-type {
	border-right: none;
}
table.classic tr td:first-of-type,  table.classic tr th:first-of-type, table.sumuary tr td:first-of-type,  table.sumuary tr th:first-of-type {
	border-left: none;
}
table.classic tr:first-of-type td, table.classic tr:first-of-type th, table.sumuary tr:first-of-type td, table.sumuary tr:first-of-type th {
	border-top: none;
}
table.classic tr:last-of-type td,  table.classic tr:last-of-type th, table.sumuary tr:last-of-type td,  table.sumuary tr:last-of-type th {
	border-bottom: none;
}
table.classic tr:first-of-type th:first-of-type, table.sumuary tr:first-of-type th:first-of-type, table.classic tr:first-of-type td:first-of-type, table.sumuary tr:first-of-type td:first-of-type    {
  border-top-left-radius: 20px;
}
table.classic tr:first-of-type th:last-of-type, table.sumuary tr:first-of-type th:last-of-type, table.classic tr:first-of-type td:last-of-type, table.sumuary tr:first-of-type td:last-of-type {
  border-top-right-radius: 20px;
}
table.classic tr:last-of-type td:first-of-type, table.sumuary tr:last-of-type td:first-of-type, table.classic tr:last-of-type th:first-of-type, table.sumuary tr:last-of-type th:first-of-type {
  border-bottom-left-radius: 20px;
}
table.classic tr:last-of-type td:last-of-type, table.sumuary tr:last-of-type td:last-of-type {
  border-bottom-right-radius: 20px;
}

table.sumuary td {padding: 12px!important;}
table.sumuary td.c1 {width:25%; vertical-align:top}
/* END - tables */

/* PROGRESS BAR */
.progress-bar {background-color: var(--secondary5)}
progress[value] {-webkit-appearance: none; appearance: none; height:15px;}
progress[value]::-webkit-progress-bar {background-color: var(--neutral8); border-radius: 100px;}
progress[value]::-webkit-progress-value {background-color: var(--secondary5); border-radius: 100px; }
progress[value] {background-color: var(--neutral8); border-radius: 100px;}
progress[value]::-moz-progress-bar {background-color: var(--secondary5); border-radius: 100px;}
.verygood progress[value]::-webkit-progress-value {background-color: var(--success5)}
.verygood progress[value]::-moz-progress-bar {background-color: var(--success5)}
.good progress[value]::-webkit-progress-value {background-color: var(--success7)}
.good progress[value]::-moz-progress-bar {background-color: var(--success7)}
.bad progress[value]::-webkit-progress-value {background-color: var(--warning5)}
.bad progress[value]::-moz-progress-bar {background-color: var(--success5)}
.verybad progress[value]::-webkit-progress-value {background-color: var(--danger5)}
.verybad progress[value]::-moz-progress-bar {background-color: var(--danger5)}
/* SECONDARY STYLE WITH DARK BACKGROUND */
.secondary_progress_bar progress[value]  {height:10px;}
.secondary_progress_bar progress[value], .secondary_progress_bar progress[value]::-webkit-progress-bar  {background-color: var(--neutral8)}
.secondary_progress_bar progress[value]::-webkit-progress-value {background-color: var(--success7)}
.secondary_progress_bar progress[value]::-moz-progress-bar {background-color: var(--success7)}
/* END PROGRESS BAR */

/* DROPDOWN */
.dropbtn {background-color:white; width:100%; text-align:left; padding:0px; cursor:pointer; border:none; border-radius: 20px;}
.dropbtn-text {float:left; padding:10px; background-color:white; font-size:16px;font-weight:bold; border-radius:20px}
.dropdown-selector {float: right; padding:19px 12px 19px 10px; background:var(--primary5); border-top-right-radius:20px; border-bottom-right-radius:20px; margin-right: -2px;}

/* The container <div> - needed to position the dropdown content */
.dropdown {position: relative; display: inline-block; border: 2px solid var(--primary5); border-radius:20px;}
.dropdown-menu {border:2px solid #CCCBCB;}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {display: none; position: absolute; background-color: white; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; width:100%;}
/* Links inside the dropdown */
.dropdown-content a {color: black;padding: 12px 16px; text-decoration: none;display: block; border-bottom:1px var(--neutral7) solid;}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn,  .dropdown:hover .dropbtn .dropbtn-text {background-color: #ddd}
.dropdown .dropdown-divider {border:1px solid #CCCBCB; margin:10px 0;}
/* END DROPDOWN */

/* TOOL TIP */
.tooltip2 .tooltip2text {
	visibility: hidden;
	position: absolute;
	background-color: black;
	color: #fff;
	z-index: 1;
	padding:4px 8px;
	margin:10px 0 0 -20px;
}
.tooltip2:hover .tooltip2text {
	visibility: visible;
}
.tooltip2 .tooltip2text::after {
  content: " ";
  position: absolute;
  bottom: 100%;  /* At the top of the tooltip */
  left: 15px;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}
/* END - tooltip */

/* ANSWERS */
.answer {margin:1em 0;}
.answer_explanation {padding-top:1em; border-top:#CCCBCB 1px solid;}
.answer_explanation_title {font-weight:bold;}

/* ANSWERS FORM */
.answer-label {cursor:pointer;}
.answer-label:hover {color:var(--secondary2);}
.question label {margin:4px 0;}

.rep-checkbox {background:var(--neutral9); width:25px; height:25px; float:left; display:block; margin-right:10px; cursor:pointer; text-align:center; vertical-align:middle; font-size:14px; font-weight:bold; border:2px var(--neutral1) solid;}
.answer-label:hover .rep-checkbox {background:var(--neutral7); color: var(--neutral1);}
.rep-checkbox.radio {border-radius:60px;}

.checked .rep-checkbox, .checked .rep-checkbox.radio {background: var(--secondary2); color:white;}

.right .rep-checkbox, .right.checked .rep-checkbox {background:var(--success5); color:white;}
.wrong .rep-checkbox, .wrong.checked .rep-checkbox {background:var(--danger5); color:white;}
.check_or_unchecked.rep-checkbox {background:var(--neutral9); color:var(--neutral1);}
.checked .check_or_unchecked.rep-checkbox {background:var(--secondary2); color:white;}

.wrong .answer-text {color:var(--danger5);}
.right .answer-text {color:var(--success4);}


/* CONTENT - script */
.questions .script {display:none}
.display-script .script {display:block; font-style:italic; border-left:4px lightgrey solid; padding-left:8px }

/* CONTENT - EXAMPLES */
.example {background-color:var(--tertiary9); padding:30px 60px; margin:20px -60px; border-bottom-right-radius:40px; border-top-right-radius:40px;}
.example-instructions {display:block; padding-left:30px; border-left:1px solid var(--primary5); font-style:italic}
.example-solution:before, .example-explanation:before {display:block; font-weight:bold; page-break-after:avoid}
.example-solution:before {content:"Solution"; margin-top:1em;}
.example-explanation:before {content:"Explication"; margin:1em 0 0.5em 0}
.example-solution, .example-explanation {}

/* CONTENT - STYLES */
p.intro, .intro {background-color:var(--warning8); margin:16px -60px;  padding:20px 40px; border-radius:20px; line-height:1.65em; font-size:14px; margin-bottom:20px; font-style:italic;}
.lesson .intro + h2 {margin-top:34px;}
p.theorem, .theorem {background-color:var(--danger8); margin:16px 0px; padding:20px 40px; border-radius:20px; box-shadow: 2px 2px 12px var(--neutral7);}
p.culture , .culture {background-color:var(--secondary8); margin:16px 0px; padding:20px 40px; border-radius:20px; box-shadow: 2px 2px 12px var(--neutral7);}


/* CONTENT - CALCULATION BOXES */
.calculation td {vertical-align:top; padding:4px; padding-top: 8px}
.calculation td.c1 {background-color:#F3F3F3; border: 1px solid #A4A4A4; padding-top: 8px}
.calculation td.c2 {background-color: #E2FFDD; border: 1px solid gray;}

.lesson {text-align:justify; line-height:24px}
.lesson img {max-width: 100%;}
.lesson h2 {margin-top:70px; margin-bottom:24px; background:var(--secondary9); margin-left:-60px; padding:8px 12px 8px 60px; border-bottom-right-radius:40px; border-top-right-radius:40px;}
.lesson h3 {margin-top:40px; margin-bottom:12px; color:var(--primary5); border-bottom:1px solid var(--primary5);}
.lesson table {border-collapse:collapse}
.lesson .main-color {color:var(--secondary1);}
.lesson p {margin:1.7em 0;}

.lesson :first-child  {margin-top:0px;}
.lesson :last-child  {margin-bottom:0px;}

.lesson-right-nav :first-child {margin-top:0px;}
.lesson h2 :first-child, .lesson h3 :first-child, .lesson h2 + p, .lesson h3 + p {margin-top:0px;}


.lesson-nav-item {
	padding:28px 0;
	font-size:18px;
	border-bottom: solid 1px var(--neutral7);
}
.lesson-nav-item:last-of-type {
	border-bottom: none;
}
.lesson-nav-item a {
	color:var(--neutral5);
}
.lesson-nav-item a:hover {
	color:var(--neutral1);
	text-decoration:none;
}

ul.voca-list {
	padding-left:1rem;
}
ul.voca-list li {
	padding: 8px 0;
}

/* lesson tab header */
.lesson_header .breadcrumbs {
	margin-bottom:18px; font-size:14px;
}
.lesson_header .breadcrumbs a {
	color:rgba(62, 74, 97, 0.4);
	font-weight:500;
}
.lesson_header .breadcrumbs .arrow {
	color:rgba(62, 74, 97, 0.4);
	margin-left:15px;
	margin-right:15px;
}
.lesson_header .breadcrumbs .breadcrumbs_current_item {
	color: var(--neutral1);
}

/* images & videos */
.question img, .support-text img {max-width:100%;}
.small-images img {max-width:140px; max-height:140px;}
.medium-images img {max-width:250px; max-height:250px;}
.rounded-image img {border-radius:20px;}
.lesson iframe, .question iframe {max-width:100%}


/* MathJax */
#explanation .MathJax, .hint .MathJax, .text .MathJax {line-height:2em}
.MathJax_Display {width: auto!important; display: inline!important; margin:1em 4px!important; text-align:left!important}
.MathJax_MathML {display:inline!important}
.math {display:inline}


/* STUDY PLAN */
.card.study_plan_unit {
	border:1px solid rgba(157, 194, 220, 0.4);
	box-shadow: 0px 0px 40px rgba(85, 85, 85, 0.08);
	border-radius: 60px;
	margin-bottom:55px;
}
.unit_nb {
	color: var(--primary4);
	font-weight:var(--titlefontweight);
	font-family:var(--titlefontfamily);
	font-size:32px;
	line-height: 1.2;
  background-image: url("https://prepmyfuture-assets.s3.eu-west-1.amazonaws.com/platform2022/common/underline.svg");
  background-position: 0 1.15em;
  background-size: 100% auto;
	background-repeat: no-repeat;
	padding:0 10px 15px 0;
}
h2.unit_title {
	font-size:32px;
	line-height: 1.2;
}
.unit-description {
	font-size:14px;
}
.activity_legend {
	color:var(--neutral4);
	font-size:14px;
	font-weight:400;
}
.study_plan img {
	max-width: 100%
}
.activity_statut_completed {
	font-weight:bold;
}
.row-not-started .icon-activity-medium {
	background-color:var(--neutral8);
}
.row-finished .icon-activity-medium {
	color:var(--success1);
	background-color:var(--success8);
}
.activity_statut_completed .contained-icon.small-icon {
	background:var(--success8);
}
.activity_statut_started, .activity_statut_started .contained-icon.small-icon, .in_progress {
	color:var(--secondary4);
}
.wrong-answer.contained-icon {
	color:var(--danger1);
	background-color:var(--danger8);
}
.activity_statut_started .contained-icon.small-icon {
	background-color: var(--secondary9);
}
.activity_statut_label {
	display:inline-block;
	margin-left:12px;
	font-weight:bold;
}


.progress-cube-unstarted {border:1px solid var(--neutral1); width:1.2em; height:1.2em; float:left; margin: 0.3em 3px; border-radius:4px}
.progress-cube-started {border:1px solid var(--neutral1); width:1.2em; height:1.2em; float:left; margin: 0.3em 3px; border-radius:4px; background:var(--secondary7)}
.progress-cube-finished {border:1px solid var(--neutral1); width:1.2em; height:1.2em; float:left; margin: 0.3em 3px; border-radius:4px; background:var(--success7)}


/* STYLES FOR THE WHOLE PLATFORM */
.capitalize-first-letter {display:inline-block;}
.capitalize-first-letter::first-letter {text-transform:uppercase;}
a {color:var(--primary5);}
.main-color {color:var(--primary1);}
.grey-text {color:var(--neutral4);}
.text .highlight {background-color:var(--warning5)}
.highlighted {background:var(--warning5)}
.missing-word:after {content: "____________"; color:var(--secondary1); letter-spacing:-2px; font-weight:400;}
.inline-block {display:inline-block;}
.instructions {max-width:550px;}
.support-text {background:white; border:1px solid var(--neutral7); border-radius:12px; padding:20px; text-align:justify; box-shadow: 0px 0px 40px rgba(85, 85, 85, 0.12)}
.waiting-message{
	display: none;
}

/* Admin Student Groups Search Interface - School Admin Style */
.admin-header {
	padding: 40px 0;
	border-bottom: 1px solid var(--neutral8);
	margin-bottom: 30px;
}

.admin-title {
	margin: 0 0 30px 0;
	color: var(--neutral1);
	font-size: 2rem;
	font-weight: 600;
}

.admin-search-container {
	background: white;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	margin-bottom: 20px;
}

.admin-search-header {
	background: var(--primary4);
	color: white;
	padding: 18px 24px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.admin-search-header h3 {
	font-size: 18px;
	font-weight: 600;
	margin: 0;
}

.admin-search-form {
	padding: 28px 32px;
}

.form-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 14px;
	align-items: start;
}

.form-group {
	display: flex;
	flex-direction: column;
}

.form-col-2 {
	grid-column: span 2;
}

.form-label {
	font-size: 12px;
	font-weight: 500;
	color: var(--neutral2);
	margin-bottom: 3px;
	display: block;
}

.form-control {
	width: 100%;
	padding: 7px 10px;
	border: 1px solid var(--neutral6);
	border-radius: 4px;
	font-size: 13px;
	line-height: 1.4;
	background-color: white;
	transition: all 0.15s ease-in-out;
	height: 34px;
}

.form-control:focus {
	outline: none;
	border-color: var(--secondary2);
	box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.form-control:hover {
	border-color: var(--neutral5);
}

.form-control::placeholder {
	color: var(--neutral4);
	font-size: 12px;
}

/* Select specific styling */
select.form-control {
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
	background-position: right 12px center;
	background-repeat: no-repeat;
	background-size: 14px;
	padding-right: 36px;
	appearance: none;
}

.checkbox-group {
	flex-direction: row;
	align-items: center;
	gap: 8px;
	justify-content: flex-start;
	padding-top: 20px;
}

.form-checkbox {
	margin: 0;
	width: 16px;
	height: 16px;
}

.checkbox-label {
	margin: 0;
	font-size: 12px;
	font-weight: 500;
	color: var(--neutral2);
	cursor: pointer;
}

.form-actions-inline {
	display: flex;
	gap: 10px;
	align-items: flex-end;
	padding-top: 20px;
}

.admin-search-container .btn {
	padding: 9px 20px;
	border-radius: 4px;
	font-size: 13px;
	font-weight: 500;
	border: none;
	cursor: pointer;
	transition: all 0.15s ease-in-out;
	text-decoration: none;
	display: inline-block;
	height: 34px;
	line-height: 1.2;
	white-space: nowrap;
}

.admin-search-container .btn-primary {
	background: var(--primary4);
	color: white;
}

.admin-search-container .btn-primary:hover {
	background: var(--primary3);
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

.admin-search-container .btn-secondary {
	background: var(--neutral8);
	color: var(--neutral2);
}

.admin-search-container .btn-secondary:hover {
	background: var(--neutral7);
	color: var(--neutral1);
}

.search-results-summary {
	margin-top: 16px;
	padding: 16px 24px;
	border-top: 1px solid var(--neutral7);
	background: var(--neutral9);
}

.results-info {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	margin-bottom: 8px;
}

.results-count {
	font-weight: 600;
	color: var(--secondary1);
	font-size: 14px;
}

.no-results {
	color: var(--neutral3);
	font-style: italic;
	font-size: 14px;
}

.active-filter {
	background: var(--secondary8);
	color: var(--secondary1);
	padding: 4px 12px;
	border-radius: 16px;
	font-size: 12px;
	font-weight: 500;
}

.limit-notice {
	color: var(--neutral4);
	font-weight: normal;
	font-size: 12px;
}

.pagination-notice {
	background: var(--warning8);
	border: 1px solid var(--warning6);
	border-radius: 6px;
	padding: 8px 12px;
	font-size: 12px;
	color: var(--warning1);
	display: flex;
	align-items: center;
	gap: 6px;
}

.pagination-notice i {
	font-size: 14px;
}

/* Sorting Controls */
.sorting-controls {
	background: white;
	border: 1px solid var(--neutral8);
	border-radius: 8px;
	margin-bottom: 20px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.sorting-header {
	background: var(--neutral9);
	border-bottom: 1px solid var(--neutral8);
	padding: 12px 20px;
}

.sorting-header h4 {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--neutral1);
}

.sorting-options {
	padding: 16px 20px;
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}

.per-page-field {
	display: flex;
	align-items: center;
	gap: 8px;
}

.sort-field {
	display: flex;
	align-items: center;
	gap: 8px;
}

.sort-label {
	font-size: 13px;
	font-weight: 500;
	color: var(--neutral2);
	white-space: nowrap;
}

.sort-select {
	padding: 6px 10px;
	border: 1px solid var(--neutral6);
	border-radius: 4px;
	font-size: 13px;
	background: white;
	min-width: 140px;
}

.sort-select:focus {
	outline: none;
	border-color: var(--secondary2);
	box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.sort-direction {
	display: flex;
	gap: 4px;
}

.sort-btn {
	padding: 6px 12px;
	border: 1px solid var(--neutral6);
	background: white;
	color: var(--neutral3);
	border-radius: 4px;
	font-size: 12px;
	cursor: pointer;
	transition: all 0.15s ease;
	display: flex;
	align-items: center;
	gap: 4px;
}

.sort-btn:hover {
	background: var(--neutral9);
	border-color: var(--neutral5);
	color: var(--neutral2);
}

.sort-btn.active {
	background: var(--secondary2);
	border-color: var(--secondary2);
	color: white;
}

.sort-btn.active:hover {
	background: var(--secondary1);
	border-color: var(--secondary1);
}

.sort-btn i {
	font-size: 12px;
}

/* Student Groups Grid */
.student-groups-grid {
	display: grid;
	gap: 20px;
	margin-bottom: 30px;
}

.student-group-card {
	background: white;
	border: 1px solid var(--neutral8);
	border-radius: 12px;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.student-group-card:hover {
	box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
	transform: translateY(-1px);
}

.card-content {
	padding: 24px;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 20px;
}

.group-info {
	flex: 1;
}

.group-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
}

.group-name {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--neutral1);
}

.archived-badge {
	background: var(--neutral7);
	color: var(--neutral3);
	padding: 2px 8px;
	border-radius: 12px;
	font-size: 0.75rem;
	font-weight: 500;
}

.group-hierarchy {
	margin-bottom: 12px;
	font-size: 0.85rem;
	color: var(--neutral3);
}

.hierarchy-item {
	margin-right: 4px;
}

.group-meta {
	display: flex;
	gap: 16px;
	font-size: 0.9rem;
	color: var(--neutral3);
}

.student-count,
.organization-name {
	display: flex;
	align-items: center;
}

.group-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.action-btn {
	padding: 8px 16px;
	border-radius: 6px;
	font-size: 0.9rem;
	font-weight: 500;
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: all 0.2s ease;
	white-space: nowrap;
}

.admin-search-container .btn-primary.action-btn {
	background: var(--secondary2);
	color: white;
}

.admin-search-container .btn-primary.action-btn:hover {
	background: var(--secondary1);
}

.admin-search-container .btn-secondary.action-btn {
	background: var(--neutral8);
	color: var(--neutral2);
}

.admin-search-container .btn-secondary.action-btn:hover {
	background: var(--neutral7);
}

.admin-search-container .btn-outline.action-btn {
	background: transparent;
	color: var(--secondary2);
	border: 1px solid var(--secondary2);
}

.admin-search-container .btn-outline.action-btn:hover {
	background: var(--secondary2);
	color: white;
}

/* Enhanced search container styles */
.admin-search-container.enhanced {
	transition: all 0.3s ease;
}

.enhanced-form-grid {
	display: grid;
	grid-template-columns: 2fr 1.5fr 1fr;
	gap: 20px;
	align-items: end;
}

.search-section {
	position: relative;
}

.filters-section {
	display: flex;
	gap: 16px;
	align-items: end;
}

.actions-section {
	display: flex;
	justify-content: flex-end;
}

.input-with-icon {
	position: relative;
}

.input-icon {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--neutral4);
	font-size: 14px;
	z-index: 1;
}

.form-control.with-icon {
	padding-left: 36px;
}

.enhanced-checkbox {
	background: var(--neutral9);
	padding: 8px 12px;
	border-radius: 6px;
	border: 1px solid var(--neutral8);
	transition: all 0.2s ease;
}

.enhanced-checkbox:hover {
	background: var(--neutral8);
	border-color: var(--neutral6);
}

.form-actions-enhanced {
	display: flex;
	gap: 8px;
}

.enhanced-btn {
	min-width: 80px;
	transition: all 0.2s ease;
	position: relative;
	overflow: hidden;
}

.enhanced-btn:before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
	transition: left 0.5s;
}

.enhanced-btn:hover:before {
	left: 100%;
}

.enhanced-summary {
	background: linear-gradient(135deg, var(--neutral9) 0%, var(--neutral8) 100%);
	border-left: 4px solid var(--secondary2);
}

.results-count {
	color: var(--success4);
	font-weight: 600;
}

.no-results {
	color: var(--warning4);
	font-weight: 600;
}

.active-filter {
	background: var(--secondary2);
	color: white;
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 500;
}

.admin-search-header h3 i {
	margin-right: 8px;
	color: rgba(255, 255, 255, 0.9);
}

/* Responsive enhancements */
@media (max-width: 1024px) {
	.enhanced-form-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.filters-section {
		flex-direction: column;
		gap: 12px;
		align-items: stretch;
	}

	.actions-section {
		justify-content: stretch;
	}

	.form-actions-enhanced {
		width: 100%;
	}

	.enhanced-btn {
		flex: 1;
	}
}

@media (max-width: 768px) {
	.enhanced-form-grid {
		gap: 12px;
	}

	.form-actions-enhanced {
		flex-direction: column;
	}

	.enhanced-btn {
		width: 100%;
	}
}

/* Footer sections */
.archived-info {
	background: var(--neutral9);
	border: 1px solid var(--neutral8);
	border-radius: 8px;
	padding: 16px;
	margin-bottom: 20px;
	color: var(--neutral3);
}

.archived-link {
	color: var(--secondary2);
	text-decoration: none;
}

.archived-link:hover {
	text-decoration: underline;
}

.admin-actions {
	margin-top: 20px;
}

.create-btn {
	padding: 12px 24px;
	background: var(--primary4);
	color: white;
	border: none;
	border-radius: 8px;
	font-weight: 500;
	text-decoration: none;
	transition: background 0.2s ease;
}

.create-btn:hover {
	background: var(--primary3);
}

/* Responsive design */
@media (max-width: 1024px) {
	.form-grid {
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}
	.form-col-2 {
		grid-column: span 2;
	}
}

@media (max-width: 768px) {
	.sorting-options {
		flex-direction: column;
		gap: 12px;
		align-items: flex-start;
	}

	.sort-direction {
		width: 100%;
		justify-content: center;
	}
}

@media (max-width: 768px) {
	.form-grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.form-col-2 {
		grid-column: span 1;
	}

	.admin-search-form {
		padding: 20px 24px;
	}

	.admin-search-header {
		padding: 16px 20px;
	}

	.admin-search-header h3 {
		font-size: 16px;
	}

	.form-control {
		height: 32px;
		padding: 6px 8px;
		font-size: 12px;
	}

	.card-content {
		flex-direction: column;
		gap: 16px;
	}

	.group-actions {
		width: 100%;
		justify-content: flex-start;
	}

	.admin-header {
		padding: 20px 0;
	}
}

/* Enhanced Pagination Styles */
.pagination-container {
	margin: 32px 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

.pagination {
	display: flex;
	align-items: center;
	gap: 4px;
	background: white;
	padding: 12px 20px;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	border: 1px solid var(--neutral7);
	margin: 0;
}

.pagination .page,
.pagination .prev,
.pagination .next,
.pagination .first,
.pagination .last,
.pagination .gap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 8px 12px;
	margin: 0 2px;
	border-radius: 8px;
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	transition: all 0.2s ease;
	border: 1px solid transparent;
}

.pagination .page a,
.pagination .prev a,
.pagination .next a,
.pagination .first a,
.pagination .last a {
	color: var(--neutral3);
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.pagination .page:hover,
.pagination .prev:hover:not(.disabled),
.pagination .next:hover:not(.disabled),
.pagination .first:hover:not(.disabled),
.pagination .last:hover:not(.disabled) {
	background: var(--primary8);
	border-color: var(--primary6);
	transform: translateY(-1px);
}

.pagination .page:hover a,
.pagination .prev:hover:not(.disabled) a,
.pagination .next:hover:not(.disabled) a,
.pagination .first:hover:not(.disabled) a,
.pagination .last:hover:not(.disabled) a {
	color: var(--primary2);
}

.pagination .page.current {
	background: var(--primary4);
	border-color: var(--primary4);
	color: white;
	font-weight: 600;
	box-shadow: 0 2px 4px hsla(358, 95%, 50%, 0.3);
}

.pagination .page.current a {
	color: white;
}

.pagination .prev.disabled,
.pagination .next.disabled,
.pagination .first.disabled,
.pagination .last.disabled {
	opacity: 0.4;
	cursor: not-allowed;
	pointer-events: none;
}

.pagination .gap {
	color: var(--neutral5);
	cursor: default;
	pointer-events: none;
}

/* Navigation arrow styling */
.pagination .prev a::before {
	content: "‹";
	font-size: 18px;
	margin-right: 4px;
}

.pagination .next a::after {
	content: "›";
	font-size: 18px;
	margin-left: 4px;
}

.pagination .first a::before {
	content: "««";
	font-size: 14px;
	margin-right: 4px;
}

.pagination .last a::after {
	content: "»»";
	font-size: 14px;
	margin-left: 4px;
}

/* Pagination info styling */
.pagination-info {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 16px;
	justify-content: center;
	color: var(--neutral4);
	font-size: 14px;
}

.pagination-summary {
	background: var(--neutral8);
	padding: 8px 16px;
	border-radius: 6px;
	font-weight: 500;
}

/* Responsive pagination */
@media (max-width: 768px) {
	.pagination {
		padding: 8px 12px;
		gap: 2px;
	}

	.pagination .page,
	.pagination .prev,
	.pagination .next,
	.pagination .first,
	.pagination .last {
		min-width: 36px;
		height: 36px;
		padding: 6px 8px;
		font-size: 13px;
	}

	.pagination .first,
	.pagination .last {
		display: none;
	}
}