@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");

:root {
	/* Couleurs Background */
	--foregroud-color-1: #161619;
	--foregroud-color-1-transp: #16161970;
	--foregroud-color-2: #1B1C1F;
	--foregroud-color-3: #18191C;
	--foregroud-color-3-transp: #18191C70;
	--foregroud-color-4: #1f1f22;
	--foregroud-color-4-transp: #1f1f22c0;
	--foregroud-color-5: #0f1012;
	--black-grey: #090909a6;
	--black-1-grey: #0a0a0a;
	/* Couleurs principales */
	--main-color: #FF6331;
	--main-color-transp: #FF633170;
	--main-color-transp-1: #FF633130;
	--main-color-transp-2: #FF63310D;
	--main-color-transp-3: #FF633100;
	--second-color: #d24174;
	--second-color-transp: #d2417470;
	/* Borders, radius, ombrages */
	--border-radius-small: 8px;
	--radius-main: 15px;
	--border-radius: 12px;
	--border-radius-large: 20px;
	--border-radius-extra-large: 30px;
	/* border */
	--border: 1px solid #ffffff05;
	--border-secondary: 1px solid #ffffff15;
	/* Fontes */
	--font-main: "Poppins", "Open Sans", Arial, Helvetica, sans-serif;
	--font-size-main: 14px;
	--font-main-title: 34px;
	--font-main-title-big: 55px;
	--font-second-title: 20px;
	--font-body: 16px;
	/* size */
	--width-site: 1274px;
	/* effects */
	--shadow: rgba(0, 0, 0, 0.3) 5px 10px 24px 0px;
	--shadow-menu: inset 0 1px 1px 0 rgba(0, 0, 0, 0.1), 0 50px 100px -20px rgba(0, 0, 0, 0.2), 0 30px 60px -30px rgba(0 , 0 , 0, .5), -10px 10px 60px -10px rgba(0 , 0, 0, .2);
	--blur: blur(10px);
	/* defined with JavaScript */
	--client-elements: 12;
	--client-elements-displayed: 5;
	--client-element-width: calc(100% / var(--client-elements-displayed));
	--client-animation-duration: calc(var(--client-elements) * 3s);
	/* sticky div */
	--h: 100vh;
	--o: 0px;
}

html {
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

body {
	color: #818183;
	font-family: Poppins, "Trebuchet MS", "PT Sans", "Helvetica Neue", HelveticaNeue-Light, Helvetica, Arial, sans-serif;
	font-size: 13px;
	margin: 0;
	padding: 0;
}

.background-web {
	background: var(--foregroud-color-1);
	width: 100%;
	height: 100%;
	position: fixed;
	transition: all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
}

h1 {
	font-size: 52px;
	margin: 0;
	padding: 5px 15px;
}

h3 {
	font-size: var(--font-main-title);
	margin: 0;
}

h4 {
	font-size: 24px;
	margin: 10px 0 0;
}

strong a {
	color: #fff;
}

h1,
h3,
h4,
h5 {
	color: #fff;
	font-weight: 300;
}

a {
	color: #818183;
	text-decoration: none;
	position: relative;
	cursor: pointer;
}

a:hover {
	color: #ffffff;
}

label {
	color: #ffffff;
}

p {
	line-height: 1.3em;
	/* white-space: pre-line; */
	text-align: justify;
}

code,
pre {
	word-wrap: break-word;
	color: #67686b;
}

blockquote {
	padding: 10px;
	border: 1px solid #ffffff08;
	background: #ffffff05;
	border-radius: var(--border-radius-small);
}

code.api-request {
	background: #F1F1F1;
}

option:hover {
	cursor: pointer;
}

table {
	border-collapse: collapse;
}

.row table,
.row td,
.row th {
	border: 1px solid #17171a;
	padding: 3px;
}

img {
	border: 0;
}

form {
	margin: 0;
}

.support-thread .support-message-editor .comment-edit-textarea,
input,
textarea,
select {
	box-sizing: border-box;
	resize: none;
	font-family: inherit;
	transition: all .2s ease-in-out;
}

input:focus,
textarea:focus,
select:focus {
	background: #ffffff10;
	transition: all .2s ease-in-out;
}

::-moz-selection {
	background: #000;
	color: #fff;
}

::-webkit-selection {
	background: #000;
	color: #fff;
}

::placeholder {
	color: #5d6168;
}

/* Chrome / Edge / Safari */
input[type="color"]::-webkit-color-swatch-wrapper {
	border: 1px solid #00000020 !important;
}

input[type="color"]::-webkit-color-swatch {
	border: 1px solid #00000020 !important;
}

/* Firefox */
input[type="color"]::-moz-color-swatch {
	border: 1px solid #00000020 !important;
}

input[type=checkbox] {
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	border-radius: 5px;
	margin: 0;
	height: 20px;
	width: 20px;
	background: var(--foregroud-color-2);
	border: 1px solid #ffffff10;
	transition: all .2s ease-in-out;
	outline: 0;
	cursor: pointer;
}

input[type="checkbox"]:checked {
	border-radius: 5px;
	height: 20px;
	width: 20px;
	background: url("../images/icons/check.png") center center no-repeat, var(--main-color);
	background-size: 10px;
	outline: 0;
	color: #ffffff;
	border: 1px solid var(--main-color);
	transition: all .2s ease-in-out;
}

input[type="checkbox"].readonly-checkbox {
	opacity: 0.5;
	cursor: not-allowed;
	transition: all .2s ease-in-out;
}

button[type="submit"],
button[type="button"],
input[type="submit"],
input[type="button"],
.connecter {
	border: 1px solid var(--main-color);
	background: transparent;
	color: var(--main-color);
	font-size: 13px;
	text-align: center;
	width: auto;
	padding: 10px 15px !important;
	text-decoration: none;
	border-radius: var(--border-radius-extra-large);
	cursor: pointer;
	outline: none;
	text-transform: uppercase;
	transition: all .2s ease-in-out;
}

button[type="submit"]:hover,
button[type="button"]:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.connecter:hover {
	transform: scale(1.05);
	box-shadow: 0 0 0 2em var(--main-color) inset;
	color: #fff;
	transition: all .2s ease-in-out;
}

button[type="submit"]:active,
button[type="button"]:active,
input[type="submit"]:active,
input[type="button"]:active,
.connecter:active {
	transform: scale(1.01);
	box-shadow: 0 0 0 2em var(--main-color) inset;
	color: #FFF !important;
	transition: all .2s ease-in-out;
}

input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1366px #fff inset;
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
select {
	max-width: 300px;
	min-width: 200px;
	max-height: 45px;
	border-radius: 6px;
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
button[type="submit"],
button[type="button"],
input[type="submit"],
input[type="button"],
textarea {
	-webkit-appearance: none;
}

input[type="text"]:disabled,
input[type="password"]:disabled,
input[type="tel"]:disabled,
input[type="url"]:disabled,
select:disabled,
.custom-select select:disabled + .select-selected,
input[type="number"]:disabled {
	color: #5d6168 !important;
}

.custom-select select:disabled + .select-selected::after {
	border-top-color: #5d6168;
	/* couleur de la flèche */
}

button[type="button"]:disabled,
input[type="button"]:disabled {
	border: 1px solid #5d6168;
	color: #5d6168;
}

button[type="button"]:disabled:hover,
input[type="button"]:disabled:hover {
	box-shadow: 0 0 0 2em #5d6168 inset;
	color: #fff;
}

input {
	width: -webkit-fill-available;
	max-width: 300px;
	outline: 0;
}

select {
	width: -webkit-fill-available;
	outline: 0;
}

select option {
	background: #ffffff05;
	outline: none;
	padding: 5px 0;
}

.gpay-button.black.long.en, .gpay-button.black.buy.en {
    background-position: center;
    background-repeat: no-repeat;
    height: 50px;
}

.gpay-button.black.hover {
	box-shadow: none;
}

.gpay-button.black.border-inset {
	outline: none;
}

#day,
#month,
#year {
	width: 31.8%;
	outline: 0;
}

#connect-center {
	text-align: center;
}

.connecter {
	margin: 0px 0px 20px 0;
	display: inline-block;
}

.expand-button {
	margin: 0px 0px 20px 0;
	display: inline-block;
}

.row-top {
	background: #fff;
	padding: 20px 0 10px;
	border-bottom: 1px solid #c3c3c3;
	overflow: auto;
}

.row-page {
	border-bottom: 0;
	width: 100%;
	margin: 0 auto;
	overflow: auto;
	min-height: 68.73vh;
}

.row-body {
	margin: 0 0 0 290px;
	overflow: hidden;
	min-height: calc(100vh - 65px);
}

.row-body-full {
	margin: 0;
	overflow: hidden;
	min-height: calc(100vh - 65px);
}

.row-body-admin {
	margin: 0 290px;
	overflow: hidden;
	min-height: calc(100vh - 65px);
}

/* ==========================================================================
   START FOOTER
   ========================================================================== */


.row-footer {
	padding: 20px 0 10px;
	overflow: auto;
}

.logo-bg a .logo,
footer a .logo {
	height: 65px;
	width: 200px;
	background: url("../images/logo.png") no-repeat center center;
	background-size: 151px 48px;
	vertical-align: middle;
	display: table-cell;
}

footer {
	height: 330px;
	position: relative;
	width: 100%;
	float: left;
	transition: all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
}

footer>ul {
	position: relative;
	margin: 0 290px;
	width: -webkit-fill-available;
}

footer>ul>li {
	width: 25%;
	float: left;
}

footer ul {
	list-style: none;
	padding: 0;
}

footer>ul>li ul li {
	margin-left: 50px;
	font-weight: 300;
	line-height: 2.2;
	font-size: var(--font-size-main);
}

footer>ul>li ul li a {
	text-decoration: none !important;
}

footer>ul>li ul li a:hover {
	color: #ddd !important;
}

footer li.logo-footer-container {
	margin: 30px auto 0 auto;
	display: flex;
	position: relative;
}

footer a.logo {
	color: #fff !important;
	text-decoration: none !important;
	font-size: 10px;
	font-family: Poppins, "Trebuchet MS", "PT Sans", "Helvetica Neue", HelveticaNeue-Light, Helvetica, Arial, sans-serif;
	position: relative;
	width: 200px;
	text-align: center;
	margin: 0 auto;
}

footer p {
	margin: 30px 30px 10px;
	padding: 12px 0 12px 20px;
	font-weight: 300;
	font-size: 12pt;
	color: #fff;
	text-transform: uppercase;
	background: -moz-linear-gradient(45deg, var(--main-color-transp-1) 0%, var(--main-color-transp-2) 40%, var(--main-color-transp-3) 80%);
	/* FF3.6-15 */
	background: -webkit-linear-gradient(45deg, var(--main-color-transp-1) 0%, var(--main-color-transp-2) 40%, var(--main-color-transp-3) 80%);
	/* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(45deg, var(--main-color-transp-1) 0%, var(--main-color-transp-2) 40%, var(--main-color-transp-3) 80%);
	/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#33fe6137", endColorstr="#00fe6137",GradientType=1 );
	/* IE6-9 fallback on horizontal gradient */
	border-radius: 6px 0 0 6px;
}

.footer-form-right .notification-box {
	margin: 0 0 20px 0;
}

.footer_counter {
	padding: 10px;
	border-top: 1px solid #ffffff10;
}


.row-body .one {
	width: 8.333%;
}

.row-body .two {
	width: 15%;
}

.row-body .three {
	width: 35%;
	height: calc(100vh - 65px);
}

.row-body-full .three,
.row-body-admin .three {
	width: 30%;
	height: calc(100vh - 65px);
}

.content-job .three,
.content-sample .three,
.content-article .three,
.content-group .three {
	background: var(--foregroud-color-2);
}

@media only screen and (min-width: 768px) {
	#three.three-fixed {
		position: fixed !important;
		right: 0 !important;
		will-change: transform;
		transform: translate3d(0, var(--three-footer-offset, 0px), 0);
	}
}

.row-body .four {
	width: 33.333%;
}

.row-body .five {
	width: 41.667%;
}

.row-body .six {
	width: 50%;
}

.row-body .seven {
	width: 58.333%;
}

.row-body .eight {
	width: 66.667%;
}

.row-body .nine {
	width: 65%;
}

.row-body-full .three {
	width: 70%;
}

.content-job .nine,
.content-sample .nine,
.content-article .nine,
.content-group .nine {
	height: calc(100vh - 65px);
}

.row-body .ten {
	width: 83.333%;
}

.row-body .eleven {
	width: 91.667%;
}

.row-body .twelve,
.row-body-full .twelve,
.row-body-admin .twelve {
	width: 100%;
}

.row-page .three {
	width: 35%;
	float: right;
}

.row-page .nine {
	width: 65%;
	float: left;
}

.row-page .stats-container {
	width: 25%;
}

.row-page .twelve {
	width: 100%;
}

.row-page .table-id {
	width: 7%;
	padding: 5px 0;
	word-wrap: break-word;
}

.row-page .table-user {
	width: 33%;
	padding: 5px 0;
	word-wrap: break-word;
}

.row-page .table-user img {
	height: 15px;
	width: 15px;
	border-radius: 3px;
	margin-right: 5px;
	vertical-align: middle;
}

.row-page .table-mail {
	width: 45%;
	padding: 5px 0;
	word-wrap: break-word;
}

.row-page .table-edit {
	width: 8%;
	padding: 5px 0;
	word-wrap: break-word;
}

.row-page .table-delete {
	width: 7%;
	padding: 5px 0;
	word-wrap: break-word;
}

.row-page .table-category-name {
	width: 83%;
	padding: 5px 0;
	word-wrap: break-word;
}

.row-page .table-report-id {
	width: 7%;
	padding: 5px 0;
	word-wrap: break-word;
}

.row-page .table-report-type {
	width: 13%;
	padding: 5px 0;
	word-wrap: break-word;
}


.row-page .table-report-message {
	width: 20%;
	padding: 5px 0;
	word-wrap: break-word;
}

.row-page .table-report-safe {
	width: 10%;
	padding: 5px 0;
	word-wrap: break-word;
}

.admin-rows {
	width: 100%;
	float: left;
	overflow: auto;
}

.admin-rows a {
	cursor: pointer;
}

.dash-stats {
	width: 33.3%;
}

.dash-content {
	margin-right: 20px;
	margin-bottom: 20px;
	padding: 20px;
	background: #ffffff05 !important;
	border-radius: var(--radius-main);
	height: 80px;
}

.dash-content-center {
	margin-bottom: 20px;
	padding: 20px;
	background: #ffffff05 !important;
	border-radius: var(--radius-main);
	height: 80px;
}

.dash-content-right {
	margin-left: 20px;
	margin-bottom: 20px;
	padding: 20px;
	background: #ffffff05 !important;
	border-radius: var(--radius-main);
	height: 80px;
}

.dash-half {
	width: 50%;
	height: 80px;
	float: left;
}

.stats-values {
	font-size: 14px;
	font-weight: 700;
}

.dashboard-info {
	margin-top: 10px;
	float: left;
	width: 100%;
}

.dashboard-info a {
	color: var(--main-color);
	font-weight: 700;
}

.neutral {
	color: #fff;
	background: var(--foregroud-color-3);
	padding: 0px 8px;
	margin-top: 5px;
	border-radius: var(--border-radius);
	display: block;
	width: fit-content;
}

.positive {
	color: #fff;
	background: #009b4e;
	padding: 0px 8px;
	margin-top: 5px;
	border-radius: var(--border-radius);
	display: block;
	width: fit-content;
}

.negative {
	color: #fff;
	background: #be2b2b;
	padding: 0px 8px;
	margin-top: 5px;
	border-radius: var(--border-radius);
	display: block;
	width: fit-content;
}

.dash-values {
	font-size: 30px;
	color: #fff;
	line-height: 30px;
	margin-bottom: 5px;
}

.chart {
	display: flex;
	table-layout: fixed;
	width: 100%;
	margin: 0;
	padding: 0 calc(20% / 7);
	gap: calc(40% / 7);
	background: url("../images/grid.png") repeat;
	border: 1px solid #373a45;
	border-radius: var(--border-radius-small);
	box-sizing: border-box;
}

.chart-small {
	height: 80px;
}

.chart-big {
	height: 240px;
}

.chart-marging {
	padding: 20px;
	background: #ffffff05 !important;
	border-radius: 0px 0px var(--radius-main) var(--radius-main);
}

.chart li {
	position: relative;
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: center;
	-webkit-animation: opacityShow 3s;
	-moz-animation: opacityShow 3s;
	-o-animation: opacityShow 3s;
	animation: opacityShow 3s;
}

.chart span {
	width: 100%;
	max-width: 80px;
	position: absolute;
	bottom: 0;
	background: linear-gradient(135deg, var(--main-color) 0%, var(--second-color) 100%);
	border-radius: 4px;
	display: flex;
	justify-content: center;
	font-weight: bold;
	font-size: var(--font-size-main);
	color: #fff;
	text-shadow: 0 1px 3px #000a;
	pointer-events: auto;
	transition: all .2s ease-in-out;
}

.chart span:hover {
	box-shadow: 0 0 0 10em #f1225091 inset;
}

.chart-text {
	top: 5px;
	position: absolute;
}

.chart-labels {
	display: flex;
	justify-content: space-between;
	width: 100%;
	padding: 0 2px;
	box-sizing: border-box;
}

.chart-labels span {
	flex: 1 1 0;
	min-width: 0;
	text-align: center;
	font-size: 12px;
	margin-top: 9px;
	color: #bbb;
	font-family: inherit;
	pointer-events: none;
	user-select: none;
	letter-spacing: 0.5px;
}

.stats-container h3 {
	font-weight: 400;
	font-size: var(--font-main-title);
}

.payment-content {
	padding: 5px 0;
	width: 100%;
	float: left;
}

.payment-row {
	padding: 20px;
	line-height: 35px;
	margin: 10px 0px;
	border-radius: var(--radius-main);
	background: #ffffff05;
}

.payment-row img {
	border-radius: 50%;
	position: relative;
	float: left;
	margin-right: 10px;
}

.payment-row .state-payment-0,
.payment-row .state-payment-1,
.payment-row .state-payment-2,
.payment-row .state-payment-3,
.payment-row .state-payment-4,
.payment-row .state-payment-5,
.payment-row .state-payment-6 {
	position: relative;
	float: right;
	top: 6px;
}

.list-content {
	padding-bottom: 10px;
	clear: both;
}

.page-button {
	float: left !important;
	margin: 10px 10px 0 0 !important;
}

.report-content {
	float: left;
	width: 100% !important;
	box-sizing: border-box;
}

.report-content-demo {
	border-radius: var(--border-radius-small);
	height: 18.5vh;
	width: 100%;
	padding: 25px;
	box-sizing: border-box;
	float: left;
}

.hidden-row-content {
	width: 100%;
	position: relative;
	display: none;
}

.job-group {
	padding: 10px;
	border-radius: var(--radius-main);
	border: 1px solid #ffffff10;
	position: relative;
	box-sizing: border-box;
	background: #ffffff05;
	float: left;
	width: 100%;
	margin-top: 10px;
	transition: all .3s ease-in-out;
}

.job-group .group-container {
	color: #fff;
	background: var(--main-color);
	border-radius: var(--border-radius-small);
	position: relative;
	cursor: pointer;
	padding: 10px 10px;
	display: flex;
	transition: all .3s ease-in-out;
}

.job-group .group-title {
	position: relative;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
	display: flex;
	gap: 5px;
	flex: 1;
	align-items: center;
}

.job-group .group-title a {
	font-size: var(--font-size-main);
	color: #fff;
}

.job-group .group-empty-state {
	width: 100%;
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-main);
    border: 1px solid #ffffff10;
    position: relative;
    transition: all .3s ease-in-out;
    box-sizing: border-box;
    background: #ffffff05;
    color: #5d6168;
    float: left;
    margin-top: 10px;
}

/* ==========================================================================
   START DASHBOARD TEAM
   ========================================================================== */
.dashboard-team {
	width: 100%;
	position: relative;
	margin-top: 1em;
    float: left;
	padding: 0.6rem;
	box-sizing: border-box;
	background: linear-gradient(180deg, #ffffff08, #ffffff02);
	border: 1px solid #ffffff10;
	border-radius: var(--border-radius-large);
	transition: all .3s ease-in-out;
}

.dashboard-team:hover {
	border: 1px solid #ffffff20;
}

.dashboard-team-header {
	width: 100%;
	min-height: 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
    border-radius: calc(var(--border-radius-large) - 8px);
	color: #5d6168;
	cursor: pointer;
	user-select: none;
	box-sizing: border-box;
	transition: all .3s ease-in-out;
}

.dashboard-team-header:hover {
    background: #ffffff10;
}

.dashboard-team-title {
    min-width: 0;
    display: flex;
    align-items: center;
    left: 5px;
    gap: 5px;
    position: relative;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-team-title span {
	display: block;
	min-width: 0;
	color: #ffffff;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dashboard-team-title .team-img-30 {
	flex: 0 0 30px;
    min-width: 30px;
    min-height: 30px;
    background: url(../images/icons/team.webp) no-repeat center center;
    background-size: 24px 24px;
    float: left;
    position: relative;
}

.dashboard-team-stats {
    flex: 0 0 auto;
    display: flex;
    margin-right: 10px;
    align-items: center;
    gap: 0.2rem;
    white-space: nowrap;
    padding: 3px 10px;
    border-radius: var(--radius-main);
    background: #ffffff08;
    color: #737780;
}

.dashboard-team-separator {
	opacity: 0.5;
}

.dashboard-team-arrow {
	width: 8px;
	height: 8px;
	flex: 0 0 8px;
	margin-left: 0.5rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: all .3s ease-in-out;
}

.dashboard-team-header:hover .dashboard-team-arrow {
    border-right: 2px solid var(--main-color);
    border-bottom: 2px solid var(--main-color);
}

.dashboard-team.active .dashboard-team-arrow {
	transform: rotate(225deg);
}

.dashboard-team-content {
	width: 100%;
	box-sizing: border-box;
}

.dashboard-team-content > .job-group:last-child,
.dashboard-team-content > .job-list:last-child {
	margin-bottom: 0;
}

@media only screen and (max-width: 768px) {
	.dashboard-team {
		margin-bottom: 0.8rem;
		padding: 0.45rem;
		border-radius: 18px;
	}

	.dashboard-team-header {
		min-height: 46px;
		gap: 0.5rem;
		padding: 0 0.35rem;
	}

	.dashboard-team-title {
		flex: 1 1 auto;
		min-width: 0;
		gap: 0.45rem;
	}

	.dashboard-team-title .team-img-30 {
		flex-basis: 24px;
		width: 24px;
		height: 24px;
		background-size: 24px 24px;
	}

	.dashboard-team-stats {
		flex: 0 0 auto;
		gap: 0.2rem;
		font-size: 10px;
	}

	.dashboard-team-stats > span:not(.dashboard-team-job-count, .dashboard-team-arrow) {
		display: none;
	}

	.dashboard-team-group-count,
	.dashboard-team-separator {
		display: none;
	}

	.dashboard-team-job-count::after {
		content: " jobs";
	}

	.dashboard-team-arrow {
		width: 7px;
		height: 7px;
		flex-basis: 7px;
		margin-left: 0.25rem;
	}

	.dashboard-team-content {
		padding-top: 0.4rem;
	}
}
/* ==========================================================================
   END DASHBOARD TEAM
   ========================================================================== */

.job-row-active {
	animation: blink-green-1 1.5s infinite !important;
	border: 1px solid #12cb61 !important;
	transition: all .2s ease-in-out !important;
}

.manage-jobs-container {
	padding: 10px 10px;
	white-space: nowrap;
	text-overflow: ellipsis;
	display: flex;
	align-items: center;
	gap: 10px;
}

.manage-users-container {
	padding: 10px 10px;
	border-top: 1px solid #ffffff10;
	white-space: nowrap;
	text-overflow: ellipsis;
	display: flex;
	align-items: center;
	max-height: 45px;
}

.manage-categories-container {
	min-height: 54px;
	margin-top: 6px;
	padding: 7px 8px 7px 10px;
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1px solid transparent;
	border-radius: calc(var(--radius-main) - 6px);
	background: var(--foregroud-color-2);
	white-space: nowrap;
	text-overflow: ellipsis;
	box-sizing: border-box;
	transition: all .2s ease-in-out;
}

.manage-categories-container:first-child {
	margin-top: 0;
}

.manage-categories-container:hover {
	border-color: #ffffff15;
	background: #ffffff08;
}

.manage-admin-container {
	display: flex;
	padding: 10px;
	border-top: 1px solid #ffffff10;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.manage-jobs-container a,
.manage-users-container a,
.manage-admin-container a {
	text-decoration: none;
	cursor: pointer;
}

.manage-jobs-container select,
.manage-users-container select,
.manage-admin-container select {
	padding: 6px 10px !important;
	border-radius: var(--border-radius-large) !important;
}

.manage-jobs-image,
.manage-teams-image,
.manage-nodes-image,
.manage-history-image,
.manage-page-image,
.manage-members-image,
.manage-users-image {
	position: relative;
	float: left;
	transition: all .3s ease-in-out;
}

.manage-user-promoter-row .manage-users-image .verified-icon,
.sidebar-users-image .verified-icon,
.manage-jobs-image .verified-icon,
.manage-teams-image .verified-icon,
.manage-nodes-image .verified-icon,
.manage-history-image .verified-icon,
.manage-page-image .verified-icon,
.manage-members-image .verified-icon,
.manage-users-image .verified-icon {
	width: 15px;
	height: 15px;
	bottom: 0px;
	display: block;
	object-fit: cover;
	position: absolute;
}

.notification-image .verified-icon {
	width: 15px;
	height: 15px;
	top: 52px;
	display: block;
	object-fit: cover;
	position: absolute;
}

.manage-user-promoter-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0px;
	width: 100%;
	margin: 15px 0;
}

.manage-user-promoter-row .manage-user-left {
	display: flex;
	gap: 10px;
	align-items: center;
	flex: 1 1 0;
	min-width: 0;
}

.manage-user-promoter-row .manage-users-image img {
	border-radius: 50%;
	width: 56px;
	height: 56px;
	object-fit: cover;
}

.manage-user-promoter-row .manage-cont .manage-padding {
	display: flex;
	align-items: center;
	font-size: 1.2em;
	gap: 8px;
	color: #fff;
}

.manage-user-promoter-row .manage-user-right {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	justify-content: flex-end;
}

.manage-user-promoter-row .manage-user-right form {
	display: flex;
	align-items: center;
	gap: 16px;
}

.manage-user-setting {
	padding: 20px !important;
}

.manage-users-image-theme {
	position: relative;
	margin: 10px;
	float: left;
}

.manage-jobs-image img,
.manage-teams-image img,
.manage-nodes-image img,
.manage-history-image img,
.manage-page-image img,
.manage-members-image img,
.manage-users-image img {
	width: 45px;
	height: 45px;
	float: left;
	object-fit: cover;
	border-radius: 50%;
	position: relative;
}

.manage-user-promoter img {
	width: 56px;
	height: 56px;
	float: left;
	object-fit: cover;
	border-radius: 50%;
	position: relative;
}

.manage-user-promoter-row .manage-padding img {
	top: 2px !important;
}

.manage-padding img {
	width: 15px;
	height: 15px;
	top: 3px;
	margin-right: 5px;
	float: left;
	object-fit: cover;
	border-radius: 50%;
	background: var(--main-color);
	position: relative;
}

.page-input-content-3 img {
	width: 100% !important;
	max-width: fit-content;
	float: none !important;
}

.manage-users-image-theme img {
	width: 70px;
	height: 70px;
	float: left;
	object-fit: cover;
	border-radius: 50%;
	position: relative;
}

.manage-list-name {
	font-size: 14px;
}

.manage-list-name input {
	padding: 10px 8px;
	border: 1px solid #f1f1f1;
	border-radius: 6px;
	outline: none;
	margin: 0;
}

.manage-header {
	padding: 0px 20px;
	font-weight: 700;
	text-transform: uppercase;
	background: linear-gradient(135deg, var(--main-color) 0%, var(--foregroud-color-1) 100%);
	color: #fff;
	border-radius: 5px;
}

.manage-cont {
	width: 50%;
	max-width: 50%;
	display: inline-block;
	font-size: 13px;
	line-height: 45px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.manage-cont3 {
	width: 18%;
	max-width: 18%;
	display: inline-block;
	font-size: 13px;
	line-height: 45px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.manage-cont3 a {
	margin-left: 10px;
}

.manage-cont5 {
	width: 20%;
	max-width: 20%;
	display: inline-block;
	font-size: 13px;
	line-height: 45px;
}

.manage-cont6 {
	width: 100%;
	max-width: 100%;
	display: flex;
	font-size: 13px;
	line-height: 45px;
	float: left;
	align-items: center;
}

.manage-cont7 {
	min-width: 30%;
	display: inline-block;
	font-size: 13px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.manage-cont8 {
	display: flex;
	width: 100%;
	float: left;
	max-height: 45px;
	align-items: center;
}

.manage-cont8 input {
	margin-right: 10px;
}

.manage-cont8 select {
	border-radius: var(--border-radius-large) !important;
}

.manage-padding {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	transition: all .3s ease-in-out;
}

.manage-cont2 {
	display: inline-flex;
	font-size: 13px;
	min-width: 8%;
	width: 100%;
	align-items: center;
	transition: all .3s ease-in-out;
}

.manage-cont1 {
	display: flex;
	gap: 10px;
	white-space: nowrap;
	overflow: hidden;
	width: 50%;
	flex: 1;
	text-overflow: ellipsis;
	align-items: center;
	transition: all .3s ease-in-out;
}

.manage-cont1 p {
	margin: 0px;
}

.manage-cont1 > div:last-child,
.manage-cont1[id^="row"] > div[id^="row_link"] {
	min-width: 0;
	flex: 1;
	overflow: hidden;
}

.manage-cont1 a {
	display: block;
	width: 100%;
	color: #ffffff;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: color .2s ease-in-out;
}

.manage-cont1 a:hover {
	color: var(--main-color);
}

.manage-cont1 .manage-cat-color {
	flex: 0 0 30px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
}

.hidden-row-content:empty {
	display: none !important;
}

.manage-cont1 .job-time {
	width: 100%;
	text-align: center;
}

.row-top .threads {
	width: 33.3333%;
}

.row-one {
	float: left;
	width: 15%;
}

.row-two {
	float: left;
	width: 10%;
}

.row-three {
	float: left;
	width: 60%;
	word-break: break-all;
}

.row-four {
	float: left;
	width: 15%;
	text-align: right;
}

.row-slider {
	border-bottom: 0;
	margin: 0 auto;
	overflow: auto;
}

@-webkit-keyframes background {
	0% {
		background-position: 0 0;
	}

	100% {
		background-position: 155% 0;
	}
}

@-moz-keyframes background {
	0% {
		background-position: 0 0;
	}

	100% {
		background-position: 155% 0;
	}
}

@keyframes background {
	0% {
		background-position: 0 0;
	}

	100% {
		background-position: 155% 0;
	}
}

.row {
	width: 100%;
	margin: 0 auto;
	overflow: auto;
}

.row .one {
	width: 8.333%;
}

.row .two {
	width: 15%;
}

.row .three {
	width: 35%;
}

.row .four {
	width: 33.333%;
}

.row .five {
	width: 41.667%;
}

.row .six {
	width: 50%;
}

.row .seven {
	width: 58.333%;
}

.row .eight {
	width: 66.667%;
}

.row .nine {
	width: 65%;
}

.row .ten {
	width: 83.333%;
}

.row .eleven {
	width: 91.667%;
}

.row .twelve {
	width: 100%;
}

.column,
.columns {
	float: left;
	position: relative;
}

[class*="column"]+[class*="column"]:last-child {
	float: right;
}

[class*="column"]+[class*="column"].end {
	float: left;
}

/* ==========================================================================
   END FOOTER
   ========================================================================== */

/* ==========================================================================
   START HEADER / TOPBAR / MENUS
   ========================================================================== */


.header {
	margin: 0 0 0 290px;
	overflow-y: hidden;
	top: 0;
}

.topbar {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 1000;
	height: 65px;
	-webkit-animation-duration: .3s;
	animation-duration: .3s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	background: linear-gradient(to top, transparent 0%, var(--foregroud-color-3) 100%);
}

.menu-image {
	float: right;
	height: 65px;
	font-size: 12px;
	color: #fff;
	padding: 0 6px;
	cursor: pointer;
	display: none;
}

.menu-image:hover {
	background: rgba(0, 0, 0, .12);
}

.menu-image:active {
	background: rgba(0, 0, 0, .35);
}

.menu-image-active {
	background: rgba(0, 0, 0, .12);
}

.menu_hover_messages,
.menu_hover_notifications {
	background: rgba(0, 0, 0, .12);
}

.menu_visitor {
	float: right;
	margin-top: 20px;
	padding-right: 10px;
	color: #fff;
}

.menu_arrow {
	margin: 30px 0 0 5px;
	float: right;
	min-width: 10px;
	min-height: 5px;
	background: url("../images/downarrow.png") no-repeat;
	background-size: 10px;
}

.menu-dd-container {
	width: 100%;
	top: 65px;
	position: absolute;
	display: none;
}

.menu-dd-content {
	background: #fff;
	min-width: 290px;
	margin: 0 20px;
	border-radius: var(--border-radius);
	width: auto;
	float: right;
	position: relative;
	z-index: 1;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.40);
	opacity: 0;
	transform: scale(0.95) translateY(-10px);
	transition: opacity 0.35s ease, transform 0.35s ease;
	pointer-events: none;
}

.menu-dd-container.show .menu-dd-content {
	opacity: 1;
	transform: scale(1) translateY(0);
	pointer-events: auto;
}

.menu-dd-row {
	padding: 10px;
	margin: 10px;
	border-radius: 6px;
	text-align: left;
	color: #545454;
}

.menu-dd-row:hover,
.menu-dd-row:focus {
	background: #f1f1f1;
	color: #61616C;
	transition: all .4s ease-in-out;
}

.menu-dd-extra {
	color: #008fff;
}

.menu-dd-content a {
	color: #f1f1f1;
	text-decoration: none;
	width: 100%;
}

.menu-dd-content a:hover {
	color: #FFF;
}

.menu_img {
	float: right;
	width: 45px;
	height: 45px;
	margin-top: 10px;
}

.menu_img img {
	width: 45px;
	height: 45px;
	border-radius: 50%;
}

.menu_btn {
	padding: 0 10px 0 0;
	float: right;
	height: 65px;
	position: relative;
}

.menu_btn img {
	margin-top: 25px;
	width: 16px;
	height: 16px;
}

.menu-btn {
	padding: 8px 20px;
	margin: 11px 10px 0 0;
	float: right;
	color: var(--main-color);
	border: 1px solid var(--main-color);
	background: transparent;
	border-radius: 25px;
	cursor: pointer;
	font-size: var(--font-body);
	transition: all .15s ease-in-out;
}

.menu-btn:hover,
.menu-btn:active,
.menu-btn-1:hover,
.menu-btn-1:active {
	border: 1px solid var(--main-color);
	color: #ffffff;
	background: var(--main-color);
	transition: all .15s ease-in-out;
}

.menu-btn-1 {
	padding: 12px 20px;
	margin: 12px 20px 0 0;
	float: right;
	color: #fff;
	background: linear-gradient(135deg, var(--main-color) 0%, var(--second-color) 100%);
	border-radius: 25px;
	cursor: pointer;
	font-weight: light;
	font-size: var(--font-size-main);
	transition: all .15s ease-in-out;
}

.search-container,
.search-list-container {
	max-width: 500px;
	width: 500px;
	display: none;
	top: 65px;
	color: #BBB;
	margin-left: 480px;
}

.search-container {
	opacity: 0;
	transform: scale(0.95) translateY(-10px);
	transition: opacity 0.35s ease, transform 0.35s ease;
	display: none;
}

.search-container.show {
	display: block;
	opacity: 1;
	transform: scale(1) translateY(0px);
}

.search-list-container .search-content {
	background: #FFF;
}

.header-loader {
	float: right;
}

.modal-loading,
.header-loader {
	width: 110px;
	height: 10px;
	background: url("../images/preloader_white.webp");
	background-size: 110px 10px;
	float: right;
	margin-top: 5px;
	display: none;
}

.topbar-song-name {
	font-size: 12px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	margin: 22px 10px 0 10px;
}

.topbar-author-name {
	font-size: 12px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	margin: 0px 10px;
}

.topbar-song-name a {
	color: #ffffff;
	font-weight: bolder;
}

.topbar-author-name a {
	color: #5d6168;
}


@-webkit-keyframes bounceInBottom {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-50px);
	}

	100% {
		opacity: 1;
		-webkit-transform: translateY(0px);
	}
}

@keyframes bounceInBottom {
	0% {
		opacity: 0;
		transform: translateY(-50px);
	}

	100% {
		opacity: 1;
		-webkit-transform: translateY(0px);
	}
}

@-webkit-keyframes opacityShow {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@-moz-keyframes opacityShow {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@-o-keyframes opacityShow {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes opacityShow {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@-webkit-keyframes opacityHide {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

@-moz-keyframes opacityHide {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

@-o-keyframes opacityHide {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

@keyframes opacityHide {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

.bounceInBottom {
	-webkit-animation-name: bounceInBottom;
	-webkit-animation-duration: 0.8s;
	animation-name: bounceInBottom;
	animation-duration: 0.8s;
	transition: all 0.8s ease-out;
	-webkit-transition: all 0.8s ease-out;
	-moz-transition: all 0.8s ease-out;
	-o-transition: all 0.8s ease-out;
}

.opacityShow {
	-webkit-animation: opacityShow 0.8s ease-in-out;
	-moz-animation: opacityShow 0.8s ease-in-out;
	-o-animation: opacityShow 0.8s ease-in-out;
	animation: opacityShow 0.8s ease-in-out;
}

.opacityHide {
	-webkit-animation: opacityHide 0.8s ease-in-out;
	-moz-animation: opacityHide 0.8s ease-in-out;
	-o-animation: opacityHide 0.8s ease-in-out;
	animation: opacityHide 0.8s ease-in-out;
}

.glass-hover {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.glass-hover::after {
	content: "";
	position: absolute;
	top: -100%;
	left: -60%;
	width: 45%;
	height: 300%;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
	transform: rotate(20deg);
	transition: left 0.65s ease;
}

.glass-hover:hover::after {
	left: 130%;
}

.email-demo {
	float: left;
	padding: 8px;
	border-radius: var(--border-radius-small);
	border: 1px solid #ffffff08;
	background: #ffffff05;
	color: #fff;
	outline: none;
}

.search-input {
	float: left;
	display: inline-block;
}

.content-form-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	width: 100%;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
	align-items: start;
}

.content-form-grid .content-form-field {
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.content-form-grid .input-title {
	text-align: left;
	color: #fff;
	max-width: 300px;
	margin: 0 auto;
}

.content-form-grid select,
.content-form-grid .custom-select,
.content-form-grid .select-selected {
	width: 100%;
	box-sizing: border-box;
}

.content-form-grid .button-normal {
	grid-column: 1 / 5;
	justify-self: center;
	margin-top: 20px;
	min-width: 200px;
	padding: 15px !important;
}

/* Tablette */
@media (max-width: 1200px) {
	.content-form-grid {
		grid-template-columns: 1fr 1fr;
	}

	.content-form-grid .button-normal {
		grid-column: 2;
	}
}

/* Mobile */
@media (max-width: 768px) {
	.content-form-grid {
		grid-template-columns: 1fr;
	}

	.content-form-grid .button-normal {
		grid-column: 1;
	}
}

.search-input input {
	font-size: var(--font-size-main);
	border-radius: 6px;
	outline: none;
	border: 1px solid transparent;
	padding: 12px 0 12px 30px;
	margin: 15px 5px;
	color: #5d6168;
	width: 0;
	height: 36px;
	max-width: unset;
	min-width: unset;
	background: url("../images/icons/search-1.png") no-repeat;
	background-size: 20px;
	background-position: 5px 7px;
	transition: width .5s ease-in-out, padding .5s ease-in-out, color .5s ease-in-out, background-position .5s ease-in-out, border-color .5s ease-in-out;
}

.search-input input:hover,
.search-input input:focus {
	background-color: transparent;
	color: #818183;
	width: 200px;
	padding: 12px 0 12px 5px;
	background-position: -20px 7px;
	border-color: rgba(255, 255, 255, 0.2);
}

.search-input input::-webkit-input-placeholder {
	color: #D1D1D7;
}

.search-input1, .search-input1 form {
	display: inline-grid;
}

.search-input1 input,
.search-input1 select {
	border-radius: var(--border-radius-small) !important;
	outline: none;
	border: 0 !important;
	padding: 15px !important;
	background: #ffffff !important;
	color: #5d6168 !important;
	font-size: var(--font-body);
	font-weight: lighter;
}

.search-content {
	z-index: 999;
	background: #fff;
	border-radius: var(--radius-main);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.40);
	overflow: auto;
	text-align: left;
	color: #545454;
}

.search-content .job-inner {
	padding: 10px;
	margin: 0px;
	align-items: center;
	display: flex;
	border-radius: 5px;
	border-bottom: 1px solid #c7c7c7;
	transition: all .2s ease-in-out;
}

.search-content .job-inner:hover {
	background: #e9ebef;
	color: #5d6168;
	transition: all .15s ease-in-out;
}

.search-results {
	width: 100%;
	float: left;
}

.search-results .sub-loading,
.search-results .message_btn {
	position: inherit;
}

.search-results .sound-inner {
	border-top: 1px solid #f1f1f1;
}

.search-image {
	position: absolute;
}

.search-image img {
	width: 50px;
	aspect-ratio: 1/1;
	float: left;
	overflow: auto;
	border-radius: 50%;
}

.search-text {
	padding: 17px 0 17px 60px;
	width: 100%;
}


.search-icons {
	float: right;
}

.search-icons img {
	width: 15px;
	height: 15px;
}

.search-inner {
	box-shadow: 0 0px 20px #00000030 inset;
	max-height: 370px;
	overflow: auto;
}

.job-icons {
	width: 17px;
	height: 17px;
	background: url("../images/icons/group_add_n.png") center center no-repeat;
	background-size: 17px;
	float: right;
	transition: all .5s ease-in-out;
	color: #5d6168;
}

.item-download-title:hover .job-icons {
	transform: rotate(90deg);
	transition: all .2s ease-in-out;
}

.hashtag {
	border-bottom: 1px solid #333;
	overflow: auto;
}

.hashtag-inner {
	padding: 10px 20px;
}

.hashtag a {
	cursor: pointer;
	float: left;
	width: 100%;
	overflow: auto;
}

.hashtag a:hover {
	background: #2b2b2b;
	text-decoration: none;
}

.content {
	background: #FFF;
	overflow: auto;
	border-left: 1px solid #f1f1f1;
	border-right: 1px solid #f1f1f1;
}

.cover-container {
	padding: 0;
}

.cover-content {
	border-bottom: 1px solid #f1f1f1;
	background: #fff;
	color: #6B6B6B;
	overflow: auto;
}

.cover-image {
	float: left;
	top: 0;
	padding-top: 342px;
	width: 100%;
}

.cover-description {
	width: 100%;
	float: left;
}

.cover-description-content {
	margin-left: 20px;
	margin-right: 10px;
}

.cover-avatar-content {
	width: 200px;
	margin: 0 0 0 50px;
	overflow: auto;
}

.cover-avatar {
	float: left;
	position: absolute;
	top: 70px;
	width: 200px;
}

.cover-avatar a {
	overflow: hidden;
	height: 106px;
	float: left;
}

.cover-avatar img {
	width: 100%;
	margin-bottom: -3px;
	border-radius: 50%;
	border: solid 5px rgba(111, 135, 152, 0.5);
	box-shadow: 0 0 60px -15px #959aac;
}

.cover-description-buttons {
	margin: -60px 20px 0 0;
	position: absolute;
	right: 0;
	display: flex;
}

.cover-buttons {
	padding: 0;
	margin: 0;
	display: flex;
	font-size: var(--font-size-main);
	overflow: auto;
}

.cover-buttons li {
	float: left;
	list-style-type: none;
	margin: 0;
	padding: 0 10px;
}

li a.cover-button {
	height: auto;
	float: left;
	position: relative;
	display: block;
	font-weight: bolder;
	color: #959aac;
	text-align: center;
	text-decoration: none;
	list-style-type: none;
	padding: 15px 10px;
	transition: all .2s ease-in-out;
}

li a.cover-button:hover {
	color: #383b46;
	border-bottom: 3px solid #383b46;
	transition: all .2s ease-in-out;
}

li a.cover-button-active {
	color: #383b46;
	border-bottom: 3px solid #383b46;
	transition: all .2s ease-in-out;
}

.cover-text-container {
	float: left;
	font-size: 22px;
	left: 300px;
	top: 35%;
	position: absolute;
}

.cover-text-container a {
	padding: 5px;
	color: #FFF;
	background: #23232D;
}

.cover-text-container img {
	margin: 5px 0 0 5px;
	width: 17px;
	height: 17px;
}

.cover-location {
	padding: 5px;
	margin-top: 10px;
	font-size: 14px;
	color: #fff;
	display: inline-block;
	background: #ffffff05;
}

.sidebar-buttons {
	padding: 0;
	margin: 0 10px;
	display: flex;
	font-size: var(--font-size-main);
	overflow: auto;
}

.sidebar-buttons li {
	float: left;
	list-style-type: none;
	margin: 0;
	display: flex;
}

/* Conteneur UL des boutons */

#frame-download {
	display: flex;
	align-items: center;
}

/* Boutons icônes de frame */

#frame-download .frame-button {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #ffffff08;
	border: 1px solid #ffffff12;
	border-radius: 6px;
	box-shadow: inset 0 0 15px 0 #0c0d0fa8;
	cursor: pointer;
	transition: all 0.25s ease;
}

#frame-download .frame-button:hover {
	background: #ffffff12;
	transform: scale(1.05);
}

/* Classe active = vert ou bleu selon ton thème */

#frame-download .frame-button.active {
	background: linear-gradient(145deg, #00c853, #009e41);
	border-color: #00c853;
	box-shadow: 0 0 6px #00c85380;
}

#frame-download input[type="submit"] {
	padding: 0px 20px !important;
}

/* Second bouton milieu : pas d’arrondis */

#toggle-all-frames {
	border-radius: 0;
}

/* Formulaire dans le LI (le bouton Télécharger) */

#frame-download li {
	display: flex;
	align-items: center;
	justify-content: center;
}

li a.sidebar-button {
	display: flex;
	height: auto;
	float: left;
	position: relative;
	color: #5d6168;
	white-space: nowrap;
	gap: 5px;
	align-items: center;
	text-align: center;
	text-decoration: none;
	list-style-type: none;
	padding: 15px 10px;
	margin-right: 5px;
	border-bottom: 3px solid transparent;
	transition: all .2s ease;
}

li a.sidebar-button:hover {
	color: #ffffff;
	border-bottom: 3px solid #ffffff;
	transition: all .2s ease;
}

li a.sidebar-button-active {
	color: var(--main-color);
	border-bottom: 3px solid var(--main-color);
	transition: all .2s ease;
}

.edit-button {
	color: #fff;
	font-size: 13px;
	background: linear-gradient(135deg, var(--main-color) 0%, var(--second-color) 100%);
	border: 2px solid var(--main-color);
	text-align: center;
	width: auto;
	max-width: 200px;
	padding: 12px 15px !important;
	text-decoration: none;
	margin: 0 auto;
	border-radius: 32px;
	cursor: pointer;
	outline: none;
	font-weight: 700;
	text-transform: uppercase;
	transition: all .2s ease-in-out;
	text-shadow: 2px 2px 4px #0c0d0f75;
}

.edit-button:active {
	border: 2px solid var(--main-color);
	background: linear-gradient(135deg, var(--second-color) 0%, var(--main-color) 100%);
	transition: all .2s ease-in-out;
}

.edit-button:hover {
	border: 2px solid var(--main-color);
	box-shadow: 0 0 0 2em var(--main-color) inset;
	transform: scale(1.01);
	transition: all .2s ease-in-out;
}

.pro-buttons {
	padding: 0;
	display: -webkit-box;
	overflow: auto;
}

.pro-buttons div,
.pro-buttons a {
	float: left;
	margin: 0;
	padding: 0;
	list-style-type: none;
}

div.pro-button,
a.pro-button {
    height: auto;
    float: left;
    position: relative;
    align-items: center;
    display: flex;
    text-align: center;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-decoration: none;
    list-style-type: none;
    color: #5d6168;
	border-bottom: 3px solid transparent;
    padding: 15px 10px;
    margin-right: 5px;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}

div.pro-button:hover,
a.pro-button:hover {
	color: #fff;
	border-bottom: 3px solid #fff;
	transition: all 0.3s ease-in-out;
}

div.pro-button-active,
a.pro-button-active {
	color: var(--main-color);
    padding: 15px 10px;
    margin-right: 5px;
	border-bottom: 3px solid var(--main-color);
	transition: all 0.3s ease-in-out;
}

.message-container {
	border-right: 1px solid #f1f1f1;
}

.message-container a {
	color: #4b4d5f;
	text-decoration: none;
}

.message-container a:hover {
	color: #008fff;
}

.message-content {
	color: #5d6168;
}

.message-inner,
.message-inner-frame,
.sidebar-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #818183;
	padding: 40px 20px;
	text-align: center;
	position: relative;
	width: 100%;
	box-sizing: border-box;
}

.message-frames {
	background: url("../images/error/frames.webp") center no-repeat;
	background-size: contain;
	width: 100%;
	max-width: 300px;
    aspect-ratio: 16 / 9;
	margin: 10px auto;
}

.message-comments {
	background: url("../images/error/comments.webp") center no-repeat;
	background-size: contain;
	width: 100%;
	max-width: 300px;
    aspect-ratio: 16 / 9;
	margin: 10px auto;
}

.message-turntable {
	background: url("../images/error/tunrtable.webp") center no-repeat;
	background-size: contain;
	width: 100%;
	max-width: 340px;
    aspect-ratio: 16 / 9;
	margin: 10px auto;
}

.message-contact {
	background: url("../images/error/contact.webp") center no-repeat;
	background-size: contain;
	width: 100%;
	max-width: 300px;
    aspect-ratio: 16 / 9;
	margin: 10px auto;
}

.message-software {
	background: url("../images/error/software.webp") center no-repeat;
	background-size: contain;
	width: 100%;
	max-width: 300px;
    aspect-ratio: 16 / 9;
	margin: 10px auto;
}

.message-job {
	background: url("../images/error/job.webp") center no-repeat;
	background-size: contain;
	width: 100%;
	max-width: 300px;
    aspect-ratio: 16 / 9;
	margin: 10px auto;
}

.message-node {
	background: url("../images/error/node.webp") center no-repeat;
	background-size: contain;
	width: 100%;
	max-width: 300px;
    aspect-ratio: 16 / 9;
	margin: 10px auto;
}

.message-news,
.message-page {
	background: url("../images/error/news.webp") center no-repeat;
	background-size: contain;
	width: 100%;
	max-width: 300px;
    aspect-ratio: 16 / 9;
	margin: 10px auto;
}

.message-admin {
	background: url("../images/error/admin.webp") center no-repeat;
	background-size: contain;
	width: 100%;
	max-width: 300px;
    aspect-ratio: 16 / 9;
	margin: 10px auto;
}

.message-vat {
	background: url("../images/error/tax.webp") center no-repeat;
	background-size: contain;
	width: 100%;
	max-width: 300px;
    aspect-ratio: 16 / 9;
	margin: 10px auto;
}

.message-sample {
	background: url("../images/error/sample.webp") center no-repeat;
	background-size: contain;
	width: 100%;
	max-width: 300px;
    aspect-ratio: 16 / 9;
	margin: 10px auto;
}

.message-category {
	background: url("../images/error/category.webp") center no-repeat;
	background-size: contain;
	width: 100%;
	max-width: 300px;
    aspect-ratio: 16 / 9;
	margin: 10px auto;
}

.message-description {
	background: url("../images/error/description.webp") center no-repeat;
	background-size: contain;
	width: 100%;
	max-width: 300px;
    aspect-ratio: 16 / 9;
	margin: 10px auto;
}

.message-group {
	background: url("../images/error/group.webp") center no-repeat;
	background-size: contain;
	width: 100%;
	max-width: 300px;
    aspect-ratio: 16 / 9;
	margin: 10px auto;
}

.message-team {
	background: url("../images/error/team.webp") center no-repeat;
	background-size: contain;
	width: 100%;
	max-width: 300px;
    aspect-ratio: 16 / 9;
	margin: 10px auto;
}

.message-member {
	background: url("../images/error/member.webp") center no-repeat;
	background-size: contain;
	width: 100%;
	max-width: 300px;
    aspect-ratio: 16 / 9;
	margin: 10px auto;
}

.message-history {
	background: url("../images/error/history.webp") center no-repeat;
	background-size: contain;
	width: 100%;
	max-width: 300px;
    aspect-ratio: 16 / 9;
	margin: 10px auto;
}

.message-trash {
	background: url("../images/error/trash.webp") center no-repeat;
	background-size: contain;
	width: 100%;
	max-width: 300px;
    aspect-ratio: 16 / 9;
	margin: 10px auto;
}

.job-inner,
.list-inner {
	padding: 0;
}

.divider {
	height: 1px;
	width: 100%;
	margin: 6px 0;
	background: #ffffff10;
	display: inline-block;
}

.divider-black {
	height: 1px;
	width: 100%;
	margin: 6px 0;
	background: #00000010;
	display: inline-block;
}

.list-container {
	padding: 15px;
}

#list-article,
#list-group,
.list-group {
	position: relative;
	width: 100%;
}

#list-group-title {
	position: relative;
	background: #ffffff08;
	border-radius: var(--radius-main);
	width: 100%;
	z-index: 1;
}

.job-actions {
	width: 100%;
	border-top: 1px solid #ffffff12;
	background: #1b1c1f;
	position: relative;
	z-index: 100;
}

.content-job .job-actions-content,
.content-sample .job-actions-content,
.content-group .job-actions-content {
	width: 55px;
	height: 55px;
}

.job-actions-content a {
	color: #4b4d5f;
}

.job-actions-content a:hover {
	color: #333;
}

.job-actions a {
	cursor: pointer;
}

.list-avatar {
	width: 80px;
	float: left;
	overflow: auto;
}

.list-avatar img {
	width: 80px;
	background: #23232d;
	border-radius: 50%;
}

.job-author {
	padding: 0 0 3px;
}

.job-author a {
	color: #5d6168;
	cursor: pointer;
	font-weight: lighter;
	font-size: 20px;
	text-decoration: none;
}

.job-author a:hover {
	color: #959aac;
}

.list-top {
	padding: 2px 0 5px 95px;
}

.list-time {
	position: absolute;
	right: 20px;
}

.list-time .timeago {
	color: #999999 !important;
}

.message-reply-container {
	padding: 10px 0px;
	float: left;
	box-sizing: border-box;
	width: 100%;
}

.message-reply-container .delete_btn,
.message-reply-container .edit_btn,
.message-reply-container .edit_btn_admin,
.message-reply-container .report_btn {
	width: 0;
	transition: all .2s ease-in-out;
}

.message-reply-container:hover .delete_btn,
.message-reply-container:hover .report_btn {
	width: 20px;
	transition: all .2s ease-in-out;
}

.message-reply-container:hover .edit_btn,
.message-reply-container:hover .edit_btn_admin {
	width: 20px;
	transition: all .2s ease-in-out;
}

.message-reply-content {
	color: #7a7d81;
	padding-top: 10px;
}

.message-reply-author {
	float: left;
	color: #fff;
	width: 100%;
}

.comment-active {
	padding: 8px 0px 8px 8px;
	background: linear-gradient(135deg, var(--main-color-transp-1) 0%, var(--main-color-transp-3) 100%);
	border: 1px solid var(--main-color-transp);
	position: relative;
	border-radius: var(--radius-main);
	box-sizing: border-box;
}

.message-reply-author a {
	color: #fff;
	cursor: pointer;
}

.message-reply-message {
	margin: 0 0 0 50px;
	padding: 7px;
	background: #F2F2F2;
	border-radius: var(--border-radius-small);
	word-wrap: break-word;
	color: #23232D;
}

.comment-reply-message {
	margin: 0 0 0 60px;
	padding: 10px;
	background: #ffffff05;
	border-radius: var(--border-radius-small);
	word-wrap: break-word;
	color: #23232D;
	position: relative;
	display: flex;
}

.job-publish {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
}

.message-comment-box-container {
	flex-shrink: 0;
	z-index: 2;
	background: #1b1c1f;
	margin-top: 10px;
}

.comments-wrapper {
	position: relative;
	min-height: 0;
	margin: 10px 0 0 0;
}

.comments-container {
	min-height: 0;
	height: calc(100vh - 450px);
	padding: 0 10px 0 0;
	overflow-y: auto;
}

.comments-wrapper::before,
.comments-wrapper::after {
	content: "";
	position: absolute;
	left: 0;
	right: 10px;
	height: 20px;
	z-index: 1;
	pointer-events: none;
}

.comments-wrapper::before {
	top: 0;
	background: linear-gradient(to bottom, var(--foregroud-color-2) 0%, transparent 100% );
}

.comments-wrapper::after {
	bottom: 0;
	background: linear-gradient(to top, var(--foregroud-color-2) 0%, transparent 100% );
}

.comment-reply-textarea {
	padding: 10px 25% 10px 10px;
	color: #fff;
	font-size: 13px;
	overflow: hidden;
	resize: none;
	max-width: 655px;
	background: #ffffff05;
	box-sizing: border-box;
	border: 1px solid #ffffff08;
	outline: 0;
	min-height: 50px;
	line-height: 30px;
	border-radius: 25px;
	height: 50px;
}

.comment-edit-textarea {
	padding: 10px 40% 10px 10px;
	color: #fff;
	font-size: 13px;
	overflow: hidden;
	resize: none;
	max-width: 655px;
	background: #ffffff05;
	box-sizing: border-box;
	border: 1px solid #ffffff08;
	outline: 0;
	min-height: 50px;
	line-height: 30px;
	border-radius: 25px;
	height: 50px;
	z-index: 1;
}

.comment-reply-textarea[contenteditable="true"],
.comment-edit-textarea[contenteditable="true"] {
	display: block;
	white-space: nowrap;
	cursor: text;
}

.comment-edit-textarea[contenteditable="true"] {
	width: 100%;
}

.comment-reply-textarea[contenteditable="true"]:empty::before,
.comment-edit-textarea[contenteditable="true"]:empty::before {
	content: attr(data-placeholder);
	color: #ffffff50;
	pointer-events: none;
}

.comment-reply-textarea .emoticon,
.comment-edit-textarea .emoticon {
	width: 18px;
	height: 18px;
	margin: 0 2px;
	vertical-align: middle;
	pointer-events: none;
	user-select: none;
}

.comment-edit-job-textarea {
	padding: 10px;
	color: #fff;
	font-size: 13px;
	overflow: hidden;
	resize: none;
	max-width: 655px;
	background: #ffffff05;
	box-sizing: border-box;
	border: 1px solid #ffffff08;
	outline: 0;
	min-height: 45px;
	line-height: 30px;
	border-radius: 25px;
	height: 45px;
	z-index: 1;
}

.comment-edit-job-textarea:hover {
	border: 1px solid var(--main-color);
}

.manage-jobs-container .select-selected {
	padding: 10px;
	color: #fff;
	font-size: 13px;
	overflow: hidden;
	resize: none;
	max-width: 655px;
	background: #ffffff05;
	box-sizing: border-box;
	border: 1px solid #ffffff08;
	outline: 0;
	min-height: 45px;
	line-height: 30px;
	height: 45px;
	z-index: 1;
}

.comment-edit-admin-textarea,
.comment-edit-group-textarea {
	color: #fff;
	font-size: 13px;
	overflow: hidden;
	resize: none;
	box-sizing: border-box;
	border-radius: var(--border-radius-large);
	max-height: 45px;
	padding: 15px 10px;
	outline: 0;
	z-index: 1;
}

.comment-edit-admin-textarea,
.comment-edit-group-textarea {
	background: #ffffff05;
	border: 1px solid #ffffff08;
}

.comment-edit-group-textarea,
.palette-color-group input[type="color"],
.palette-color-group .palette-color-hex {
	background: #00000020 !important;
	border: 1px solid #00000020;
}

.action-comment {
	float: right;
	position: relative;
	display: grid;
}

.message-message {
	margin-top: 10px;
	float: left;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.message-reported {
	padding-bottom: 5px;
}

.share1-button, .refuse-button,
.print-button, .invoice-button,
.close-button, .edited-button,
.open-button, .edit-button-dropdown,
.delete-button, .restore-button,
.edited-button, .gallery-button,
.approve-button, .report-button,
.stats-button, .leave-button,
.invite-button,
.sort-default-button, .sort-high-button,
.sort-medium-button, .sort-low-button,
.sort-new-button, .sort-old-button,
.sort-most-button, .sort-least-button,
.sort-active-button, .sort-paused-button,
.sort-finished-button {
	cursor: pointer;
	color: #5d6168;
	display: inline-block;
	position: relative;
	width: 100%;
	line-height: 15px;
	box-sizing: border-box;
	padding: 10px 15px 10px 32px;
	transition: all .2s ease-in-out;
}

.share1-button:hover, .share1-button.active, .share-button:hover, .share-button.active,
.print-button:hover, .print-button.active, .invoice-button:hover, .invoice-button.active,
.close-button:hover, .close-button.active, .edit-button-dropdown:hover, .edit-button-dropdown.active,
.open-button:hover, .open-button.active, .edited-button:hover, .edited-button.active,
.refuse-button:hover, .refuse-button.active, .delete-button:hover, .delete-button.active,
.restore-button:hover, .restore-button.active, .edited-button:hover, .edited-button.active,
.gallery-button:hover, .gallery-button.active, .approve-button:hover, .approve-button.active,
.report-button:hover, .report-button.active, .stats-button:hover, .stats-button.active,
.leave-button:hover, .leave-button.active, .invite-button:hover, .invite-button.active,
.sort-default-button:hover, .sort-default-button.active,
.sort-high-button:hover, .sort-high-button.active,
.sort-medium-button:hover, .sort-medium-button.active,
.sort-low-button:hover, .sort-low-button.active,
.sort-new-button:hover, .sort-new-button.active,
.sort-old-button:hover, .sort-old-button.active,
.sort-most-button:hover, .sort-most-button.active,
.sort-least-button:hover, .sort-least-button.active,
.sort-active-button:hover, .sort-active-button.active,
.sort-paused-button:hover, .sort-paused-button.active,
.sort-finished-button:hover, .sort-finished-button.active {
	color: var(--main-color);
	transition: all .2s ease-in-out;
}

.share1-button, .share-button {
	cursor: pointer;
	background: url("../images/icons/share1_btn_n.png") 5px center no-repeat;
	background-size: 17px;
	background-position: 6px;
}

.share1-button:hover, .share1-button.active, .share-button:hover, .share-button.active {
	background: url("../images/icons/share1_btn_h.png") 5px center no-repeat;
	background-size: 17px;
	background-position: 6px;
}

.leave-button {
	cursor: pointer;
	background: url("../images/icons/leave.webp") 5px center no-repeat;
	background-size: 18px;
	background-position: 7px;
}

.leave-button:hover, .leave-button.active {
	background: url("../images/icons/leave-active.webp") 5px center no-repeat;
	background-size: 18px;
	background-position: 7px;
}

.invite-button {
	cursor: pointer;
	background: url("../images/icons/invite.webp") 5px center no-repeat;
	background-size: 18px;
	background-position: 7px;
}

.invite-button:hover, .invite-button.active {
	background: url("../images/icons/invite-active.webp") 5px center no-repeat;
	background-size: 18px;
	background-position: 7px;
}


.sort-default-button {
	background: url("../images/icons/sort-default.webp") 5px center no-repeat;
	background-size: 19px;
	background-position: 7px;
}

.sort-default-button:hover, .sort-default-button.active {
	background: url("../images/icons/sort-default-active.webp") 5px center no-repeat;
	background-size: 19px;
	background-position: 7px;
}

.sort-high-button {
	background: url("../images/icons/sort-high.webp") 5px center no-repeat;
	background-size: 19px;
	background-position: 7px;
}

.sort-high-button:hover, .sort-high-button.active {
	background: url("../images/icons/sort-high-active.webp") 5px center no-repeat;
	background-size: 19px;
	background-position: 7px;
}

.sort-medium-button {
	background: url("../images/icons/sort-medium.webp") 5px center no-repeat;
	background-size: 19px;
	background-position: 7px;
}

.sort-medium-button:hover, .sort-medium-button.active {
	background: url("../images/icons/sort-medium-active.webp") 5px center no-repeat;
	background-size: 19px;
	background-position: 7px;
}

.sort-low-button {
	background: url("../images/icons/sort-low.webp") 5px center no-repeat;
	background-size: 19px;
	background-position: 7px;
}

.sort-low-button:hover, .sort-low-button.active {
	background: url("../images/icons/sort-low-active.webp") 5px center no-repeat;
	background-size: 19px;
	background-position: 7px;
}

.sort-new-button {
	background: url("../images/icons/sort-newest.webp") 5px center no-repeat;
	background-size: 19px;
	background-position: 7px;
}

.sort-new-button:hover, .sort-new-button.active {
	background: url("../images/icons/sort-newest-active.webp") 5px center no-repeat;
	background-size: 19px;
	background-position: 7px;
}

.sort-old-button {
	background: url("../images/icons/sort-oldest.webp") 5px center no-repeat;
	background-size: 19px;
	background-position: 7px;
}

.sort-old-button:hover, .sort-old-button.active {
	background: url("../images/icons/sort-oldest-active.webp") 5px center no-repeat;
	background-size: 19px;
	background-position: 7px;
}

.sort-most-button {
	background: url("../images/icons/sort-most.webp") 5px center no-repeat;
	background-size: 19px;
	background-position: 7px;
}

.sort-most-button:hover, .sort-most-button.active {
	background: url("../images/icons/sort-most-active.webp") 5px center no-repeat;
	background-size: 19px;
	background-position: 7px;
}

.sort-least-button {
	background: url("../images/icons/sort-least.webp") 5px center no-repeat;
	background-size: 19px;
	background-position: 7px;
}

.sort-least-button:hover, .sort-least-button.active {
	background: url("../images/icons/sort-least-active.webp") 5px center no-repeat;
	background-size: 19px;
	background-position: 7px;
}

.sort-active-button {
	background: url("../images/icons/sort-active.webp") 5px center no-repeat;
	background-size: 19px;
	background-position: 7px;
}

.sort-active-button:hover, .sort-active-button.active {
	background: url("../images/icons/sort-active-active.webp") 5px center no-repeat;
	background-size: 19px;
	background-position: 7px;
}

.sort-paused-button {
	background: url("../images/icons/sort-paused.webp") 5px center no-repeat;
	background-size: 19px;
	background-position: 7px;
}

.sort-paused-button:hover, .sort-paused-button.active {
	background: url("../images/icons/sort-paused-active.webp") 5px center no-repeat;
	background-size: 19px;
	background-position: 7px;
}

.sort-finished-button {
	background: url("../images/icons/sort-finished.webp") 5px center no-repeat;
	background-size: 19px;
	background-position: 7px;
}

.sort-finished-button:hover, .sort-finished-button.active {
	background: url("../images/icons/sort-finished-active.webp") 5px center no-repeat;
	background-size: 19px;
	background-position: 7px;
}

.open-button {
	cursor: pointer;
	background: url("../images/icons/eye-open.webp") 5px center no-repeat;
	background-size: 18px;
	background-position: 7px;
}

.open-button:hover, .open-button.active {
	background: url("../images/icons/eye-open-active.webp") 5px center no-repeat;
	background-size: 18px;
	background-position: 7px;
}

.close-button {
	cursor: pointer;
	background: url("../images/icons/eye-close.webp") 5px center no-repeat;
	background-size: 18px;
	background-position: 7px;
}

.close-button:hover, .close-button.active {
	background: url("../images/icons/eye-close-active.webp") 5px center no-repeat;
	background-size: 18px;
	background-position: 7px;
}

.stats-button {
	cursor: pointer;
	background: url("../images/icons/stats_h.png") 5px center no-repeat;
	background-size: 19px;
	background-position: 5px;
}

.stats-button:hover, .stats-button.active {
	background: url("../images/icons/stats_a.png") 5px center no-repeat;
	background-size: 19px;
	background-position: 5px;
}

.edited-button {
	cursor: pointer;
	background: url("../images/icons/edit_h.png") 5px center no-repeat;
	background-size: 19px;
	background-position: 5px;
}

.edited-button:hover, .edited-button.active {
	background: url("../images/icons/edit_a.png") 5px center no-repeat;
	background-size: 19px;
	background-position: 5px;
}

.approve-button {
	cursor: pointer;
	background: url("../images/icons/approve_h.png") 5px center no-repeat;
	background-size: 19px;
	background-position: 5px;
}

.approve-button:hover, .approve-button.active {
	background: url("../images/icons/approve_a.png") 5px center no-repeat;
	background-size: 19px;
	background-position: 5px;
}

.invoice-button {
	cursor: pointer;
	background: url("../images/icons/invoice_btn_n.png") 5px center no-repeat;
	background-size: 17px;
	background-position: 6px;
}

.invoice-button:hover, .invoice-button.active {
	background: url("../images/icons/invoice_btn_h.png") 5px center no-repeat;
	background-size: 17px;
	background-position: 6px;
}

.print-button {
	cursor: pointer;
	background: url("../images/icons/print_btn_n.png") 5px center no-repeat;
	background-size: 17px;
	background-position: 6px;
}

.print-button:hover, .print-button.active {
	background: url("../images/icons/print_btn_h.png") 5px center no-repeat;
	background-size: 17px;
	background-position: 6px;
}

.report-button {
	cursor: pointer;
	background: url("../images/icons/report_btn_n.webp") 5px center no-repeat;
	background-size: 17px;
	background-position: 6px;
}

.report-button:hover, .report-button.active {
	background: url("../images/icons/report_btn_h.webp") 5px center no-repeat;
	background-size: 17px;
	background-position: 6px;
}

.restore-button {
	cursor: pointer;
	background: url("../images/icons/restore_btn_n.webp") 5px center no-repeat;
	background-size: 17px;
	background-position: 6px;
}

.restore-button:hover, .restore-button.active {
	background: url("../images/icons/restore_btn_h.webp") 5px center no-repeat;
	background-size: 17px;
	background-position: 6px;
}

.delete-button {
	cursor: pointer;
	background: url("../images/icons/delete_btn_n.webp") 5px center no-repeat;
	background-size: 17px;
	background-position: 6px;
}

.delete-button:hover, .delete-button.active {
	background: url("../images/icons/delete_btn_h.webp") 5px center no-repeat;
	background-size: 17px;
	background-position: 6px;
}

.refuse-button {
	cursor: pointer;
	background: url("../images/icons/refuse_btn_n.webp") 5px center no-repeat;
	background-size: 17px;
	background-position: 6px;
}

.refuse-button:hover, .refuse-button.active {
	background: url("../images/icons/refuse_btn_h.webp") 5px center no-repeat;
	background-size: 17px;
	background-position: 6px;
}

.gallery-button {
	cursor: pointer;
	background: url("../images/icons/gallery.webp") 5px center no-repeat;
	background-size: 17px;
	background-position: 6px;
}

.gallery-button:hover, .gallery-button.active {
	background: url("../images/icons/gallery_a.webp") 5px center no-repeat;
	background-size: 17px;
	background-position: 6px;
}

.edit-button-dropdown {
	cursor: pointer;
	background: var(--main-color) url("../images/icons/edit_h1.png") 5px center no-repeat;
	background-size: 17px;
	background-position: 6px;
	border: 1px solid var(--main-color);
	border-radius: var(--border-radius-extra-large);
	color: #ffffff;
	top: 5px;
    transition: all .15s cubic-bezier(0.38, 0.37, 0.29, 1.61);
}

.edit-button-dropdown:hover, .edit-button-dropdown.active {
	background: var(--main-color) url("../images/icons/edit_h1.png") 5px center no-repeat;
	background-size: 17px;
	background-position: 6px;
	color: #ffffff;
    transform: scale(1.05);
    transition: all .15s cubic-bezier(0.38, 0.37, 0.29, 1.61) !important;
}

.share1-button .action-text, .share-button .action-text,
.print-button .action-text, .invoice-button .action-text,
.close-button .action-text, .edited-button .action-text,
.open-button .action-text, .delete-button .action-text,
.refuse-button .action-text, .edited-button .action-text,
.gallery-button .action-text, .edit-button-dropdown .action-text,
.approve-button .action-text,
.sort-default-button .action-text, .sort-high-button .action-text,
.sort-medium-button .action-text, .sort-low-button .action-text,
.sort-new-button .action-text, .sort-old-button .action-text,
.sort-most-button .action-text, .sort-least-button .action-text,
.sort-active-button .action-text, .sort-paused-button .action-text,
.sort-finished-button .action-text {
	line-height: 15px;
}


/* Dashboard sort dropdown — two columns
-------------------------------------------------------------- */

.dashboard-collections-header #dashboard-sort-menu {
	width: 350px !important;
	min-width: 350px;
	max-width: 350px;
	left: auto !important;
	right: 0 !important;
	box-sizing: border-box;
}

.dashboard-collections-header #dashboard-sort-menu .dashboard-sort-columns {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
}

.dashboard-collections-header #dashboard-sort-menu .dashboard-sort-column {
	min-width: 0;
}

.dashboard-collections-header #dashboard-sort-menu .dashboard-sort-column + .dashboard-sort-column {
	border-left: 1px solid #ffffff10;
}

.dashboard-collections-header #dashboard-sort-menu .dashboard-sort-title {
	padding: 9px 12px 5px;
	margin-top: 5px;
	border-top: 1px solid #ffffff10;
	color: #ffffff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .4px;
	text-transform: uppercase;
	pointer-events: none;
}

.dashboard-collections-header #dashboard-sort-menu .dashboard-sort-column .dashboard-sort-title:first-child {
	margin-top: 0;
	border-top: 0;
	padding-top: 5px;
}

.dashboard-collections-header #dashboard-sort-menu .dashboard-sort-option {
	min-width: 145px;
}

@media only screen and (max-width: 500px) {
	.dashboard-collections-header #dashboard-sort-menu {
		width: calc(100vw - 60px) !important;
		min-width: calc(100vw - 60px);
		max-width: calc(100vw - 60px);
		left: auto !important;
		right: 0 !important;
	}
}

.share-button-right {
	float: right;
}

.share-button-left {
	float: left;
}

.loading-button {
	cursor: pointer;
	background: url("../images/loader.gif") 5px center no-repeat;
	background-size: 15px;
	display: inline-block;
	position: relative;
	width: 100%;
	box-sizing: border-box;
	background-position: 6px;
}

.small-loader {
	background: url("../images/loader.gif") no-repeat;
	background-size: 15px;
	float: right;
	width: 15px;
	height: 15px;
	margin-top: 1px;
}

.vertical-divider {
	padding: 0 10px;
	color: #f1f1f1;
	float: right;
	font-size: 12px;
}

.counter {
	width: auto;
	padding: 0 0 0 25px;
	line-height: 23px;
	float: right;
	color: #fff;
	background-size: 17px;
	background-repeat: no-repeat;
	background-position: 5px 3px;
	font-size: 12px;
}

.views_counter {
	background-image: url("../images/icons/views_n_h.png");
}

.comments_counter {
	background-image: url("../images/icons/comment_n_mobile.png");
}

.downloads_counter {
	background-image: url("../images/icons/download_btn_n_mobile.png");
}

.group-content {
	position: relative;
	display: inline-block;
	width: 100%;
}

.group-content a {
	text-decoration: none;
}

.group-content-info {
	z-index: 1;
	position: relative;
}

.group-buttons-container {
	font-size: 12px;
}

.group-actions-container {
	padding: 10px 0 0 110px;
}

.group-actions {
	width: 100%;
}

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

.content-group .timeago {
	color: #fff;
}

.content-group .group-title-display {
	font-size: 20px;
	word-wrap: break-word;
	width: 100%;
	float: left;
	color: #FFF;
	font-weight: 600;
	letter-spacing: .5px;
	overflow: hidden;
	text-overflow: ellipsis;
	text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

.group-stats {
	float: right;
	background: linear-gradient(135deg, var(--main-color) 0%, var(--second-color) 100%);
	border-radius: var(--radius-main);
	padding: 3px 10px;
	z-index: 5;
	position: relative;
	margin-top: -25px;
}

.content-group .group-stats {
	margin-top: 0px;
	position: relative;
	float: left;
}

.jobs-small-icon {
	background: url("../images/icons/job-side_h.png") no-repeat left center;
	background-size: 12px;
	padding-left: 15px;
	color: #FFF;
	float: left;
}

.comment-btn,
.comment-edit-btn {
	float: right;
	display: flex;
	align-items: center;
	position: absolute;
	right: 15px;
}

.comment-btn {
	margin-top: 6px;
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
}

.comment-edit-btn {
	margin-top: 16px;
}

.comment-btn.buttonShow,
.comment-edit-btn.buttonShow {
	opacity: 1;
	transition: opacity 0.3s ease-in-out;
}

.comment-btn a,
.comment-edit-btn a {
	float: right;
	border-radius: 25px;
	padding: 10px 20px;
	color: #fff;
	cursor: pointer;
	text-decoration: none;
	text-align: center;
	z-index: 2;
	position: relative;
	background: var(--main-color);
    transition: all .15s cubic-bezier(0.38, 0.37, 0.29, 1.61);
}

.comment-btn .post-comment:hover,
.comment-btn .post-comment:active,
.comment-edit-btn .post-comment:hover,
.comment-edit-btn .post-comment:active {
	box-shadow: 0 0 0 1.3em var(--main-color-transp) inset;
    transform: scale(1.05);
    transition: all .15s cubic-bezier(0.38, 0.37, 0.29, 1.61) !important;
	color: #FFF;
}

.close_btn {
	width: 20px;
	height: 20px;
	float: right;
	background: url("../images/icons/close.png") no-repeat center center;
	background-size: 20px;
	cursor: pointer;
}

.close_btn:hover {
	background: url("../images/icons/close_h.png") no-repeat center center;
	background-size: 20px;
}

.delete_btn {
	width: 20px;
	height: 20px;
	float: right;
	background: url("../images/icons/delete.png") no-repeat center center;
	background-size: 20px;
	cursor: pointer;
}

.delete_btn:hover {
	background: url("../images/icons/delete_h1.png") no-repeat center center;
	background-size: 20px;
}

.edit_btn {
	width: 20px;
	height: 20px;
	float: right;
	margin-left: 5px !important;
	background: url("../images/icons/edit.png") no-repeat 8px 0px;
	background-size: 23px;
	cursor: pointer;
	transition: all .3s ease-in-out;
}

.edit_btn:hover {
	background: url("../images/icons/edit_h1.png") no-repeat 8px 0px, var(--main-color);
	background-size: 23px;
	border: 1px solid var(--main-color);
	box-shadow: none !important;
	transition: all .3s ease-in-out;
}

.edit_btn_admin {
	width: 20px;
	height: 18.5px;
	float: right;
	margin-left: 5px !important;
	background: url("../images/icons/edit_a.png") no-repeat 8px 0px;
	background-size: 25px;
	cursor: pointer;
	transition: all .3s ease-in-out;
}

.edit_btn_admin:hover {
	background: url("../images/icons/edit_h1.png") no-repeat 8px 0px, var(--main-color);
	background-size: 25px;
	border: 1px solid var(--main-color);
	box-shadow: none !important;
	transition: all .3s ease-in-out;
}

.message-reply-container .edit_btn {
	background: url("../images/icons/edit.png") no-repeat;
	background-size: 20px;
	transition: all .3s ease-in-out;
	margin-left: 0px !important;
}

.message-reply-container .edit_btn:hover {
	background: url("../images/icons/edit_h1.png") no-repeat;
	background-size: 20px;
	border: 0px;
	box-shadow: none !important;
	transition: all .3s ease-in-out;
}

.folder-20,
.folder-30,
.folder-45,
.folder-50,
.folder-80 {
	background-image: url("../images/icons/folder.webp");
	background-position: center;
	background-repeat: no-repeat;
	border-radius: var(--border-radius-small);
	float: left;
	position: relative;
}

.folder-20,
.folder-20,
.folder-20,
.folder-20 {
	min-width: 20px;
	min-height: 20px;
	background-size: 20px 20px;
}

.folder-30,
.folder-30,
.folder-30,
.folder-30 {
	min-width: 30px;
	min-height: 30px;
	background-size: 30px 30px;
}

.folder-45,
.folder-45,
.folder-45,
.folder-45 {
	min-width: 45px;
	min-height: 45px;
	background-size: 45px 45px;
}

.folder-50,
.folder-50,
.folder-50,
.folder-50 {
	min-width: 50px;
	min-height: 50px;
	background-size: 50px 50px;
}

.folder-80,
.folder-80,
.folder-80,
.folder-80 {
	min-width: 80px;
	min-height: 80px;
	background-size: 80px 80px;
}

.adding_btn {
	width: 22px;
	height: 22px;
	float: right;
	padding: 3px;
	background: var(--main-color) url("../images/icons/add.png") center center no-repeat;
	background-size: 22px;
	cursor: pointer;
	border-radius: 3px;
	transition: all .3s ease-in-out;
	flex-shrink: 0;
}

.adding_btn:hover,
.adding_email_btn:hover {
	background: #fff url("../images/icons/add_h.png") center center no-repeat;
	background-size: 17px;
	transition: all .3s ease-in-out;
}

.adding_email_btn {
	width: 22px;
	height: 22px;
	float: right;
	margin: 6px 0 0 0;
	padding: 3px;
	background: var(--main-color) url("../images/icons/add.png") center center no-repeat;
	background-size: 22px;
	cursor: pointer;
	border-radius: 3px;
	transition: all .3s ease-in-out;
}

.report_btn {
	width: 17px;
	height: 17px;
	float: right;
	background: url("../images/icons/report.png") no-repeat center center;
	background-size: 17px;
	cursor: pointer;
}

.report_btn:hover {
	background: url("../images/icons/report_h.png") no-repeat center center;
	background-size: 17px;
	transition: all .3s ease-in-out;
}

.sub-loading {
	background-color: #fff;
	background-image: url("../images/loader.gif");
	background-size: 20px;
	background-position: center;
	background-repeat: no-repeat;
	color: #6B6B6B;
	border-radius: 3px;
	width: 25px;
	height: 25px;
	float: right;
	cursor: pointer;
	margin-left: 5px;
}

.list-container .sub-loading {
	border: 1px solid #f1f1f1;
}

.mobile-side {
	display: none;
}

.content-group .mobile-header,
.content-group .page-header-1 {
	display: none;
}

.last-comment-wrong {
	border-bottom: 1px solid #f1f1f1;
	padding-bottom: 5px;
}

.comments_preloader,
.delete_preloader {
	width: 100%;
	z-index: 2;
}

.comment-reply-avatar {
	width: 62px;
	float: left;
	overflow: hidden;
	position: relative;
	padding-right: 10px;
}

.comment-reply-avatar .verified-small {
	position: absolute;
	margin-left: 40px;
	margin-top: -30px;
}

.comment-reply-avatar img {
	border-radius: 50%;
	width: 45px;
	height: 45px;
	padding: 8px;
	border: 1px solid #ffffff15;
}

.comment-reply-avatar .verified-small img {
	border: 0px;
}

.emoticon {
	top: 3px;
	position: relative;
}

.delete_preloader img,
.comments_preloader img {
	width: 85px;
}

.message-reply-avatar {
	width: 40px;
	float: left;
	overflow: auto;
	position: relative;
	z-index: 2;
	padding-right: 10px;
}

.message-reply-avatar img {
	border-radius: 50%;
	width: 40px;
	height: 40px;
	background: #ffffff05;
}

.message-reply-avatar-1 img {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: #ffffff05;
}

.message-reply-avatar-1 {
	width: 50px;
	float: left;
	position: absolute;
	z-index: 2;
}

.message-reply-textarea {
	float: left;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.message-reply-textarea textarea,
.message-reply-textarea .comment-reply-textarea {
	width: -webkit-fill-available;
	margin-left: 60px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.message-reply-textarea-1 textarea {
	width: -webkit-fill-available;
	margin-left: 55px;
	padding-right: 185px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.message-comment-box-form {
	background: #ffffff05;
	border-radius: var(--border-radius-extra-large);
	padding: 10px;
	height: 50px;
	position: relative;
}

.button-normal,
.search-input1 input[type="submit"] {
	display: inline;
	border: 1px solid var(--main-color);
	color: var(--main-color);
	background: transparent;
	font-size: var(--font-size-main);
	padding: 15px 0px !important;
	text-decoration: none;
	border-radius: 30px;
	cursor: pointer;
	outline: none;
	transition: all .2s ease-in-out;
}

.search-input1 input[type="submit"]:hover,
.button-normal:hover,
.upload-btn-selected:hover {
	box-shadow: 0 0 0 2em var(--main-color) inset;
	color: #ffffff;
	transform: scale(1.01);
	transition: all .2s ease-in-out;
}

.button-normal:active,
.search-input1 input[type="submit"]:active,
.upload-btn-selected {
	box-shadow: none;
	background: var(--main-color);
	color: #ffffff;
	transform: scale(1.01);
	transition: all .2s ease-in-out;
}

.look-more {
	padding: 8px 15px;
	border-radius: var(--border-radius-large);
	border: 1px solid var(--main-color);
	color: var(--main-color);
	cursor: pointer;
	transition: all .3s ease-in-out;
}

.look-more a {
	color: var(--main-color) !important;
}

.look-more:hover a {
	color: #ffffff !important;
}

.look-more:hover {
	box-shadow: 0 0 0 1.5em var(--main-color) inset;
	border: 1px solid var(--main-color);
	color: #fff;
	transition: all .3s ease-in-out;
}

#load-more {
	padding: 20px 0;
	height: 30px;
	float: left;
	width: 100%;
}

.load-more-frames,
.load-more-gallerys,
.load-more-comments {
	position: relative;
	display: flex;
	width: 100%;
	justify-items: center;
	justify-content: center;
}

.load-more-frames,
.load-more-gallerys,
.load-more-comments {
	margin: 15px 0;
}

.load-more-comments {
	margin: 15px 0;
}

.load_more {
	text-align: center;
	height: 38px;
}

.load_page {
	text-align: center;
	display: flex;
	gap: 10px;
}

.admin-load-more,
.admin-load-more1,
.admin-load-more3,
.admin-load-more4 {
	position: relative;
	display: inline-block;
	width: 100%;
}

.load_more a {
	border: 1px solid var(--main-color);
	color: var(--main-color);
	border-radius: var(--border-radius-large);
	padding: 8px 15px;
	cursor: pointer;
	display: inline-block;
	text-decoration: none;
	transition: all .3s ease-in-out;
}

.load_page a {
	border: 1px solid var(--main-color);
	color: var(--main-color);
	border-radius: var(--border-radius-small);
	padding: 5px 12px;
	cursor: pointer;
	display: inline-block;
	text-decoration: none;
	transition: all .3s ease-in-out;
}

.load_more a:hover,
.load_more a:active,
.load_page a:hover {
	border: 1px solid var(--main-color-transp);
	color: var(--main-color-transp);
	transition: all .3s ease-in-out;
}

.load_page a.active {
	border: 1px solid var(--main-color);
	background: var(--main-color);
	color: #ffffff;
	transition: all .3s ease-in-out;
}

.load_more img {
	width: 85px;
}

.timeago,
.timeago-standard {
	color: #ffffff;
	display: inline-block;
}

.play-section .timeago {
	color: #fff;
}

.verified-small img {
	background-size: 13px;
	width: 13px;
	height: 13px;
	display: inline-block;
	position: relative;
}

.sidebar-container {
	padding: 20px 20px 0;
}

.sidebar-container-1 {
	padding: 20px;
}

.sidebar-container-2 {
	padding: 0px;
}

.sidebar-container-go-pro {
	padding: 20px 20px 0 0;
}

.sidebar-content {
	color: #5d6168;
}

.job-description .sidebar-content {
	display: flex;
}

.sidebar-header-module,
.sidebar-header {
	text-transform: uppercase;
	color: var(--main-color);
	font-size: var(--font-body);
}

.sidebar-header-timer {
	padding: 10px;
	margin-bottom: 10px;
	text-align: center;
	font-weight: 700;
	text-transform: uppercase;
	background: #ffffff05;
	min-height: 20px;
	color: #fff;
	border-radius: var(--radius-main) 0px 0px var(--radius-main);
}

.sidebar-header-timer-1 {
	padding: 10px;
	margin-bottom: 10px;
	text-align: left;
	font-weight: 700;
	text-transform: uppercase;
	background: #ffffff05;
	min-height: 20px;
	color: #fff;
	border-radius: 0px var(--radius-main) var(--radius-main) 0px;
}

.sidebar-header-module-1 {
	padding: 13px 20px;
	font-weight: 700;
	text-transform: uppercase;
	background: #ffffff05;
	color: #fff;
	border-radius: var(--radius-main);
}

.sidebar-header-module-2 {
	text-transform: uppercase;
	color: #fff;
}

.sidebar-header-search {
	margin-bottom: 10px;
}

.sidebar-header-search input {
	outline: 0;
	border: none;
	background: #fff url("../images/icons/search.png") no-repeat top right;
	background-size: 16px;
	background-position: 95%;
	border-bottom: 1px solid #ffffff08;
	width: 93%;
	margin: 0;
	padding: 10px;
	font-size: var(--font-size-main);
}

.sidebar-header-module a,
.sidebar-header a {
	font-weight: 700;
	text-decoration: none;
	color: #959aac;
}

.sidebar-header-extra,
.sidebar-header-extra1 {
	float: right;
	text-align: right;
	position: relative;
	display: inline-block;
	min-width: 120px;
	align-content: center;
}

.sidebar-header-extra2 {
	line-height: 55px;
	text-align: center;
	min-width: 120px;
}

.sidebar-header-extra3 {
	float: right;
	text-align: right;
	position: relative;
	display: flex;
	align-items: center;
}

.sidebar-header-extra-history {
    float: right;
    text-align: right;
    position: absolute;
    display: flex;
    align-items: center;
    right: 0px;
}

.sidebar-header-edit-extra {
	float: right;
	text-align: right;
	position: relative;
	display: flex;
	align-items: center;
	height: -webkit-fill-available;
	/* min-width: 120px; */
	justify-content: end;
}

.item-selector .sidebar-header-edit-extra {
	height: initial !important;
}

#categoriesuser .sidebar-header-edit-extra {
	min-width: auto !important;
}

.sidebar-header-extra-notif {
	float: right;
}

.action-newsletter {
	margin-top: 17px;
	right: 20px;
	position: absolute;
}

.sidebar-header-extra-history .sidebar-icon-mobile,
.sidebar-header-extra3 .sidebar-icon-mobile,
.sidebar-header-edit-extra .sidebar-icon-mobile {
	background: url("../images/icons/point1.png") center center no-repeat;
	background-size: 20px 20px;
	width: 30px;
	height: 30px;
	float: left;
	cursor: pointer;
	transition: all .1s ease-in-out;
}

.sidebar-header-extra-history .sidebar-buttons-container,
.sidebar-header-extra3 .sidebar-buttons-container,
.sidebar-header-edit-extra .sidebar-buttons-container {
	width: max-content;
	height: auto;
	background: var(--foregroud-color-1);
	position: absolute;
	display: flex;
	flex-direction: column;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .2);
	pointer-events: none;
	z-index: 2;
	border-radius: var(--border-radius-small);
	text-align: left;
	right: 0;
	align-self: baseline;
	visibility: hidden;
	opacity: 0;
	transform: scale(0.9) translateY(-10px);
	transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s;
}

.sidebar-header-extra-history:hover .sidebar-buttons-container,
.sidebar-header-extra3:hover .sidebar-buttons-container,
.sidebar-header-edit-extra:hover .sidebar-buttons-container {
	visibility: visible;
	opacity: 1;
	pointer-events: all;
	transform: scale(1) translateY(0);
	transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s;
}

.sidebar-buttons-container > .edited-button,
.sidebar-buttons-container > .popup-button,
.sidebar-buttons-container > .delete-button {
	width: 100%;
	float: none;
	box-sizing: border-box;
}

.sidebar-header-extra-history .sidebar-buttons-container:has(> .edit-button-dropdown),
.sidebar-header-extra3 .sidebar-buttons-container:has(> .edit-button-dropdown),
.sidebar-header-edit-extra .sidebar-buttons-container:has(> .edit-button-dropdown) {
	visibility: visible;
	opacity: 1;
	pointer-events: all;
	transform: scale(1) translateY(0);
	transition: none;
}


/* ==========================================================================
   START ACCOUNT CONNECTIONS
   ========================================================================== */
.security-table-container {
	width: 100%;
	margin: 10px 0 15px 0;
	overflow: visible;
}

.security-table {
	width: 100%;
	table-layout: fixed;
	background: #ffffff05;
	border-radius: var(--border-radius-small);
}

.security-table th,
.security-table td {
	padding: 14px 12px;
	text-align: left;
	vertical-align: middle;
	border-bottom: 1px solid #ffffff10;
}

.security-table th {
	font-weight: 500;
	text-transform: uppercase;
	opacity: .55;
}

.security-table th:nth-child(1),
.security-table td:nth-child(1) {
	width: 27%;
}

.security-table th:nth-child(2),
.security-table td:nth-child(2) {
	width: 10%;
}

.security-table th:nth-child(3),
.security-table td:nth-child(3) {
	width: 12%;
}

.security-table th:nth-child(4),
.security-table td:nth-child(4) {
	width: 23%;
}

.security-table th:nth-child(5),
.security-table td:nth-child(5) {
	width: 18%;
}

.security-table th:last-child,
.security-table td:last-child {
	width: 10%;
	text-align: right;
}

.security-table .session-device {
	min-width: 0;
}

.security-table .session-device strong {
	display: block;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.security-table .session-actions {
	position: relative;
	overflow: visible;
}

.security-table .session-actions .sidebar-header-extra-history {
	position: relative;
	right: auto;
	float: none;
	display: inline-flex;
}

.session-status {
	display: inline-block;
	padding: 5px 9px;
	border-radius: var(--border-radius-large);
	font-size: 11px;
}

.session-status.current,
.session-status.active {
	background: #4ab46921;
	color: #78d696;
}

.session-status.revoked {
	background: #ffffff10;
	opacity: .55;
}

.no-session {
	padding: 25px !important;
	text-align: center !important;
	opacity: .5;
}

.block-ip-address {
	margin-top: 14px;
	padding: 12px 14px;
	background: var(--foregroud-color-2);
	border-radius: var(--border-radius-small);
	font-weight: 600;
	word-break: break-all;
}

@media only screen and (max-width: 900px) {
	.security-table-container {
		overflow-x: auto;
		overflow-y: hidden;
	}

	.security-table {
		min-width: 820px;
	}
}
/* ==========================================================================
   END ACCOUNT CONNECTIONS
   ========================================================================== */

.sidebar-header-extra a,
.sidebar-header-extra1 a,
.sidebar-header-extra2 a,
.action-newsletter a,
.sidebar-header-extra-notif a {
	cursor: pointer;
	text-decoration: none;
	color: var(--main-color);
	border-radius: var(--border-radius-large);
	margin: 7px auto;
	text-align: center;
	padding: 6px 12px;
	border: solid 1px var(--main-color);
	transition: all .3s ease-in-out;
}

.sidebar-header-extra a,
.sidebar-header-extra1 a,
.action-newsletter a,
.sidebar-header-extra-notif a {
	display: inline-block;
}

.sidebar-header-extra a:hover,
.sidebar-header-extra1 a:hover,
.sidebar-header-extra2 a:hover,
.action-newsletter a:hover,
.sidebar-header-extra-notif a:hover {
	color: #ffffff;
	text-decoration: none;
	border: solid 1px var(--main-color);
	box-shadow: 0 0 0 1.5em var(--main-color) inset;
	transition: all .3s ease-in-out;
}

.sidebar-header-extra-active {
	float: right;
}

.sidebar-header-extra-active a {
	font-weight: 400;
	cursor: pointer;
	text-decoration: none;
	color: #fff;
	border-radius: var(--radius-main);
	margin: 0 auto;
	text-align: center;
	padding: 3px 8px;
	border: solid 1px #fff;
}

.sidebar-header-extra-active a:hover {
	color: #111;
	text-decoration: none;
	border: solid 1px #fff;
	background: #fff;
	transition: all .2s ease-in-out;
}

.sidebar-link img {
	vertical-align: middle;
	margin-right: 15px;
	height: 20px;
	width: 20px;
	margin-top: -3px;
}

.sidebar-link a {
	color: #818183;
	display: block;
	padding: 6px 20px;
	border-left: 4px solid transparent;
	text-decoration: none;
	font-family: "Segoe UI", "Trebuchet MS", "PT Sans", "Helvetica Neue", HelveticaNeue-Light, Helvetica, Arial, sans-serif;
	letter-spacing: .5px;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 30px;
	font-size: 12px;
	cursor: pointer;
	transition: all .4s ease-in-out;
}

.sidebar-link a:hover {
	color: #fff;
	transition: all .2s ease-in-out;
}

.sidebar-link-divider {
	border-left: 1px solid #ffffff08;
}

.sidebar-member a,
.sidebar-tag a {
	background: var(--main-color);
	color: #fff;
	float: left;
	margin: 0 10px 10px 0;
	text-decoration: none;
	transition: all .2s ease-in-out;
}

.sidebar-tag a {
	border-radius: var(--radius-main);
	padding: 5px 10px;
}

.sidebar-member a {
	border-radius: var(--border-radius-large);
	padding: 5px 10px 5px 5px;
}

.sidebar-member a:hover,
.sidebar-tag a:hover {
	background: #999999;
	cursor: pointer;
	transform: scale(1.05);
	transition: all .15s cubic-bezier(0.38, 0.37, 0.29, 1.61);
}

.sidebar-member .sidebar-users-image {
	position: relative;
	display: flex;
	align-items: center;
	gap: 5px;
}

.sidebar-member .sidebar-users-image img {
	border-radius: 50%;
}

.sidebar-stats-container {
	color: #818183;
	overflow: auto;
}

.sidebar-stats-container .scroll-overflow {
	height: 210px;
	overflow: auto;
	padding-right: 20px;
	position: relative;
}

.sidebar-stats-box {
	width: 50%;
	float: left;
	padding-top: 0px;
	font-size: 13px;
}

.sidebar-stats-box-bottom {
	width: 50%;
	float: left;
	padding-top: 10px;
	font-size: 30px;
	line-height: 30px;
	color: #ffffff;
}

.sidebar-text-right {
	text-align: right;
	font-size: 20px;
	font-weight: 400;
	padding: 25px 0 0;
	height: 28px;
}

.sidebar-stats-box-right {
	text-align: right;
}

.upload-status-bar,
.sidebar-stats-bar {
	margin-top: 10px;
	height: 16px;
	width: 100%;
	position: relative;
	display: inline-block;
	background: #56586230;
	overflow: hidden;
	border-radius: var(--border-radius-small);
}

.job-stats-bar {
	height: 10px;
	width: 100%;
	position: relative;
	display: inline-block;
	background: #56586230;
	overflow: hidden;
	border-radius: var(--border-radius-small);
}

.demo-stat-upload {
	width: 100%;
	padding: 17px;
	position: relative;
	background: #191A1C;
	border-radius: var(--radius-main);
	float: left;
	box-sizing: border-box;
}

.stat-upload-25 {
	width: 25%;
	position: relative;
	display: flex;
	float: left;
}

.stat-upload-33 {
	width: 33.3%;
	position: relative;
	display: flex;
	float: left;
}

.stat-upload-50 {
	width: 50%;
	position: relative;
	display: flex;
	float: left;
}

#uploader-message-wait .upload-status-bar {
	height: 20px;
	border-radius: var(--border-radius-large);
}

.upload-status-bar,
#uploader-message-wait .upload-status-bar {
	margin-top: 11px;
}

.sidebar-stats-divider {
	margin-top: 13px;
	float: left;
}

.upload-status-bar-percentage,
.sidebar-stats-bar-percentage,
.job-stats-bar-percentage,
#uploader-message-wait .upload-status-bar-percentage,
.progress-bar-color,
.newsletter-progress-bar {
	position: relative;
	overflow: hidden;
	background: var(--main-color);
	border-radius: var(--border-radius-small);
	transition: width 0.5s ease-in-out;
}

.upload-status-bar-percentage,
.sidebar-stats-bar-percentage {
	height: 16px;
	box-shadow: inset 0 4px 6px rgba(255, 204, 163, 0.5), inset 0 -2px 3px rgba(0, 0, 0, 0);
}

.job-stats-bar-percentage {
	height: 10px;
	box-shadow: inset 0 4px 4px rgba(255, 204, 163, 0.5), inset 0 -2px 3px rgba(0, 0, 0, 0);
}

#uploader-message-wait .upload-status-bar-percentage {
	height: 20px;
	border-radius: var(--border-radius-large);
	box-shadow: inset 0 10px 10px rgba(255, 204, 163, 0.5), inset 0 -2px 3px rgba(0, 0, 0, 0);
}

/* Reflet brillant commun aux barres de progression */
.job-stats-bar-percentage::after,
.upload-status-bar-percentage::after,
.sidebar-stats-bar-percentage::after,
#uploader-message-wait .upload-status-bar-percentage::after,
.progress-bar-color::after,
.newsletter-progress-bar::after {
	content: "";
	position: absolute;
	top: -45%;
	left: -65%;
	width: clamp(70px, 35%, 200px);
	height: 190%;
	border-radius: 50%;
	background: linear-gradient(90deg, rgba(249, 232, 203, 0) 0%, rgba(249, 232, 203, 0.5) 50%, rgba(249, 232, 203, 0) 100%);
	filter: blur(0.4px);
	transform: skewX(-24deg);
	pointer-events: none;
	will-change: left, opacity;
	animation: progress-glass-hover 4s ease-in-out infinite;
}

@keyframes progress-glass-hover {
	0%,
	10% {
		left: -65%;
		opacity: 0;
	}

	20% {
		opacity: 0.85;
	}

	55% {
		opacity: 0.85;
	}

	70% {
		left: 125%;
		opacity: 0;
	}

	100% {
		left: 125%;
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.job-stats-bar-percentage::after,
	.upload-status-bar-percentage::after,
	.sidebar-stats-bar-percentage::after,
	#uploader-message-wait .upload-status-bar-percentage::after,
	.progress-bar-color::after,
	.newsletter-progress-bar::after {
		animation: none;
		display: none;
	}
}
.upload-text {
	font-size: 12px;
	font-weight: 700;
	color: #777;
	overflow: auto;
	text-transform: uppercase;
	text-align: center;
	margin-bottom: 15px;
}

#filter-home .upload-text {
	margin-bottom: 0px;
}

.sidebar-users {
	cursor: pointer;
}

.sidebar-users img {
	vertical-align: middle;
	margin-right: 7px;
	background: #23232d;
	border-radius: 50%;
}

img.sidebar-status-icon {
	height: 25px;
	width: 12px;
	background: none;
}

.sidebar-users a {
	margin-top: -1px;
	padding: 5px 10px;
	border-top: 1px solid #f1f1f1;
	font-size: var(--font-size-main);
	display: block;
	text-decoration: none;
	color: #898F9C;
}

.sidebar-users a:hover {
	background: #F1F1F1;
	color: #4b4d5f;
}

.sidebar-links,
.sidebar-tag-links {
	padding: 0;
	margin: 20px 0;
}

.sidebar-links li,
.sidebar-tag-links li {
	list-style-type: none;
}

li a.sidebar-link {
	color: #818183;
	display: block;
	padding: 6px 20px;
	border-left: 4px solid transparent;
	text-decoration: none;
	font-family: "Segoe UI", "Trebuchet MS", "PT Sans", "Helvetica Neue", HelveticaNeue-Light, Helvetica, Arial, sans-serif;
	letter-spacing: .5px;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 30px;
	font-size: 12px;
	cursor: pointer;
	transition: all .4s ease-in-out;
}

li a.sidebar-link-active,
li a.sidebar-link-active:hover,
.sidebar-link-active a,
.sidebar-link-active a:hover {
	border-left: 4px solid var(--main-color);
	background: -moz-linear-gradient(45deg, var(--main-color-transp-1) 0%, var(--main-color-transp-2) 40%, var(--main-color-transp-3) 80%);
	background: -webkit-linear-gradient(45deg, var(--main-color-transp-1) 0%, var(--main-color-transp-2) 40%, var(--main-color-transp-3) 80%);
	background: linear-gradient(45deg, var(--main-color-transp-1) 0%, var(--main-color-transp-2) 40%, var(--main-color-transp-3) 80%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#33fe6137", endColorstr="#00fe6137",GradientType=1 );
	transition: all .2s ease-in-out;
}

li a.sidebar-link-active:hover,
.sidebar-link-active a:hover {
	color: #ffffff;
	text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
	border-left: 4px solid #fff;
	filter: brightness(0) invert(1);
	transition: background .4s ease-in-out, color .4s ease-in-out;
}

li a.sidebar-link-active,
.sidebar-link-active a {
	color: var(--main-color);
	text-shadow: 2px 2px 5px var(--main-color-transp);
}

.sidebar-tag-links li {
	display: inline-block;
	position: relative;
	margin-bottom: 10px;
}

li a.sidebar-tag-link {
	text-align: left;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-decoration: none;
	list-style-type: none;
	padding: 5px 10px;
	line-height: 30px;
	margin-right: 5px;
	border-radius: var(--radius-main);
	background: #959aac;
	color: #fff;
}

.sidebar-tag-link:hover {
	transform: scale(1.05);
	transition: all .15s cubic-bezier(0.38, 0.37, 0.29, 1.61);
}

/* ==========================================================================
   START WIDGET TRENDING COLLECTIONS
   ========================================================================== */

.widget-trending .sidebar-content {
	width: 100%;
	padding: 17px;
	position: relative;
	background: #191A1C;
	border-radius: var(--radius-main);
	box-sizing: border-box;
	overflow: hidden;
}

.widget-trending .sidebar-header-module {
	margin: 0 0 13px;
	padding: 0 0 13px;
	border-bottom: 1px solid #ffffff10;
}

.widget-trending .sidebar-tag-links {
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.widget-trending .sidebar-tag-links li {
	display: block;
	margin: 0;
}

.widget-trending li a.sidebar-tag-link {
	min-height: 30px;
	margin: 0;
	padding: 4px 11px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	line-height: 22px;
	border: 1px solid #ffffff12;
	border-radius: var(--radius-main);
	box-sizing: border-box;
	box-shadow: inset 0 1px 0 #ffffff10;
	transition: transform .15s cubic-bezier(0.38, 0.37, 0.29, 1.61), filter .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.widget-trending li a.sidebar-tag-link::before {
	content: "";
	width: 5px;
	height: 5px;
	flex: 0 0 5px;
	background: #ffffff;
	border-radius: 50%;
	box-shadow: 0 0 0 3px #ffffff18;
	opacity: .9;
}

.widget-trending .sidebar-tag-link:hover {
	transform: scale(1.05);
	filter: brightness(1.08);
	border-color: #ffffff25;
	box-shadow: inset 0 1px 0 #ffffff18, 0 5px 14px #00000020;
}

/* ==========================================================================
   END WIDGET TRENDING COLLECTIONS
   ========================================================================== */

.plus-button {
	height: 42px;
	overflow: hidden;
	border: 2px solid #BBB;
	border-radius: 5px;
	background: #FFF;
	color: #BBB;
	font-size: 14px;
	font-weight: 700;
	line-height: 40px;
	text-align: center;
}

.plus-sign {
	margin-left: -5px;
}

.plus-button:hover {
	color: #fff;
	background: #BBB;
}

.sidebar-divider {
	height: 1px;
	width: 100%;
	background: #f1f1f1;
	float: left;
}

.sidebar-list {
	margin-top: -1px;
	padding: 7px 10px;
	border-top: 1px solid #f1f1f1;
	font-size: 12px;
}

.sidebar-list img {
	width: 20px;
	height: 20px;
	margin-left: 3px;
	vertical-align: middle;
}

.sidebar-description {
	padding: 15px 0 0 0;
	word-wrap: break-word;
}

.sidebar-description-container {
	padding: 15px 0 0 0;
	word-wrap: break-word;
	display: flex;
	gap: 15px;
}

.sidebar-description .timeago {
	color: #818183;
}

.sidebar-box {
	padding: 10px;
	word-wrap: break-word;
	width: 100%;
	background: #ffffff08;
	border-radius: var(--radius-main);
}

.sidebar-description-title {
	color: #fff;
	font-size: 14px;
	margin-bottom: 5px;
	font-weight: 600;
}

.sidebar-description-report {
	padding-bottom: 10px;
	word-wrap: break-word;
	text-align: center;
}

.sidebar-license {
	margin-top: 3px;
}

.sidebar-social-container {
	overflow: auto;
	padding: 10px 10px 0 20px;
}

.social-icon {
	width: 35px;
	border-radius: 50%;
	height: 35px;
}

.share-social-icon {
	height: 45px;
	width: 45px;
	border-radius: 50%;
}

.website-icon {
	background: #f1f1f1 url("../images/icons/social/website.png") center center no-repeat;
	background-size: 16px;
}

.website-icon:hover {
	background: #888 url("../images/icons/social/website_h.png") center center no-repeat;
	background-size: 16px;
}

.facebook-icon {
	background: #f1f1f1 url("../images/icons/social/facebook.png") center center no-repeat;
	background-size: 18px;
}

.facebook-icon:hover {
	background: #3b579d url("../images/icons/social/facebook_h.png") center center no-repeat;
	background-size: 18px;
}

.x-icon {
	background: #f1f1f1 url("../images/icons/social/x.png") center center no-repeat;
	background-size: 20px;
}

.x-icon:hover {
	background: #55acee url("../images/icons/social/x_h.png") center center no-repeat;
	background-size: 20px;
}

.youtube-icon {
	background: #f1f1f1 url("../images/icons/social/youtube.png") center center no-repeat;
	background-size: 18px;
}

.youtube-icon:hover {
	background: #CC201F url("../images/icons/social/youtube_h.png") center center no-repeat;
	background-size: 18px;
}

.vimeo-icon {
	background: #f1f1f1 url("../images/icons/social/vimeo.png") center center no-repeat;
	background-size: 18px;
}

.vimeo-icon:hover {
	background: #1ab7ea url("../images/icons/social/vimeo_h.png") center center no-repeat;
	background-size: 18px;
}

.soundcloud-icon {
	background: #f1f1f1 url("../images/icons/social/soundcloud.png") center center no-repeat;
	background-size: 18px;
}

.soundcloud-icon:hover {
	background: #F7640F url("../images/icons/social/soundcloud_h.png") center center no-repeat;
	background-size: 18px;
}

.lastfm-icon {
	background: #f1f1f1 url("../images/icons/social/lastfm.png") center center no-repeat;
	background-size: 18px;
}

.lastfm-icon:hover {
	background: #D00A01 url("../images/icons/social/lastfm_h.png") center center no-repeat;
	background-size: 18px;
}

.tumblr-icon {
	background: #f1f1f1 url("../images/icons/social/tumblr.png") center center no-repeat;
	background-size: 18px;
}

.tumblr-icon:hover {
	background: #37465d url("../images/icons/social/tumblr_h.png") center center no-repeat;
	background-size: 18px;
}

.myspace-icon {
	background: #f1f1f1 url("../images/icons/social/myspace.png") center center no-repeat;
	background-size: 18px;
}

.myspace-icon:hover {
	background: #018CDD url("../images/icons/social/myspace_h.png") center center no-repeat;
	background-size: 18px;
}

.pinterest-icon {
	background: #f1f1f1 url("../images/icons/social/pinterest.png") center center no-repeat;
	background-size: 18px;
}

.pinterest-icon:hover {
	background: #D0383F url("../images/icons/social/pinterest_h.png") center center no-repeat;
	background-size: 18px;
}

.email-icon {
	background: #f1f1f1 url("../images/icons/social/email.png") center center no-repeat;
	background-size: 18px;
}

.email-icon:hover {
	background: #4b4d5f url("../images/icons/social/email_h.png") center center no-repeat;
	background-size: 18px;
}

.social-icon-container {
	float: left;
}

.social-icon-padding {
	padding: 0 15px 10px 0;
}

.share-icon-container {
	float: left;
	position: relative;
	display: block;
	width: calc(100% / 4);
	text-align: -webkit-center;
}

.share-icon-container a {
	cursor: pointer;
}

.share-icon-container .social-icon-padding {
	padding: 0;
}

.sidebar-social img {
	margin-right: 3px;
	width: 16px;
	height: 16px;
	vertical-align: top;
	font-size: 12px;
}

.sidebar-list a {
	color: #6B6B6B;
}

.sidebar-avatar {
	width: 50px;
	float: left;
}

.sidebar-avatar img {
	border-radius: 3px;
}

.sidebar-avatar-desc {
	height: 42px;
	margin-left: 60px;
	padding-top: 8px;
	font-size: 12px;
}

.sidebar-avatar-edit a {
	font-size: 12px;
	color: #4b4d5f;
	font-weight: 400;
}

.page-header,
.page-header-1 {
	padding: 20px;
	font-size: var(--font-second-title);
	text-transform: uppercase;
	color: #fff;
	min-height: 15px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#mobile-header {
	border-bottom: 1px solid #ffffff10;
}

.left-panel .page-header,
.left-panel .page-header-1 {
	white-space: normal;
	border-bottom: none;
	width: 100%;
}

.page-header a,
.page-header-1 a {
	color: #fff;
}

.message-form-private {
	float: right;
}

.selected-files {
	border-bottom: 1px solid #f1f1f1;
	padding: 5px 10px;
	display: none;
	color: #a9a9a9;
}

.support-thread .support-message-editor .comment-edit-textarea,
textarea {
	width: 100%;
	height: 100px;
	box-sizing: border-box;
}

.logo-bg {
	height: 65px;
	width: 200px;
	float: left;
}

.info {
	border: 1px solid #38A8FF;
	background: #BEDBFF;
	border-radius: 3px;
	color: #2A4E9B;
	width: 91%;
	padding: 5px 7px;
}

/* ==========================================================================
   END HEADER / TOPBAR / MENUS
   ========================================================================== */

/* ==========================================================================
   START ERROR PAGE
   ========================================================================== */

.wrap {
	margin: 0 auto;
	width: 600px;
}

.wrap .logo h1 {
	margin-top: 65px;
	font-size: 300px;
	color: #fff;
	margin-bottom: 0px;
	text-align: center;
}

.wrap .logo p {
	color: #fff;
	font-size: 30px;
	margin: 0px;
	margin-bottom: 80px;
	text-align: center;
}

.wrap .logo p span {
	color: lightgreen;
}

.wrap p a {
	color: white;
	background: linear-gradient(135deg, var(--main-color) 0%, var(--second-color) 100%);
	text-decoration: none;
	padding: 10px 40px;
	font-size: 20px;
	font-family: arial, serif;
	font-weight: bold;
	border-radius: 30px;
	border: 2px solid var(--main-color);
	transition: all .2s ease-in-out;
}

.wrap p a:hover {
	color: #fff;
	transform: scale(1.1);
	box-shadow: 0 0 0 2em var(--main-color) inset;
	transition: all .2s ease-in-out;
}

/* ==========================================================================
   END ERROR PAGE
   ========================================================================== */

.page-settings-container {
	padding: 0 0 80px;
}

.page-container {
	padding: 0;
}

.page-content-history {
	position: relative;
	min-height: 250px;
}

.page-content-history .divider {
	display: block;
}

.page-inner,
.page-inner-login {
	padding: 10px 20px;
}

.page-inner-admin {
	padding: 20px 0;
	overflow: auto;
}

.row-body-full .page-inner,
.row-body-admin .page-inner {
	padding: 0px;
	display: flow-root;
}

.page-input-container,
.page-input-container-1 {
	width: 100%;
}

.page-module-container {
	width: 25%;
	position: relative;
	display: block;
	float: left;
}

.page-module-container-25 {
	width: 25%;
	position: relative;
	display: block;
	float: left;
}

.page-module-container-33 {
	width: 33.3%;
	position: relative;
	display: block;
	float: left;
}

.page-module-container-50 {
	width: 50%;
	position: relative;
	display: block;
	float: left;
}

.page-module-container-100 {
	width: 100%;
	position: relative;
	display: block;
	float: left;
}

.page-module {
	border-radius: var(--radius-main);
	background: var(--foregroud-color-2);
	padding: 15px 10px;
	margin: 10px;
	min-height: 170px;
}

.page-module-bg {
	background: linear-gradient(135deg, var(--main-color-transp) 0%, var(--second-color-transp) 100%), url("../images/2fa.webp") no-repeat center;
	text-align: center;
	background-size: cover;
}

.page-module-bg-2fa {
	background: linear-gradient(135deg, #5b2416a1 0%, #151618c7 100%), url("../images/2fa.webp") no-repeat center;
	text-align: center;
	background-size: cover;
}

.page-module-bg-2fa input {
	text-align: center;
	font-size: var(--font-body);
}

.page-module-100 {
	border-radius: var(--radius-main);
	background: var(--foregroud-color-2);
	padding: 15px 10px;
	margin: 10px 0px;
	display: flex;
}

.page-module-paypal,
.page-module-company {
	border-radius: 25px;
	background: var(--main-color);
	padding: 5px 15px;
	display: inline-block;
	width: 100%;
	box-sizing: border-box;
	position: relative;
}

.module-first {
	margin: 10px 10px 10px 0px;
}

.module-middle {
	margin: 10px 10px 10px 10px;
}

.module-last {
	margin: 10px 0px 10px 10px;
}

.module-full {
	margin: 10px 0px;
}

.page-input-container input[type="text"],
.page-input-container input[type="number"],
.page-input-container input[type="password"],
.page-input-container input[type="email"],
.page-input-container input[type="url"],
.page-input-container input[type="tel"],
.page-input-container textarea,
.page-input-content input[type="text"],
.page-input-content input[type="number"],
.page-input-content input[type="password"],
.page-input-content input[type="email"],
.page-input-content input[type="url"],
.page-input-content input[type="tel"],
.page-module-container input[type="text"],
.page-module-container input[type="number"],
.page-module-container input[type="password"],
.page-module-container input[type="email"],
.page-module-container input[type="url"],
.page-module-container input[type="tel"],
.page-module-container textarea,
.page-module-content input[type="text"],
.page-module-content input[type="number"],
.page-module-content input[type="password"],
.page-module-content input[type="email"],
.page-module-content input[type="url"],
.page-module-content input[type="tel"],
.page-module-container-25 input[type="text"],
.page-module-container-25 input[type="number"],
.page-module-container-25 input[type="password"],
.page-module-container-25 input[type="email"],
.page-module-container-25 input[type="url"],
.page-module-container-25 input[type="tel"],
.page-module-container-25 textarea,
.page-module-content-25 input[type="text"],
.page-module-content-25 input[type="number"],
.page-module-content-25 input[type="password"],
.page-module-content-25 input[type="email"],
.page-module-content-25 input[type="url"],
.page-module-content-25 input[type="tel"],
.page-module-container-33 input[type="text"],
.page-module-container-33 input[type="number"],
.page-module-container-33 input[type="password"],
.page-module-container-33 input[type="email"],
.page-module-container-33 input[type="url"],
.page-module-container-33 input[type="tel"],
.page-module-container-33 textarea,
.page-module-content-33 input[type="text"],
.page-module-content-33 input[type="number"],
.page-module-content-33 input[type="password"],
.page-module-content-33 input[type="email"],
.page-module-content-33 input[type="url"],
.page-module-content-33 input[type="tel"],
.page-module-container-50 input[type="text"],
.page-module-container-50 input[type="number"],
.page-module-container-50 input[type="password"],
.page-module-container-50 input[type="email"],
.page-module-container-50 input[type="url"],
.page-module-container-50 input[type="tel"],
.page-module-container-50 textarea,
.page-module-content-50 input[type="text"],
.page-module-content-50 input[type="number"],
.page-module-content-50 input[type="password"],
.page-module-content-50 input[type="email"],
.page-module-content-50 input[type="url"],
.page-module-content-50 input[type="tel"],
.page-module-container-100 input[type="text"],
.page-module-container-100 input[type="number"],
.page-module-container-100 input[type="password"],
.page-module-container-100 input[type="email"],
.page-module-container-100 input[type="url"],
.page-module-container-100 input[type="tel"],
.page-module-container-100 textarea,
.page-module-content-100 input[type="text"],
.page-module-content-100 input[type="number"],
.page-module-content-100 input[type="password"],
.page-module-content-100 input[type="email"],
.page-module-content-100 input[type="url"],
.page-module-content-100 input[type="url"],
input.group-input,
.report-content textarea,
.support-thread .support-message-editor .comment-edit-textarea {
	padding: 15px 15px;
	border-radius: var(--border-radius-small);
	background: #ffffff05;
	border: 1px solid #ffffff08;
	color: #fff;
	outline: none;
	margin: 0;
}

.page-input-container input[type="text"]:hover,
.page-input-container input[type="number"]:hover,
.page-input-container input[type="password"]:hover,
.page-input-container input[type="email"]:hover,
.page-input-container input[type="url"]:hover,
.page-input-container input[type="tel"]:hover,
.page-input-container textarea:hover,
.page-input-content input[type="text"]:hover,
.page-input-content input[type="number"]:hover,
.page-input-content input[type="password"]:hover,
.page-input-content input[type="email"]:hover,
.page-input-content input[type="url"]:hover,
.page-input-content input[type="tel"]:hover,
.page-module-container input[type="text"]:hover,
.page-module-container input[type="number"]:hover,
.page-module-container input[type="password"]:hover,
.page-module-container input[type="email"]:hover,
.page-module-container input[type="url"]:hover,
.page-module-container input[type="tel"]:hover,
.page-module-container textarea:hover,
.page-module-content input[type="text"]:hover,
.page-module-content input[type="number"]:hover,
.page-module-content input[type="password"]:hover,
.page-module-content input[type="email"]:hover,
.page-module-content input[type="url"]:hover,
.page-module-content input[type="tel"]:hover,
.page-module-container-25 input[type="text"]:hover,
.page-module-container-25 input[type="number"]:hover,
.page-module-container-25 input[type="password"]:hover,
.page-module-container-25 input[type="email"]:hover,
.page-module-container-25 input[type="url"]:hover,
.page-module-container-25 input[type="tel"]:hover,
.page-module-container-25 textarea:hover,
.page-module-content-25 input[type="text"]:hover,
.page-module-content-25 input[type="number"]:hover,
.page-module-content-25 input[type="password"]:hover,
.page-module-content-25 input[type="email"]:hover,
.page-module-content-25 input[type="url"]:hover,
.page-module-content-25 input[type="tel"]:hover,
.page-module-container-33 input[type="text"]:hover,
.page-module-container-33 input[type="number"]:hover,
.page-module-container-33 input[type="password"]:hover,
.page-module-container-33 input[type="email"]:hover,
.page-module-container-33 input[type="url"]:hover,
.page-module-container-33 input[type="tel"]:hover,
.page-module-container-33 textarea:hover,
.page-module-content-33 input[type="text"]:hover,
.page-module-content-33 input[type="number"]:hover,
.page-module-content-33 input[type="password"]:hover,
.page-module-content-33 input[type="email"]:hover,
.page-module-content-33 input[type="url"]:hover,
.page-module-content-33 input[type="tel"]:hover,
.page-module-container-50 input[type="text"]:hover,
.page-module-container-50 input[type="number"]:hover,
.page-module-container-50 input[type="password"]:hover,
.page-module-container-50 input[type="email"]:hover,
.page-module-container-50 input[type="url"]:hover,
.page-module-container-50 input[type="tel"]:hover,
.page-module-container-50 textarea:hover,
.page-module-content-50 input[type="text"]:hover,
.page-module-content-50 input[type="number"]:hover,
.page-module-content-50 input[type="password"]:hover,
.page-module-content-50 input[type="email"]:hover,
.page-module-content-50 input[type="url"]:hover,
.page-module-content-50 input[type="tel"]:hover,
.page-module-container-100 input[type="text"]:hover,
.page-module-container-100 input[type="number"]:hover,
.page-module-container-100 input[type="password"]:hover,
.page-module-container-100 input[type="email"]:hover,
.page-module-container-100 input[type="url"]:hover,
.page-module-container-100 input[type="tel"]:hover,
.page-module-container-100 textarea:hover,
.page-module-content-100 input[type="text"]:hover,
.page-module-content-100 input[type="number"]:hover,
.page-module-content-100 input[type="password"]:hover,
.page-module-content-100 input[type="email"]:hover,
.page-module-content-100 input[type="url"]:hover,
.page-module-content-100 input[type="url"]:hover,
input.group-input:hover,
.report-content textarea:hover,
.support-thread .support-message-editor .comment-edit-textarea:hover {
	border: 1px solid var(--main-color);
	transition: all .3s ease-in-out;
}

.page-settings-container select,
.page-module-container-100 select,
.page-module-container-50 select,
.page-module-container-33 select,
.page-module-container-25 select,
.page-module-container select,
.page-input-container select {
	padding: 0px 15px;
	border-radius: var(--border-radius-small);
	background: #1d1d20;
	border: 1px solid #ffffff08;
	color: #fff;
	outline: none;
	height: 45px;
	margin: 0;
}

.palette-color-group input,
.page-input-container-1 input {
	padding: 15px;
	border-radius: var(--border-radius-small);
	border: 1px solid #ffffff08;
	background: #ffffff05;
	color: #fff;
	outline: none;
	margin: 0;
	width: 100%;
	height: 45px;
	box-sizing: border-box;
	max-width: 100%;
}

.palette-color-cat input {
	outline: none;
	margin: 0;
	width: 40px;
	height: 40px;
	left: -8px;
	position: relative;
	border: none;
	-webkit-appearance: none;
	appearance: none;
	padding: 0;
}

.page-input-container-1 textarea {
	padding: 15px;
	border-radius: var(--border-radius-small);
	border: 1px solid #ffffff08;
	background: #ffffff05;
	color: #fff;
	outline: none;
	margin: 0;
	width: 100%;
	box-sizing: border-box;
	max-width: 100%;
}

.page-input-container-1 select, {
	padding: 13px 5px;
	border-radius: var(--border-radius-small);
	outline: none;
	position: relative;
	margin: 0;
}

.job-group .group-container input[type="color"],
.page-input-container-1 input[type="color"] {
	padding: 4px 4px 3px 3px;
	height: 45px;
}

.job-group .group-container input[type="checkbox"],
.page-input-container-1 input[type="checkbox"] {
	width: auto;
}

.page-input-container input[type="submit"] {
	color: #fff;
	font-size: 13px;
	background: #fff0;
	border: 1px solid #008fff;
	text-align: center;
	width: auto;
	padding: 6px 15px !important;
	text-decoration: none;
	border-radius: 4px;
	cursor: pointer;
	outline: none;
	font-weight: 700;
}

.page-input-container input[type="file"] {
	border-radius: var(--border-radius-small);
	padding: 5px;
}

.page-input-content {
	width: 100%;
	padding-left: 150px;
	margin: 5px 0;
	box-sizing: border-box;
}

.page-input-content-1 {
	width: 100%;
	margin: 5px 0;
	box-sizing: border-box;
}

.page-input-content-2 {
	width: 100%;
	padding-left: 190px;
	margin: 5px 0;
	box-sizing: border-box;
}

.page-input-content-3 {
	width: 100%;
	box-sizing: border-box;
	margin: 5px 0;
	text-align: center;
}

.page-input-content-4 {
	box-sizing: border-box;
	margin: 5px 0;
	text-align: right;
	position: absolute;
	right: 30px;
}

/* Newsletter contact picker */
.page-input-newsletter {
	width: 100%;
	margin-bottom: 10px;
	color: #ffffff;
	box-sizing: border-box;
}

.page-input-newsletter #newsletter_contact_search {
	width: 100%;
	max-width: none;
	min-width: 0;
	height: 46px;
	max-height: 46px;
	margin: 10px 0 0;
	padding: 0 15px;
	color: #ffffff;
	font-size: var(--font-size-main);
	font-weight: 400;
	background: var(--foregroud-color-2);
	border: 1px solid #ffffff0d;
	border-radius: calc(var(--radius-main) - 5px);
	box-sizing: border-box;
	box-shadow: none;
	transform: none;
	transition: background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out;
}

.page-input-newsletter #newsletter_contact_search:hover {
	border-color: #ffffff18;
	background: #ffffff08;
	transform: none;
}

.page-input-newsletter #newsletter_contact_search:focus {
	border-color: var(--main-color-transp);
	background: #ffffff08;
	box-shadow: 0 0 0 3px var(--main-color-transp-2);
	transform: none;
}

.page-input-left {
	padding-left: 0;
}

.page-input-content-preview {
	display: block;
	max-height: 650px;
	overflow-x: auto;
	padding-right: 5px;
	box-sizing: border-box;
	width: 50%;
	float: left;
	position: relative;
}

.page-input-title-left-preview {
	text-align: left;
	width: 50%;
	box-sizing: border-box;
	padding-top: 20px;
	padding-right: 10px;
	display: inline-block;
	vertical-align: top;
	float: left;
	color: #ffffff;
}

.page-input-title-left,
.page-input-title-left-img {
	text-align: left;
	width: 50%;
	margin-right: 10px;
	margin-top: 4px;
	display: inline-block;
	vertical-align: top;
	float: left;
	color: #ffffff;
}

.page-input-title,
.page-input-title-img {
	text-align: right;
	width: 140px;
	margin-right: 10px;
	margin-top: 4px;
	display: inline-block;
	vertical-align: top;
	float: left;
	color: #ffffff;
}

.page-input-title-center,
.page-input-title-center-img {
	text-align: center;
	margin-top: 4px;
	vertical-align: top;
	color: #ffffff;
}

.page-input-title-module,
.page-input-title-module-2fa {
	text-align: left;
	width: 100%;
	vertical-align: top;
	float: left;
	align-items: center;
	display: flex;
	gap: 5px;
	color: #ffffff;
	border-radius: var(--border-radius-small) 0 0 var(--border-radius-small);
	background: -moz-linear-gradient(-45deg, var(--main-color-transp-1) 0%, var(--main-color-transp-2) 40%, var(--main-color-transp-3) 80%);
	/* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, var(--main-color-transp-1) 0%, var(--main-color-transp-2) 40%, var(--main-color-transp-3) 80%);
	/* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, var(--main-color-transp-1) 0%, var(--main-color-transp-2) 40%, var(--main-color-transp-3) 80%);
	/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#33fe6137", endColorstr="#00fe6137",GradientType=1 );
	/* IE6-9 fallback on horizontal gradient */
	padding: 15px 10px;
	box-sizing: border-box;
}

.page-input-title-module {
	margin-bottom: 20px;
}

.page-input-title-img,
.page-input-title-left-img {
	margin-top: -6px !important;
}

.page-input-title-img img {
	border-radius: 50%;
	margin-top: 5px;
	object-fit: cover;
	background: #E1E5E6;
}

.page-input-sub {
	color: #5d6168;
	font-size: 12px;
	padding: 6px 0 0 0;
}

.page-input-sub-color {
	color: #ffffff !important;
}

.report-checkbox {
	border: 1px solid #ffffff08;
	border-radius: var(--border-radius-small);
	margin: 10px 0;
	position: relative;
	padding: 10px;
	transition: all 0.3s ease-out;
}

.report-checkbox textarea {
	min-height: 100px;
	color: #383b46;
}

.report-checkbox input {
	float: left;
	color: #383b46;
}

.report-checkbox:has(input[type="checkbox"]:checked) {
	border: 1px solid var(--main-color);
	transition: all 0.3s ease-out;
}

.report-checkbox:has(input[type="checkbox"]:checked) label {
	color: var(--main-color);
	transition: all 0.3s ease-out;
}

.report-checkbox label {
	padding-left: 5px;
}

.page-title {
	font-size: 18px;
	color: #383b46;
}

.img-bg-updater {
	width: auto;
	position: relative;
	margin: 20px;
	height: 200px;
	border-radius: var(--radius-main);
	overflow: hidden;
}

.hover-img-update {
	width: 100%;
	height: 200px;
	border-radius: var(--radius-main);
	position: absolute;
	background: linear-gradient(135deg, var(--main-color-transp) 0%, var(--second-color-transp) 100%);
	z-index: 1;
	transition: opacity 0.5s ease-in-out;
	opacity: 0;
	cursor: pointer;
}

.img-bg-updater:hover .hover-img-update {
	width: 100%;
	height: 200px;
	border-radius: var(--radius-main);
	position: absolute;
	background: url("../images/media.png") center center no-repeat, linear-gradient(135deg, var(--main-color-transp) 0%, var(--second-color-transp) 100%);
	z-index: 3;
	transition: opacity 0.5s ease-in-out;
	opacity: 1;
}

.img-bg-updater #outputimage1 {
	object-fit: cover;
	top: -20px;
	left: -20px;
	width: 105%;
	height: 120%;
	position: relative;
	background-position: center center;
	-webkit-filter: blur(10px);
	-moz-filter: blur(10px);
	-o-filter: blur(10px);
	-ms-filter: blur(10px);
	filter: blur(10px);
}

.img-update {
	width: 100%;
	position: absolute;
	top: 25px;
	z-index: 1;
}

.img-update #outputimage {
	position: relative;
	margin: 0 auto;
	border-radius: 50%;
	box-shadow: 0 5px 40px #000;
	background: linear-gradient(135deg, var(--main-color) 0%, var(--second-color) 100%);
	display: block;
}

.stats-boxes-container {
	overflow: auto;
	width: 100%;
	padding-bottom: 10px;
	background: #ffffff05;
	border-radius: var(--border-radius-small);
	padding-top: 20px;
}

.container-short {
	overflow: auto;
}

.container {
	padding: 15px 0;
	overflow: auto;
	width: 100%;
	float: left;
}

.chart-container {
	padding-left: 15px;
}

.chart img {
	width: 100%;
}

.preloader {
	padding: 10px 0;
	width: 36px;
	height: 36px;
	margin: 0 auto;
}

.preloader-normal {
	width: 110px;
	height: 10px;
}

.preloader-dark {
	width: 110px;
	height: 10px;
	background: url("../images/preloader_dark.webp");
}

.preloader-retina {
	width: 85px;
	height: 8px;
	background: url("../images/preloader_white.webp");
	background-size: 85px 8px;
}

.preloader-retina-large {
	width: 110px;
	height: 10px;
	background: url("../images/preloader_white.webp");
	background-size: 110px 10px;
}

.preloader-center {
	margin: 0 auto;
}

.preloader-left {
	display: inline-block;
}

.retrieving-results {
	display: inline;
}

.pages-content {
	padding: 20px;
}

.text-inputs {
	padding: 3px 0;
}

.ads1 {
	margin-top: 10px;
	width: 100%;
	height: auto;
	float: left;
}

.info-message {
	width: 100%;
	text-align: center;
	padding: 20px 0;
	font-size: 16px;
}

.error {
	padding: 5px;
	border: 1px solid #c00;
	background: #ffc0cf;
	color: #b40a34;
	border-radius: 3px;
	margin: 0 0 10px;
}

.theme-content {
	color: #5d6168;
	width: 100%;
	float: left;
}

.theme-inner {
	padding: 10px 0;
}

.theme-icon {
	width: 60px;
	float: left;
	overflow: auto;
}

.theme-icon img {
	border-radius: 3px;
	width: 60px;
}

.theme-top {
	padding: 5px 0 5px 70px;
}

/* ==========================================================================
   START PASSWORD STRENGTH
   ========================================================================== */

.forgot-password {
	padding-top: 4px;
	float: right;
	font-size: 12px;
}

.forgot-password a:hover {
	color: #4b4d5f;
}

#password-force {
	position: relative;
	width: 100%;
	height: 8px;
	float: left;
	margin: 10px 0;
	background: var(--foregroud-color-2);
	border-radius: var(--border-radius-small);
	overflow: hidden;
}

/* La barre de remplissage */

#password-force::after {
	content: "";
	display: block;
	height: 100%;
	transition: width 0.3s ease, background 0.3s ease;
}

/* Niveau 0 */

.is0::after {
	width: 0%;
	background: red;
}

/* Niveau 10 */

.is10::after {
	width: 10%;
	background: red;
}

/* Niveau 20 */

.is20::after {
	width: 20%;
	background: orangered;
}

/* Niveau 30 */

.is30::after {
	width: 30%;
	background: orange;
}

/* Niveau 40 */

.is40::after {
	width: 40%;
	background: gold;
}

/* Niveau 50 */

.is50::after {
	width: 50%;
	background: yellowgreen;
}

/* Niveau 60 */

.is60::after {
	width: 60%;
	background: #66cc66;
}

/* Niveau 70 */

.is70::after {
	width: 70%;
	background: #4caf50;
}

/* Niveau 80 */

.is80::after {
	width: 80%;
	background: #43a047;
}

/* Niveau 90 */

.is90::after {
	width: 90%;
	background: #388e3c;
}

/* Niveau 100 */

.is100::after {
	width: 100%;
	background: #2e7d32;
}

/* ==========================================================================
   END PASSWORD STRENGTH
   ========================================================================== */

/* ==========================================================================
   START PASSWORD TOGGLE INPUT
   ========================================================================== */

#connect .password-wrapper {
	max-width: 100%;
}

.password-wrapper {
	position: relative;
	display: inline;
	max-width: 300px;
}

.password-input {
	width: 100%;
	padding: 15px 44px 15px 15px !important;
	box-sizing: border-box;
}

.password-input-edit {
	padding: 15px 44px 15px 15px !important;
	box-sizing: border-box;
}

.toggle-password {
	position: absolute;
	right: 12px;
	transform: translateY(10px);
	width: 25px;
	height: 25px;
	cursor: pointer;
}

/* Classes pour les icônes (à adapter avec tes images ou sprites) */

.eye-open {
	background: url("../images/icons/eye-open.webp") no-repeat center center;
	background-size: contain;
	transition: all .2s ease-in-out;
}

.eye-open:hover,
.eye-closed:hover {
	filter: brightness(2);
}

.eye-closed {
	background: url("../images/icons/eye-close.webp") no-repeat center;
	background-size: contain;
	transition: all .2s ease-in-out;
}

/* ==========================================================================
   END PASSWORD TOGGLE INPUT
   ========================================================================== */

.welcome-arrow {
	padding: 0 0 20px;
	background: url("../images/downarrow_large.png") center bottom no-repeat;
	background-size: 25px;
	width: 25px;
	margin: 0 auto;
	cursor: pointer;
}

#captcha-register {
	position: relative;
}

.register-captcha img {
	border-radius: 3px;
	float: right;
	border: 1px solid #f1f1f1;
}

.start-go-pro-title,
.start-app-title {
	color: #fff;
	text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
	font-size: var(--font-main-title);
	font-weight: 700;
}

.start-go-pro-desc,
.start-app-desc {
	color: #fff;
	font-size: var(--font-size-main);
	font-weight: lighter;
	margin-bottom: 20px;
}

.welcome-pro-landing {
	padding: 40px 0;
	background: linear-gradient(135deg, var(--main-color-transp) 0%, var(--second-color-transp) 100%), url("../images/welcome/pro-coupon.webp") no-repeat center;
	text-align: center;
	background-size: cover;
	flex: 1;
	border-radius: var(--radius-main);
}

.welcome-pro-landing-1 {
	padding: 40px 0;
	background: linear-gradient(135deg, var(--main-color-transp) 0%, var(--second-color-transp) 100%), url("../images/welcome/pro-coupon-1.webp") no-repeat center;
	text-align: center;
	background-size: cover;
	border-radius: var(--radius-main);
	margin: 20px 20px 0 20px;
}

.welcome-license-landing {
	padding: 20px 0;
	background: linear-gradient(135deg, var(--main-color-transp) 0%, var(--second-color-transp) 100%), url("../images/license.webp") no-repeat center;
	align-items: center;
	display: inline-grid;
	justify-items: center;
	background-size: cover;
	flex: 0 0 400px;
	border-radius: var(--radius-main);
}

.welcome-license-landing input[type="text"]:disabled {
	opacity: 0.5;
}

.welcome-app-landing {
	padding: 120px 0;
	background: linear-gradient(135deg, var(--main-color-transp) 0%, var(--second-color-transp) 100%), url("../images/api.webp") no-repeat center bottom;
	text-align: center;
	background-size: cover;
	flex: 1;
	border-radius: var(--radius-main);
}

.welcome-box-section {
	color: #FFF;
	font-size: var(--font-main-title);
}

.welcome-centered-text {
	text-align: center;
}

.welcome-full-section {
	color: #fff;
	background: linear-gradient(to right, var(--foregroud-color-2) 25%, rgba(71, 110, 140, 0) 70%, rgba(0, 0, 0, 0) 100%);
	font-size: 20px;
	margin: 0 20px;
	padding: 15px;
	border-radius: var(--border-radius-small);
	text-transform: uppercase;
	top: 0;
	position: relative;
}

.notification-box {
	padding: 15px 10px;
	border: 0 solid;
	position: relative;
	margin: 20px 20px 0 20px;
	color: #fff;
	border-radius: 10px;
}

.manage-cont8 .notification-box {
	margin: 0;
	width: 100%;
	position: absolute;
	z-index: 1;
}

.welcome-license-landing .notification-box {
	margin: 0 20px;
	width: -webkit-fill-available;
}

.message-reply-container .notification-box {
	margin: 10px 0 0;
}

.notification-box a {
	color: #FFF;
}

.notification-box a:hover {
	color: #F6F6F6;
}

.notification-box-modal {
	margin: 10px 20px 0;
}

.notification-box h5 {
	font-size: 20px;
	margin: 0;
}

.notification-box-error {
	background: #FF5757;
}

.notification-box-success {
	background: #13964A;
}

.notification-box-info {
	background: #3498db;
}

.notification-box>p {
	padding-right: 20px;
	margin: 0;
}

.notification-close {
	position: absolute;
	right: 10px;
	top: 15px;
	background: url("../images/icons/close_b.png") no-repeat center left;
	background-size: 17px;
	width: 17px;
	height: 17px;
	cursor: pointer;
	opacity: .75;
}

.notification-close:hover {
	opacity: 1;
}

.notification-container {
	opacity: 0;
	transform: scale(0.95) translateY(-10px);
	transition: opacity 0.35s ease, transform 0.35s ease;
	display: none;
	position: absolute;
	top: 60px;
	right: 20px;
	z-index: 9999;
}

.notification-container.show {
	display: block;
	opacity: 1;
	transform: scale(1) translateY(0);
}

.notification-content {
	background: #fff;
	border-radius: var(--radius-main);
	max-width: 380px;
	width: -webkit-fill-available;
	float: right;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.40);
}

.notification-content a {
	color: #484a50;
	text-decoration: none;
}

.notification-content .sidebar-header-extra-notif {
	display: none;
}

.notification-inner {
	padding: 15px 10px;
}

.notification-container .sidebar-header-extra {
	display: none;
}

.notification-container .notification-row {
	float: left;
	width: 100%;
	border-top: 1px solid #e9ebef;
	border-right: 0;
}

.notification-row {
	float: left;
	width: 100%;
	border-top: 1px solid #ffffff10;
}

.notification-image {
	float: left;
}

.notification-text {
	width: 100%;
	box-sizing: border-box;
}

.notification-text img {
	vertical-align: bottom;
	width: 15px;
	height: 15px;
	top: -2px;
	position: relative;
}

.notification-container .notification-unread {
	background: #111;
}

.notification-unread {
	background: #50505050;
}

.notification-container .notification-padding:hover {
	background: #e9ebef;
	transition: all .15s ease-in-out;
}

.notification-padding {
	padding: 15px;
	transition: all .15s ease-in-out;
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
}

.notification-padding-1 {
	text-align: center;
	padding: 10px;
	margin: 20px;
	transition: all .15s ease-in-out;
}

.notification-padding-end {
	overflow: auto;
	margin: 10px;
}

.notification-padding-end-1 {
	overflow: auto;
	margin: 10px;
	padding: 10px;
}

.notification-padding:hover {
	background: -moz-linear-gradient(45deg, var(--main-color-transp-1) 0%, var(--main-color-transp-2) 40%, var(--main-color-transp-3) 80%);
	background: -webkit-linear-gradient(45deg, var(--main-color-transp-1) 0%, var(--main-color-transp-2) 40%, var(--main-color-transp-3) 80%);
	background: linear-gradient(445deg, var(--main-color-transp-1) 0%, var(--main-color-transp-2) 40%, var(--main-color-transp-3) 80%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#33fe6137", endColorstr="#00fe6137",GradientType=1 );
	transition: all .15s ease-in-out;
}

#notifications-content .timeago {
	float: none;
	color: #939aaa;
}

#notifications-content .timeago:hover {
	text-decoration: none;
	color: #5d6168;
	cursor: default;
}

.notification-container #notifications-content {
	position: relative;
}

.notification-container #notifications-content::before,
.notification-container #notifications-content::after {
	content: "";
	position: fixed;
	left: 0;
	width: 100%;
	height: 20px;
	pointer-events: none;
	z-index: 2;
}

.notification-container #notifications-content::before {
	top: 50px;
	box-shadow: 0 30px 30px -30px #00000030 inset;
}

.notification-container #notifications-content::after {
	bottom: 40px;
	box-shadow: 0 -30px 30px -30px #00000030 inset;
}

#notifications-content {
	max-height: 350px;
	overflow: auto;
}

#notifications-page .timeago {
	float: none;
	margin-top: 3px;
}

#notifications-page .timeago:hover {
	text-decoration: none;
}

#notifications-page img.notifications,
#notifications-content img.notifications {
	height: 45px;
	width: 45px;
	border-radius: 50%;
	display: flex;
	background: var(--main-color);
}

.dropdown-smiles .smiles-container {
    width: fit-content;
    height: auto;
    background: var(--foregroud-color-1);
    position: absolute;
    display: flex;
    flex-direction: column;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .2);
    pointer-events: none;
    z-index: 1;
    border-radius: var(--border-radius-small);
    text-align: left;
    right: 0;
    align-self: baseline;
    visibility: hidden;
    opacity: 0;
    transform: scale(0.9) translateY(-10px);
    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s;
}

.dropdown-smiles .smiles-container img {
	width: 25px;
	height: 25px;
}

.comment-btn .dropdown-smiles .smiles-container,
.comment-edit-btn .dropdown-smiles .smiles-container {
	width: 185px;
	height: 135px;
	border-radius: var(--radius-main);
	background: var(--foregroud-color-1);
	position: absolute;
	padding: 10px;
	box-shadow: 0 3px 15px rgba(0, 0, 0, .4);
	pointer-events: all;
	top: 16px;
	z-index: 4;
	right: 0;    
	opacity: 0;
    transform: scale(0.95) translateY(0);
    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s;
}

.comment-btn .dropdown-smiles .smiles-container .smiles-scroll,
.comment-edit-btn .dropdown-smiles .smiles-container .smiles-scroll {
	overflow: auto;
	height: 100%;
}

.comment-btn .dropdown-smiles .smiles-container a,
.comment-edit-btn .dropdown-smiles .smiles-container a {
	padding: 0;
	position: relative;
	background: none;
	float: left;
	cursor: pointer;
}

.dropdown-smiles .smiles-container a {
	padding: 10px !important;
	margin: 0;
	height: 25px;
	transition: all 0.2s ease-in-out;
}

.dropdown-smiles .smiles-container a:hover {
	background: var(--main-color-transp);
	transition: all 0.2s ease-in-out;
}

.dropdown-smiles:hover .smiles-container {
    visibility: visible;
    opacity: 1;
    pointer-events: all;
    transform: scale(1) translateY(0);
    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s;
}

.dropdown-smiles .smiles-overflow {
	display: block;
}

.comment-btn .dropdown-smiles {
	position: relative;
}

.comment-edit-btn .dropdown-smiles {
	position: relative;
}

.comment-btn .c-w-icon,
.comment-edit-btn .c-w-icon {
	padding: 0;
}

.dropdown-smiles .c-w-icon {
	background: url("../images/icons/emoticons/icon.png") no-repeat;
	background-size: 16px 16px;
	width: 16px;
	height: 16px;
	float: right;
	margin: 0px 8px 0 0;
	cursor: pointer;
	z-index: 1;
}

.dropdown-smiles .c-w-icon:hover {
	background: url("../images/icons/emoticons/icon-hover.png") no-repeat;
	background-size: 16px 16px;
}

.sidebar-button-container {
	width: 100%;
	margin-top: 10px;
}

.sidebar-button-container a {
	text-decoration: none;
}

.no-files {
	text-align: center;
}

/* ==========================================================================
   START GALLERY
   ========================================================================== */

/* container */
.gallery-container {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}

/* item = plus de width ici */
.gallery-container > .item-download {
	box-sizing: border-box;
}

/* frame */
.gallery-frame {
	width: 100%;
	border-radius: 10px;
}

/* image */
.gallery-frame .frame-thumb {
	width: 100%;
	aspect-ratio: 16/9;
	overflow: hidden;
	border-radius: 10px;
	background: #000;
	display: flex;
	align-items: center;
}

.gallery-frame .frame-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 10px;
	transition: transform 0.3s ease-in-out;
}

.gallery-frame:hover img {
	transform: scale(1.08);
}

/* bottom */
.gallery-frame .frame-col {
	width: 100%;
	float: none;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	padding: 8px 8px;
	color: #fff;
	text-align: left;
}

/* checkbox */
.gallery-frame .frame-col input[type="checkbox"] {
	flex-shrink: 0;
	cursor: pointer;
}

/* label */
.gallery-frame .frame-col label {
	font-size: 13px;
	white-space: nowrap;
	cursor: pointer;
	opacity: 0.9;
}

/* overlay */
#galleryViewer {
	position: fixed;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 99999;
	transition: all 0.3s ease-in-out;
}

/* active state */
#galleryViewer.active {
	background: var(--foregroud-color-1-transp);
	backdrop-filter: blur(5px);
}

/* image */
#galleryViewer img {
	max-width: 90%;
	max-height: 85%;
	border-radius: var(--border-radius);
	transform: scale(0.85);
	opacity: 0;
	transition: all 0.3s ease-in-out;
}

/* image visible */
#galleryViewer.show img {
	transform: scale(1);
	opacity: 1;
}

/* transition when switching image */
#galleryViewer img.fade {
	opacity: 0;
	transform: scale(0.96);
}

.viewer-loader {
	position: absolute;
	width: 48px;
	height: 48px;
	border: 4px solid rgba(255, 255, 255, 0.25);
	border-top-color: #fff;
	border-radius: 50%;
	animation: viewerSpin 0.8s linear infinite;
	z-index: 5;
	display: none;
}

@keyframes viewerSpin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

.thumb-loader {
	position: absolute;
	left: calc(50% - 14px);
	width: 28px;
	height: 28px;
	border: 3px solid rgba(255, 255, 255, 0.35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: viewerSpin 0.8s linear infinite;
	z-index: 3;
	pointer-events: none;
	display: none;
}

.frame-thumb.thumb-loading .thumb-loader {
	display: block;
}

.frame-thumb.thumb-loading img {
	opacity: 0.45;
}

.frame-thumb.thumb-loaded img {
	opacity: 1;
}

/* close button */
.viewer-close {
	position: absolute;
	top: 20px;
	right: 25px;
	font-size: 32px;
	color: white;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}

.viewer-close:hover {
	transform: rotate(90deg) scale(1.2);
	opacity: 0.8;
}

/* arrows */
.viewer-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-size: 44px;
	color: white;
	cursor: pointer;
	padding: 12px;
	opacity: 0.5;
	transition: all 0.3s ease-in-out;
}

.viewer-arrow:hover {
	opacity: 1;
	transform: translateY(-50%) scale(1.15);
}

/* left / right */
.viewer-prev {
	left: 20px;
}

.viewer-next {
	right: 20px;
}

/* mobile */
@media (max-width: 768px) {
	#galleryViewer img {
		max-width: 95%;
		max-height: 75%;
	}

	.viewer-arrow {
		font-size: 32px;
		padding: 8px;
	}

	.viewer-close {
		font-size: 26px;
		top: 15px;
		right: 15px;
	}
}
/* ==========================================================================
   END GALLERY
   ========================================================================== */

.item-download {
	position: relative;
	width: 100%;
	padding: 12px 10px;
	border: 1px solid #ffffff10;
	border-radius: var(--border-radius-small);
	margin: 3px 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #fff;
	line-height: 20px;
	box-sizing: border-box;
	transition: all .3s ease-in-out;
	display: flex;
	align-items: center;
}

.item-download input[type="checkbox"] {
	position: relative;
}

.item-download label {
	color: #ffffff;
	position: relative;
	padding-left: 5px;
}

.item-download:hover {
	border: 1px solid var(--main-color-transp);
	background: -moz-linear-gradient(45deg, var(--main-color-transp-1) 0%, var(--main-color-transp-2) 40%, var(--main-color-transp-3) 80%);
	/* FF3.6-15 */
	background: -webkit-linear-gradient(45deg, var(--main-color-transp-1) 0%, var(--main-color-transp-2) 40%, var(--main-color-transp-3) 80%);
	/* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(45deg, var(--main-color-transp-1) 0%, var(--main-color-transp-2) 40%, var(--main-color-transp-3) 80%);
	/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#33fe6137", endColorstr="#00fe6137",GradientType=1 );
	/* IE6-9 fallback on horizontal gradient */
	color: #fff;
	transition: all .3s ease-in-out;
}

.item-download-title {
	margin: 0 0 10px 0;
	width: 100%;
	box-sizing: border-box;
	position: relative;
	float: left;
}

.dwlink {
	height: 0;
	position: relative;
	float: left;
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	transition: all .3s ease-in-out;
}

.link-downloader {
	max-height: 145px;
	padding-right: 10px;
	overflow-y: auto;
	overflow-x: hidden;
}

.openned {
	height: 250px !important;
	transition: all .3s ease-in-out !important;
}

.back-button {
	margin: 10px;
	border: 2px solid #008fff;
	background: rgba(48, 147, 231, 0.8);
	height: 50px;
	font-weight: bolder;
	border-radius: 5px;
	text-align: center;
	line-height: 48px;
	color: #fff;
	cursor: pointer;
	font-size: var(--font-size-main);
}

.back-icon {
	background: url("../images/icons/back_n.png") no-repeat;
	background-size: 20px;
	width: 32px;
	padding: 0 15px 10px 5px;
	margin-left: -10px;
}

.back-button:hover {
	background: #008fff;
	border-color: #008fff;
	color: #FFF;
	transition: all .3s cubic-bezier(.25, .8, .25, 1);
}

.back-button:hover .back-icon {
	background: url("../images/icons/back_n.png") no-repeat;
	background-size: 20px;
	width: 32px;
	padding: 0 15px 10px 5px;
	margin-left: -10px;
	transition: all .3s cubic-bezier(.25, .8, .25, 1);
}

.upload-button {
	margin: 10px;
	border: 2px solid #008fff;
	background: rgba(48, 147, 231, 0.6);
	height: 50px;
	border-radius: 5px;
	text-align: center;
	line-height: 48px;
	color: #FFF;
	font-weight: bolder;
	cursor: pointer;
	font-size: var(--font-size-main);
}

.upload-button:hover {
	border-color: #008fff;
	background: #008fff;
	transition: all .3s cubic-bezier(.25, .8, .25, 1);
}

.upload-icon {
	background: url("../images/icons/upload_h.png") no-repeat;
	background-size: 22px;
	width: 32px;
	padding: 0 20px 10px 5px;
	margin-left: -10px;
}

.upload-button:hover .upload-icon {
	background: url("../images/icons/upload_h.png") no-repeat;
	background-size: 22px;
	width: 32px;
	padding: 0 20px 10px 5px;
	margin-left: -10px;
	transition: all .3s cubic-bezier(.25, .8, .25, 1);
}

.sidebar-fa-image {
	float: left;
}

.sidebar-fa-image img {
	width: 33px;
	height: 33px;
	border-radius: 50%;
	background: #23232d;
}

.share-fa-text {
	font-size: 12px;
	padding-left: 40px;
	white-space: nowrap;
	word-wrap: break-word;
	text-overflow: ellipsis;
	color: #959aac;
}

.sidebar-fa-text {
	font-size: 12px;
	padding-left: 7px;
	white-space: nowrap;
	word-wrap: break-word;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sidebar-fa-text .timeago {
	float: none;
	display: block;
}

.sidebar-fa-content {
	max-height: 336px;
	margin: 10px 0;
	overflow: auto;
}

.sidebar-fa-content a {
	color: #5d6168;
}

.sidebar-fa-content .notification-row {
	border: 0;
}

.sidebar-fa-content .notification-padding {
	padding: 7px 10px 4px;
	margin: 5px 0;
}

.input_hidden {
	position: absolute;
	left: -9999px;
}

.selected {
	background-color: #DFDFDF;
}

#values {
	float: left;
}

#values label {
	display: inline-block;
	cursor: pointer;
}

#values label:hover {
	background-color: #efefef;
}

#values label img {
	padding: 7px 5px 6px;
	width: 24px;
	height: 24px;
}

.button-image {
	width: 34px;
	height: 40px;
	background-image: url("../images/icons/events/camera.png");
	background-repeat: no-repeat;
	background-position: 50% 35%;
	overflow: hidden;
	float: left;
	cursor: pointer;
	margin-right: 4px;
	background-size: 24px;
}

.button-image:hover {
	background-color: #efefef;
}

.inputImage {
	opacity: 0;
	height: 40px;
	cursor: pointer;
	width: 33px;
}

#notifications_btn {
	cursor: pointer;
	position: relative;
	width: 16px;
}

.notificatons-number-container {
	float: left;
	margin-right: 5px;
}

.admin-notifications-number {
	background: #be2b2b;
	padding: 2px 4px 2px 4px;
	min-width: 10px;
	border-radius: var(--radius-main);
	color: #FFF;
	font-size: 10px;
	line-height: 15px;
	text-align: center;
	position: relative;
}

.slinky-menu .admin-notifications-number {
	right: 20px;
}

.admin-notifications-number1 {
	background: #be2b2b;
	padding: 2px 4px 2px 4px;
	min-width: 10px;
	border-radius: var(--radius-main);
	font-weight: 400;
	color: #FFF;
	font-size: 10px;
	text-align: center;
}

.notifications-number {
	background: #be2b2b;
	border-radius: 50%;
	padding: 2px 3px;
	font-size: 10px;
	position: absolute;
	margin: -27px 0 0 9px;
	color: #fff;
	text-align: center;
	min-width: 8px;
	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}

#more_users,
#more_reports,
#more_payments {
	width: 100%;
	float: left;
	padding: 15px 0 5px;
	left: 0;
}

#share,
#delete,
#block-ip,
#team,
#member,
#invit,
#resume,
#categorieuser,
#connect {
	position: fixed;
	z-index: 1002;
	width: 100vw;
	height: 100vh;
	top: 0px;
	display: none;
}

#share input[type="text"],
#share input[type="password"],
#delete input[type="text"],
#delete input[type="password"],
#categorieuser input[type="text"],
#team input[type="text"],
#invit input[type="text"],
#invit select,
#connect input[type="text"],
#connect input[type="password"] {
	max-width: 100%;
}

#share .divider,
#delete .divider,
#block-ip .divider,
#resume .divider,
#categorieuser .divider,
#team .divider,
#member .divider,
#invit .divider,
#connect .divider {
	margin: 0;
}

#admin-connect {
	position: fixed;
	z-index: 1002;
	width: 100%;
	height: 100%;
	top: 0px;
}

#welcome-tour {
	position: fixed;
	z-index: 1002;
	width: 100%;
	height: 100%;
	top: 0px;
	display: none;
}

#newsletter {
	position: absolute;
	z-index: 1002;
	top: 50%;
	left: -200px;
	margin-top: -76px;
	margin-left: 50%;
	color: #ffffff;
	display: none;
}

#groups {
	height: 140px;
	margin: 0 20px;
	display: flex;
	overflow: auto;
	padding: 0;
	width: inherit;
}

.twofa-input {
	position: relative;
	text-align: center;
	margin: 0 auto;
}

.modal-input input,
.twofa-input-group input {
	background: var(--foregroud-color-2);
	padding: 5px;
	border-radius: 6px;
	box-sizing: border-box;
	-webkit-appearance: none;
	outline: 0;
	color: #fff;
	border: 1px solid #50505020;
}

.twofa-input-group input {
	width: calc(100% / 8);
	min-width: auto;
	text-align: center;
	font-size: 30px;
	height: 50px;
	margin: 0 5px;
}

.twofa-input-group input:first-child {
	margin-left: 0;
}

.twofa-input-group input:last-child {
	margin-right: 0;
}

.access-titre {
	position: relative;
	color: #ffffff;
	text-transform: capitalize;
	font-size: var(--font-size-main);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	align-items: center;
	display: flex;
	gap: 10px;
}

.access-subtitle {
	position: relative;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.modal-input-container {
	display: flex;
	gap: 20px;
	align-items: center;
}

.modal-input-container .modal-input {
	padding: 0 0 10px;
	width: 100%;
	display: inline-block;
}

.team-role-selector {
	display: flex;
	width: 100%;
	min-height: 45px;
	/* box-sizing: border-box; */
	/* border: 1px solid #ffffff15; */
	/* border-radius: var(--radius-main); */
	/* overflow: hidden; */
	/* background: var(--foregroud-color-2); */
}

.team-role-selector > .team-role-button {
	position: relative;
	flex: 1;
	min-width: 0;
	min-height: 45px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 8px;
	margin: 0;
	border: 1px solid var(--main-color);
	border-left: 0;
	border-radius: 0 !important;
	background: transparent !important;
	color: var(--main-color);
	font-family: inherit;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
	box-sizing: border-box;
	transition: background .2s ease-in-out, color .2s ease-in-out;
}

.team-role-selector > .team-role-button:first-child {
	border-left: 1px solid var(--main-color);
	border-radius: var(--radius-main) 0 0 var(--radius-main) !important;
}

.team-role-selector > .team-role-button:nth-child(2) {
	border-radius: 0 !important;
}

.team-role-selector > .team-role-button:last-child {
	border-radius: 0 var(--radius-main) var(--radius-main) 0 !important;
}

.team-role-selector > .team-role-button:hover {
	background: #ffffff08 !important;
	color: #ffffff;
}

.team-role-selector > .team-role-button.team-role-button-active,
.team-role-selector > .team-role-button.team-role-button-active:hover {
	z-index: 1;
	background: var(--main-color) !important;
	color: #ffffff !important;
	border-color: var(--main-color);
}

.team-role-button:focus-visible {
	position: relative;
	z-index: 1;
	outline: 2px solid #ffffff80;
	outline-offset: -3px;
}

.admin-team-role-top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(420px, .9fr);
	gap: 30px;
	align-items: end;
	padding: 10px 10px 20px;
}

.admin-team-role-control {
	width: 100%;
	min-width: 0;
}

.admin-team-role-settings .invit-member {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media only screen and (max-width: 950px) {
	.admin-team-role-top {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

@media only screen and (max-width: 768px) {
	.admin-team-role-settings .invit-member {
		grid-template-columns: 1fr;
	}
}

.modal-input input {
	width: 100%;
	max-width: 100%;
	height: 45px;
}

.modal-checkbox {
	position: relative;
	float: left;
	display: flex;
}

.modal-checkbox input {
	width: 20px;
	height: 20px;
	float: left;
}

.modal-checkbox label {
	top: 2px;
	left: 5px;
	position: relative;
}

.modal-connect input {
	margin: 0 0 10px;
}

.input-title {
	margin: 0px 0 5px 0;
}

.modal-captcha {
	display: block;
}

.modal-captcha input {
	width: 0%;
}

.modal-background,
.modal-background-admin,
.modal-background-welcome-tour {
	width: 100%;
	height: 100%;
	background: var(--foregroud-color-1-transp);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	position: fixed;
	overflow: auto;
	left: 0;
	top: 0;
	display: none;
	z-index: 1001;
	transition: all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
}

.modal-background-newsletter {
	width: 100%;
	height: 100%;
	background: var(--foregroud-color-1-transp);
	position: absolute;
	overflow: auto;
	left: 0;
	top: 0;
	display: none;
	z-index: 1;
	transition: all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
}

.modal-container {
	background: var(--foregroud-color-1);
	width: 400px;
	position: absolute;
	margin: auto;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	height: fit-content;
	border-radius: var(--radius-main);
	z-index: 1002;
	box-shadow: 0 0 40px -3px rgba(0, 0, 0, .8);
}

.modal-container-large {
	background: var(--foregroud-color-1);
	width: 800px;
	position: absolute;
	margin: auto;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	height: fit-content;
	border-radius: var(--radius-main);
	z-index: 1002;
	box-shadow: 0 0 40px -3px rgba(0, 0, 0, .8);
}

.modal-container-welcome-tour {
	background: var(--foregroud-color-1);
	max-width: 600px;
	position: absolute;
	margin: auto;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	height: fit-content;
	border-radius: var(--radius-main);
	box-shadow: 0 0 40px -3px rgba(0, 0, 0, .8);
}

.modal-container-newsletter {
	width: 400px;
	margin: auto;
}

.modal-inner {
	padding: 20px;
	width: 100%;
	box-sizing: border-box;
}

.modal-menu-container {
	padding: 0 20px;
	overflow: auto;
	align-items: center;
	display: flex;
}

.modal-menu {
	padding: 0 20px;
	display: flex;
	height: 70px;
	align-items: center;
	gap: 10px;
	max-width: 400px;
}

#connect .modal-menu {
    display: block;
    height: auto;
}

.modal-menu-item {
	padding: 20px 0;
	float: left;
	cursor: pointer;
	text-transform: uppercase;
	border-bottom: 3px solid transparent;
	width: 50%;
	text-align: center;
	font-weight: bolder;
	color: #5d6168;
	transition: all .15s ease-in-out;
}

.modal-menu-item:hover {
	color: #ffffff;
	border-bottom: 3px solid #ffffff;
}

.modal-menu-item-active {
	color: var(--main-color);
	border-bottom: 3px solid var(--main-color);
}

.modal-menu-item:hover,
.modal-menu-item-active {
	padding: 20px 0;
	cursor: pointer;
	width: 50%;
	text-align: center;
	font-weight: bolder;
	transition: all .15s ease-in-out;
}

.modal-desc {
	padding: 0 0 5px;
	color: #818183;
}

.modal-desc img {
	width: 85px;
}

.modal-btn {
	margin: 20px auto;
	text-align: center;
}

.modal-btn-1,
.modal-btn-2,
.modal-btn-3 {
	margin: 0 auto;
	text-align: center;
	width: 100%;
}

.modal-btn a {
	background: linear-gradient(135deg, var(--main-color) 0%, var(--second-color) 100%);
	border-radius: 25px;
	padding: 15px 20px;
	color: #fff;
	cursor: pointer;
	text-decoration: none;
	font-weight: 700;
	display: block;
	transition: all .5s ease-in-out;
}

.modal-btn .button-disabled {
	background: none;
	border: 1px solid #5d6168;
	color: #5d6168;
	cursor: not-allowed;
	pointer-events: none;
}

.modal-btn:hover .button-disabled {
	box-shadow: 0 0 0 2em #5d6168 inset;
	color: #fff;
	transition: all .5s ease-in-out;
}

.modal-btn a:hover,
.modal-btn-1 a:hover,
.modal-btn-2 a:hover,
.modal-btn a:active,
.modal-btn-1 a:active,
.modal-btn-2 a:active {
	box-shadow: 0 0 0 2em var(--main-color) inset;
	transition: all .25s ease-in-out;
}

.modal-btn-3 a:hover,
.modal-btn-3 a:active {
	box-shadow: 0 0 0 2em #cccccc50 inset;
	color: #ffffff;
	border: 2px solid #ffffff;
	transition: all .25s ease-in-out;
}

.modal-btn-1 a {
	background: linear-gradient(135deg, var(--main-color) 0%, var(--second-color) 100%);
	margin: 20px auto !important;
	border-radius: 25px;
	padding: 15px !important;
	color: #fff !important;
	cursor: pointer;
	text-decoration: none;
	display: block;
	transition: all .5s ease-in-out;
}

.modal-btn-2 a {
	background: linear-gradient(135deg, var(--main-color) 0%, var(--second-color) 100%);
	margin: 10px auto;
	border-radius: 25px;
	padding: 15px;
	color: #fff !important;
	cursor: pointer;
	text-decoration: none;
	display: block;
	transition: all .5s ease-in-out;
}

.modal-btn-3 a {
	border: 2px solid #cccccc50;
	margin: 20px auto !important;
	border-radius: 25px;
	padding: 15px !important;
	color: #cccccc50;
	cursor: pointer;
	text-decoration: none;
	display: block;
	transition: all .3s ease-in-out;
}

.modal-btn-active a {
	color: #fff;
	border-color: var(--main-color);
	box-shadow: 0 0 0 2em var(--main-color) inset;
}

.modal-btn-active a:hover {
	box-shadow: 0 0 0 2em #00000000 inset;
	border-color: var(--main-color);
	transition: all .3s ease-in-out;
}

.modal-btn-enable a {
	color: #13964A;
}

.modal-btn-enable a:hover {
	background: #13964A;
	color: #FFF;
	transition: all .3s ease-in-out;
}

.modal-btn-facebook a {
	color: #fff !important;
	background: #3B579D !important;
}

.modal-btn-facebook a:hover {
	background: #3B579D80 !important;
	color: #FFF !important;
	transition: all .3s ease-in-out;
}

.modal-btn-google a {
	color: #3C4043 !important;
	background: #FFF !important;
	border-color: #DADCE0 !important;
}

.modal-btn-google a:hover {
	color: #202124 !important;
	background: #F8FAFF !important;
	border-color: #C5D3F3 !important;
	transition: all .3s ease-in-out;
}

.tab-login,
.tab-register {
	display: none;
}

.tab-delete,
.tab-team,
.tab-member,
.tab-categorie,
.tab-resume {
	width: 100%;
}

#categoriesuser {
	max-height: 320px;
	padding: 0 5px 0 0;
	overflow-x: auto;
}

.job-stats {
	float: right;
	z-index: 1;
	position: absolute;
}

.content-job .job-stats,
.content-sample .job-stats,
.content-group .job-stats {
	right: 0px;
}

.job-buttons-container,
.group-actions-content {
	font-size: 12px;
	float: left;
}

a.menu-button {
	float: left;
	text-decoration: none;
	font-family: "Open Sans", Arial, sans-serif;
	font-size: 12pt;
	letter-spacing: .5px;
	margin: 15px 5px;
	padding: 6px 10px;
	text-transform: uppercase;
	color: #D1D1D7;
	border: 1px solid transparent;
}

a.menu-button:hover,
a.menu-button-active {
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 6px;
	color: #FFF;
	transition: all .4s cubic-bezier(.25, .8, .25, 1);
}

#topbar-job-info {
	overflow: hidden;
}

#topbar-artwork {
	top: 10px;
	width: 80px;
	height: 80px;
	float: left;
}

#topbar-artwork img {
	width: 80px;
	height: 80px;
	object-fit: cover;
}

#topbar-job-details {
	margin-left: 80px;
	box-sizing: border-box;
}

#loading-bar {
	position: fixed;
	z-index: 9999;
	top: 0;
	left: -6px;
	width: 0;
	height: 3px;
	background: linear-gradient(135deg, var(--main-color) 0%, var(--second-color) 100%);
	-moz-border-radius: 1px;
	-webkit-border-radius: 1px;
	border-radius: 1px;
	-moz-transition: width 500ms ease-out, opacity 400ms linear;
	-ms-transition: width 500ms ease-out, opacity 400ms linear;
	-o-transition: width 500ms ease-out, opacity 400ms linear;
	-webkit-transition: width 500ms ease-out, opacity 400ms linear;
	transition: width 500ms ease-out, opacity 400ms linear;
}

#loading-bar .load1, .load2 {
	position: absolute;
	-moz-box-shadow: #008fff 1px 0 6px 1px;
	-ms-box-shadow: #008fff 1px 0 6px 1px;
	-webkit-box-shadow: #008fff 1px 0 6px 1px;
	box-shadow: #008fff 1px 0 6px 1px;
}

#loading-bar .load1 {
	opacity: .6;
	width: 20px;
	right: 0;
	clip: rect(-6px, 22px, 14px, 10px);
}

#loading-bar .load2 {
	opacity: .6;
	width: 180px;
	right: -80px;
	clip: rect(-6px, 90px, 14px, -6px);
}

#content {
	padding-top: 65px;
	position: relative;
	transition: all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
}

#filter-home,
.filter-home {
	margin: 20px 20px 0px 20px;
	border-radius: 5px;
}

/* Dashboard collections */

.dashboard-collections-panel {
	width: 100%;
	padding: 12px;
	border: 1px solid #ffffff0d;
	border-radius: var(--radius-main);
	background: #ffffff03;
	box-sizing: border-box;
}

.dashboard-collections-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 38px;
}

.dashboard-collections-title {
	display: flex;
	align-items: center;
	gap: 5px;
	min-width: 0;
	color: #ffffff;
	font-size: var(--font-size-main);
	font-weight: 600;
}

.dashboard-collections-title-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
	background: url("../images/icons/category.png") no-repeat center center;
	background-size: contain;
}

.dashboard-collections-header #filter-manage {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	min-width: 0;
}

.dashboard-collections-header #filter-manage .sidebar-header-edit-extra {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.dashboard-collections-header #dashboard-sort-label {
    display: block;
    line-height: 30px;
    white-space: nowrap;
    color: #737780;
}

.dashboard-collections-header #filter-manage .panel-btn {
	margin: 0;
}

/* Admin reports filter */
#header-list-email .dashboard-collections-header #report-filter li {
	margin: 0px;
}

#header-list-email .dashboard-collections-header #filter-home {
	width: 300px;
	max-width: 100%;
	margin: 0;
}

#header-list-email .dashboard-collections-header #list-group {
	width: 100%;
}

#report-filter {
	display: flex;
	width: 100%;
	min-height: 45px;
	margin: 0;
	padding: 0;
	gap: 0;
	overflow: visible;
	box-sizing: border-box;
}

#report-filter > li {
	flex: 1;
	min-width: 0;
}

#report-filter > li > a.sidebar-button {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	min-width: 0;
	min-height: 45px;
	padding: 0 8px;
	margin: 0;
	border: 1px solid var(--main-color);
	border-left: 0;
	border-bottom: 1px solid var(--main-color);
	border-radius: 0 !important;
	background: transparent !important;
	color: var(--main-color);
	font-family: inherit;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
	box-sizing: border-box;
    transition: all .2s ease-in-out;
}

#report-filter > li:first-child > a.sidebar-button {
	border-left: 1px solid var(--main-color);
	border-radius: var(--radius-main) 0 0 var(--radius-main) !important;
}

#report-filter > li:last-child > a.sidebar-button {
	border-radius: 0 var(--radius-main) var(--radius-main) 0 !important;
}

#report-filter > li > a.sidebar-button:hover {
    transform: scale(1.05);
    box-shadow: 0 0 0 2em var(--main-color) inset;
    color: #fff;
    transition: all .2s ease-in-out;
}

#report-filter > li > a.sidebar-button.sidebar-button-active,
#report-filter > li > a.sidebar-button.sidebar-button-active:hover {
	z-index: 1;
	color: #ffffff !important;
	background: var(--main-color) !important;
	border-color: var(--main-color);
}

#report-filter > li > a.sidebar-button:focus-visible {
	position: relative;
	z-index: 2;
	outline: 2px solid #ffffff80;
	outline-offset: -3px;
}

#report-filter .admin-notifications-number1 {
	position: static;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	margin: 0;
}

#admin-report-list .report-user-meta {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	overflow: visible;
}

#admin-report-list .report-user-name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#admin-report-list .report-user-meta > img {
	position: static;
	flex: 0 0 auto;
	float: none;
	margin: 0;
}

#admin-report-list .report-user-meta > .admin-notifications-number1 {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	margin: 0;
	line-height: 15px;
	white-space: nowrap;
}

@media screen and (max-width: 768px) {
	#header-list-email .dashboard-collections-header {
		align-items: stretch;
		flex-direction: column;
		gap: 10px;
	}

	#header-list-email .dashboard-collections-header #filter-home,
	#header-list-email .dashboard-collections-header #list-group,
	#header-list-email .dashboard-collections-header #report-filter {
		width: 100%;
	}
}


.dashboard-collections-navigation {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.dashboard-collections-overflow {
	flex: 1;
	min-width: 0;
	position: relative;
	overflow: hidden;
}

.dashboard-collections-overflow::before,
.dashboard-collections-overflow::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 36px;
	z-index: 2;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease-in-out;
}

.dashboard-collections-overflow::before {
	left: 0;
	background: linear-gradient(to right, var(--foregroud-color-3) 0%, transparent 100%);
}

.dashboard-collections-overflow::after {
	right: 0;
	background: linear-gradient(to left, var(--foregroud-color-3) 0%, transparent 100%);
}

.dashboard-collections-overflow.dashboard-collections-fade-left::before,
.dashboard-collections-overflow.dashboard-collections-fade-right::after {
	opacity: 1;
}

.dashboard-collections-overflow .sidebar-buttons {
	display: flex;
	align-items: center;
	gap: 7px;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	box-sizing: border-box;
	cursor: grab;
}

.dashboard-collections-overflow .sidebar-buttons::-webkit-scrollbar {
	display: none;
}

.dashboard-collections-overflow .sidebar-buttons.dragging {
	cursor: grabbing;
	user-select: none;
}

.dashboard-collections-overflow .sidebar-buttons li {
	flex: 0 0 auto;
}

.dashboard-collection-all,
.dashboard-collections-overflow li a.sidebar-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex: 0 0 auto;
	height: 36px;
	min-height: 36px;
	padding: 0 14px;
	margin: 0;
	border: 1px solid #ffffff10;
	border-radius: var(--border-radius-extra-large);
	background: #ffffff04;
	color: #737780;
	line-height: normal;
	box-sizing: border-box;
	white-space: nowrap;
	text-decoration: none;
	transition: all .2s ease-in-out;
}

.dashboard-collection-all::before,
.dashboard-collections-overflow li a.sidebar-button::before {
	content: "";
	width: 5px;
	height: 5px;
	flex: 0 0 5px;
	background: currentColor;
	border-radius: 50%;
	box-shadow: 0 0 0 3px #ffffff12;
	opacity: .9;
	transition: background .2s ease-in-out, box-shadow .2s ease-in-out;
}

.dashboard-collection-all:hover,
.dashboard-collections-overflow li a.sidebar-button:hover {
	border-color: var(--main-color);
	background: #ffffff08;
	color: var(--main-color);
	top: 0;
	transform: none;
}

.dashboard-collection-all.sidebar-button-active,
.dashboard-collections-overflow li a.sidebar-button-active,
.dashboard-collection-all.sidebar-button-active:hover,
.dashboard-collections-overflow li a.sidebar-button-active:hover {
	border-color: var(--main-color);
	background: var(--main-color);
	color: #ffffff;
	top: 0;
	transform: none;
	box-shadow: none;
}

.dashboard-collections-navigation .dashboard-collection-arrow {
	display: inline-block;
	flex: 0 0 28px;
	width: 28px;
	height: 36px;
	padding: 0;
	margin: 0;
	position: relative;
	top: 0;
	left: auto;
	float: none;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 13px 20px;
	box-shadow: none;
	opacity: 1;
	cursor: pointer;
	box-sizing: border-box;
	transition: opacity .2s ease-in-out;
}

.dashboard-collections-navigation .dashboard-collection-arrow:hover {
	border: 0;
	background-color: transparent;
	box-shadow: none;
	opacity: .5;
	transform: none;
}

.dashboard-collections-navigation .dashboard-collection-arrow-left {
	background-image: url("../images/icons/arrow-left.png");
}

.dashboard-collections-navigation .dashboard-collection-arrow-right {
	background-image: url("../images/icons/arrow-right.png");
}

.dashboard-collections-navigation .dashboard-collection-arrow-left.prev-button-disabled {
	background-image: url("../images/icons/arrow-left-disable.png");
}

.dashboard-collections-navigation .dashboard-collection-arrow-right.next-button-disabled {
	background-image: url("../images/icons/arrow-right-disable.png");
}

.dashboard-collections-navigation .prev-button-disabled,
.dashboard-collections-navigation .next-button-disabled,
.dashboard-collections-navigation .prev-button-disabled:hover,
.dashboard-collections-navigation .next-button-disabled:hover {
	border: 0;
	background-color: transparent;
	box-shadow: none;
	opacity: 1;
	pointer-events: none;
	cursor: default;
}

/* Mobile */

@media (max-width: 768px) {
	#filter-container {
		flex-direction: column;
		align-items: center;
	}

	#filter-manage {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.content-dashboard #filter-home {
		margin: 0px 20px 0px 20px;
	}

	.dashboard-mobile-actions .top-button-container,
	.dashboard-mobile-actions #filter-home {
		grid-column: 1 / -1;
	}

	.dashboard-mobile-actions #filter-home,
	.dashboard-mobile-actions #list-group {
		display: block;
		width: 100%;
		min-width: 0;
		margin: 0;
	}

	.dashboard-collections-panel {
		padding: 10px;
	}

	.dashboard-collections-header {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 10px;
	}

	.dashboard-collections-title {
		grid-column: 1;
		grid-row: 1;
	}

	.dashboard-collections-header #filter-manage {
		display: contents;
	}

	.dashboard-collections-header #filter-manage .sidebar-header-edit-extra {
		grid-column: 2;
		grid-row: 1;
		justify-self: end;
	}

	.dashboard-collections-header #filter-manage .panel-btn {
		grid-column: 1 / -1;
		grid-row: 2;
		display: flex;
		width: 100%;
		max-width: none;
		box-sizing: border-box;
		justify-content: center;
	}

	.dashboard-collection-arrow {
		display: none !important;
	}

	.dashboard-collections-overflow::before,
	.dashboard-collections-overflow::after {
		width: 26px;
	}

	.dashboard-collections-navigation {
		width: calc(100% + 10px);
		margin-right: -10px;
		gap: 0;
	}

	.dashboard-collection-all {
		margin-right: 6px;
	}

	.dashboard-collection-all,
	.dashboard-collections-overflow li a.sidebar-button {
		height: 38px;
		min-height: 38px;
		padding: 0 13px;
	}

	.dashboard-collections-navigation.page-header-fixed-100 {
		width: calc(100% + 10px);
		margin-right: -10px;
		padding: 8px 0;
		box-sizing: border-box;
	}
}

.admin-content-demo {
	height: 112px;
	width: 100%;
	box-sizing: border-box;
	float: left;
}

.song-top {
	z-index: 2;
}

/* job page */

.content-sample .song-top {
	position: absolute;
	bottom: 13%;
	width: 100%;
	padding: 0 15%;
	box-sizing: border-box;
}

.report-content-demo .song-top {
	left: 70px;
	z-index: 2;
}

/* job page */

.content-sample .song-play-btn {
	top: calc(50% - 30px);
}

/* dashboard page */

/* job page & sample & group & article */

.content-job .job-actions-container,
.content-sample .job-actions-container,
.content-group .job-actions-container {
	position: sticky;
	width: 100%;
	bottom: 0px;
}

.content-article .job-actions-container {
	position: relative;
	width: 100%;
	bottom: 55px;
}

/* dashboard page */

.job-actions-container {
	position: relative;
	width: 100%;
}

/* job page & group & sample */

.content-sample .song-art, .content-sample .song-art a {
	width: 400px !important;
	height: 400px;
	left: calc(50% - 200px);
	top: calc(50% - 200px);
	position: absolute;
	z-index: 1;
}

/* job page & group & sample */

.content-sample .song-art img {
	width: 400px;
	height: 400px;
	object-fit: cover;
	-webkit-box-shadow: 0px 5px 50px 5px rgba(0,0,0,0.6);
	box-shadow: 0px 5px 50px 5px rgba(0,0,0,0.6);
	margin-bottom: 5%;
}

/* job page & group & sample */

.content-sample .song-titles {
	padding: 50px 0 0 0;
	position: relative;
	display: inline-block;
	width: 100%;
}

/* job page & sample & group & article */

.content-sample .song-timeago {
	position: absolute;
	top: 55px;
	right: 30px;
}

.content-article .song-timeago {
	position: absolute;
	top: 25px;
	right: 30px;
}

/* job page & group & sample */

.content-sample .song-title {
	text-align: center;
}

/* job page & group & sample */

.content-sample .song-author {
	margin-bottom: 15px;
	text-align: center;
	position: relative;
	color: #ffffff;
}

.info-render {
	margin: 0px 20px 20px 20px;
	background: var(--foregroud-color-2);
	border-radius: var(--radius-main);
	padding: 20px;
	position: sticky;
	top: 0px;
	z-index: 2;
	box-sizing: border-box;
}

.info-render .deleted {
	overflow: hidden;
	opacity: 0.4;
	background: url("../images/icons/delete_job.webp") center 50% no-repeat;
	background-size: 180px 180px;
	pointer-events: none;
}

.render-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.render-title .manage-job-header {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	overflow: hidden;
}

.render-title .manage-job-header .job-paused {
	color: #ffffff;
	background: #e58622;
	padding: 0px 8px;
	border-radius: var(--radius-main);
	display: inline-block;
}

.render-title .manage-job-header .job-active {
	color: #ffffff;
	background: #009b4e;
	padding: 0px 8px;
	border-radius: var(--radius-main);
	display: inline-block;
}

.render-title .manage-job-header .job-finish {
	color: #ffffff;
	background: #009b4e;
	padding: 0px 8px;
	border-radius: var(--radius-main);
	display: inline-block;
}

.render-title .manage-job-header .job-delete {
	color: #ffffff;
	background: #be2b2b;
	padding: 0px 8px;
	border-radius: var(--radius-main);
	display: inline-block;
}

.render-title h3 {
	margin: 0;
	font-size: var(--font-second-title);
	font-weight: 600;
	text-transform: uppercase;
	user-select: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.render-container {
	height: auto;
	opacity: 1;
	transition: height 0.3s ease, opacity 0.3s ease;
}

.closedjobs {
	opacity: 0;
	height: 0 !important;
}

.job-priority {
	margin-top: 10px;
	display: flex;
	align-items: center;
	gap: 10px;
	position: relative;
}

.job-card-frame {
	position: relative;
}

.info-render .desc-title {
	color: #fff;
	font-size: 14px;
	font-weight: 600;
}

.info-render .box-desc,
.info-render .box-desc-active {
	padding: 5px 10px;
	border-radius: var(--radius-main);
	flex: 1;
	text-align: center;
}

.info-render .box-desc {
	background: #ffffff08;
}

.info-render .box-desc-active {
	color: #fff;
	background: #ffffff08;
}

.progress-bar-fore {
	background: #ffffff08;
	width: 100%;
	height: 25px;
	border-radius: var(--radius-main);
	overflow: hidden;
	margin-bottom: 20px;
	position: relative;
}

.progress-bar-color {
	height: 25px;
	border-radius: var(--radius-main);
	box-shadow: inset 0 8px 8px rgba(255, 204, 163, 0.5), inset 0 -2px 3px rgba(0, 0, 0, 0);
}

.progress-bar-text {
	float: left;
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    color: #ffffff;
}

.progress-bar-fore .render-time-remaining {
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
	color: #ffffff;
	font-size: 11px;
	line-height: 1;
	white-space: nowrap;
	pointer-events: none;
	z-index: 1;
}

.accordion-btn {
	background-color: #2e82ff;
}

.eyes {
	padding: 0px;
	position: relative;
	float: right;
	width: fit-content;
}

.eyes-open {
	width: 39px;
	height: 39px;
	background: url("../images/eyes-open.webp") center center / 39px 39px no-repeat;
	position: relative;
	display: inline-block;
}

.button-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	gap: 10px;
}

.btn-red,
.btn-green,
.btn-default {
	text-align: center;
	width: auto;
	height: 40px;
	padding: 12px 10px !important;
	text-decoration: none;
	border-radius: var(--border-radius-large);
	box-shadow: inset 0 2px 4px rgba(255, 255, 255, 20%), inset 0 -5px 8px rgba(0, 0, 0, 50%);
	cursor: pointer;
	outline: none;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	text-transform: uppercase;
	transition: all .2s ease-in-out;
}

.btn-red {
	animation: blink-red 1.5s infinite;
	border: 1px solid #ffffff08;
	background: #be2b2b;
	color: #ffffff;
	transition: all .2s ease-in-out;
}

.btn-red:hover {
	border: 1px solid #be2b2b;
}

.btn-green {
	animation: blink-green 1.5s infinite;
	border: 1px solid #ffffff08;
	background: #009b4e;
	color: #ffffff;
	transition: all .2s ease-in-out;
}

.btn-green:hover {
	border: 1px solid #12cb61;
	transition: all .2s ease-in-out;
}

.btn-default {
	border: 1px solid #ffffff08;
	background: transparent;
	color: #5d6168;
	gap: 5px;
	transition: all .2s ease-in-out;
}

.btn-default:hover {
	border: 1px solid #ffffff08;
	color: #fff;
	background: #ffffff08;
	transition: all .2s ease-in-out;
}

/* Animation blink */

@keyframes blink-blue {
	0%, 100% {
		box-shadow: inset 0 2px 4px rgba(255,255,255,0.5), inset 0 -3px 8px rgba(0, 0, 0, 0.5), 0 0 15px rgba(29, 151, 246, 0.6), 0 0 30px rgba(29, 151, 246, 0.3);
	}

	50% {
		box-shadow: inset 0 2px 4px rgba(255,255,255,0.5), inset 0 -3px 8px rgba(0, 0, 0, 0.5), 0 0 10px rgba(80, 180, 255, 0.2), 0 0 20px rgba(80, 180, 255, 0.1);
	}
}

@keyframes blink-green {
	0%, 100% {
		box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.5), inset 0 -4px 8px rgba(0, 0, 0, 0.5), 0 0 15px rgba(49, 207, 105, 0.6), 0 0 30px rgba(49, 207, 105, 0.3);
	}

	50% {
		box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.5), inset 0 -4px 8px rgba(0, 0, 0, 0.5), 0 0 10px rgba(49, 207, 105, 0.2), 0 0 20px rgba(49, 207, 105, 0.1);
	}
}

@keyframes blink-green-1 {
	0%, 100% {
		box-shadow: 0 0 15px rgba(49, 207, 105, 0.6), 0 0 30px rgba(49, 207, 105, 0.3);
	}

	50% {
		box-shadow: 0 0 10px rgba(49, 207, 105, 0.2), 0 0 20px rgba(49, 207, 105, 0.1);
	}
}

@keyframes blink-red {
	0%, 100% {
		box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.5), inset 0 -4px 8px rgba(0, 0, 0, 0.5), 0 0 15px rgba(255, 0, 0, 0.6), 0 0 30px rgba(255, 0, 0, 0.3);
	}

	50% {
		box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.5), inset 0 -4px 8px rgba(0, 0, 0, 0.5), 0 0 10px rgba(255, 0, 0, 0.2), 0 0 20px rgba(255, 0, 0, 0.1);
	}
}

/* ==========================================================================
   START VAT AND COMPANY REGISTRATION
   ========================================================================== */

.settings-company-check {
	clear: both;
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 16px 0 0 0;
	padding: 14px 16px;
	border-radius: 10px;
	background: #00000020;
	border: 1px solid #00000030;
	backdrop-filter: blur(4px);
}

.settings-company-loader {
	width: 22px;
	height: 22px;
	min-width: 22px;
	border-radius: 50%;
	border: 3px solid rgba(0, 0, 0, 0.12);
	border-top-color: rgba(0, 0, 0, 0.55);
	animation: settingsCompanySpin 0.8s linear infinite;
}

.settings-company-check-title {
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 3px;
	color: #ffffff;
}

.settings-company-check-text {
	font-size: 13px;
	line-height: 1.4;
	opacity: 0.75;
	color: #ffffff;
}

@keyframes settingsCompanySpin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

/* ==========================================================================
   END VAT AND COMPANY REGISTRATION
   ========================================================================== */

/* job page & group & sample */

.content-sample .song-tag {
	top: 30px;
	margin-top: 0px !important;
	right: 28px !important;
}

.content-sample .song-top .song-tag,.content-sample .song-top .song-timeago {
	display: block !important;
}

.user-stats {
	color: #959aac;
}

.stats-column-title {
	font-weight: 700;
	background: var(--main-color);
	color: #fff;
	padding: 20px 15px;
	border-radius: var(--border-radius) var(--border-radius) 0px 0px;
}

.user-stats-row {
	padding: 5px 10px;
}

.user-stats-row:hover {
	background: #F1F1F1;
	transition: all .5s cubic-bezier(.25, .8, .25, 1);
}

.user-stats-row-count {
	width: 20px;
	color: #5d6168;
	font-weight: 700;
	display: block;
	float: left;
}

.user-stats-title {
	display: inline-block;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	width: 90%;
	box-sizing: border-box;
	padding-left: 5px;
}

.user-stats-title a {
	text-decoration: none;
}

.user-stats-title img {
	width: 17px;
	height: 17px;
	margin-right: 3px;
	vertical-align: bottom;
	background: #E1E5E6;
}

.user-stats-count {
	color: #23232D;
	display: inline-block;
	min-width: 25px;
	line-height: 20px;
	text-align: right;
	float: right;
	font-weight: 700;
}

.small-info {
	padding-top: 10px;
	font-size: 12px;
	color: #777;
	width: 100%;
	display: inline-block;
}


.dashboard-mobile-actions {
	display: contents;
}

.top-button-container {
	position: absolute;
	right: 20px;
	top: 15px;
	display: flex;
	gap: 20px;
	align-items: center;
}

.top-button-container a {
	border: 1px solid var(--main-color);
	background: transparent;
	color: var(--main-color);
	font-size: 13px;
	text-align: center;
	width: auto;
	padding: 10px 15px;
	display: block;
	text-decoration: none;
	border-radius: var(--border-radius-extra-large);
	cursor: pointer;
	outline: none;
	font-weight: 700;
	text-transform: uppercase;
	transition: all .2s ease-in-out;
}

.top-button-container a:hover {
	transform: scale(1.01);
	box-shadow: 0 0 0 2em var(--main-color) inset;
	color: #fff;
	transition: all .2s ease-in-out;
}

.job-info-container {
	padding: 20px;
	position: relative;
	float: left;
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 80px;
}

.job-info-container > :is(.job-group, .dashboard-team, .job-list):first-child {
	margin-top: 0;
}

.job-info-container1 {
	padding: 20px 20px 0px 20px;
	position: relative;
	float: left;
	width: 100%;
	box-sizing: border-box;
}

.job-sidebar-container {
	padding: 20px;
	position: relative;
	float: left;
	width: 100%;
	height: calc(100% - 110px);
	box-sizing: border-box;
}

.job-top-container {
	padding: 10px 20px;
	position: relative;
	float: left;
	width: 100%;
	box-sizing: border-box;
}

.job-info-art {
	float: left;
	width: 200px;
}

.job-info-art:hover .media-size {
	width: 200px;
	object-fit: cover;
	position: absolute;
	height: 200px;
	border-radius: var(--radius-main);
	background: url("../images/media.png") center center no-repeat, linear-gradient(135deg, var(--main-color-transp) 0%, var(--second-color-transp) 100%);
}

.job-global-container {
	width: 100%;
	padding: 20px;
	margin: 10px 0;
	position: relative;
	background: #ffffff05;
	border-radius: var(--radius-main);
	float: left;
	box-sizing: border-box;
}

.job-input-container {
	display: grid;
	gap: 20px;
	align-items: center;
	grid-template-columns: 1fr 1fr;
}

@media (max-width: 768px) {
	.job-input-container {
		grid-template-columns: 1fr;
	}
}

.job-info-inputs {
	padding: 0 0 0 220px;
}

.job-info-input {
	padding: 0 0 10px;
	width: 100%;
	display: inline-block;
}

.job-info-input-publicity {
	padding: 0;
	overflow: auto;
}

.job-buttons .job-buttons-container,
.group-actions .group-actions-content {
	width: auto;
	height: auto;
	background: var(--foregroud-color-1);
	position: absolute;
	display: none;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .2);
	overflow-y: auto;
	overflow-x: hidden;
	pointer-events: all;
	z-index: 1;
	top: 8px;
	border-radius: var(--border-radius-small);
	text-align: left;
}

.job-buttons {
	float: left;
	vertical-align: middle;
	position: relative;
	z-index: 1;
}

.content-job .job-buttons,
.content-sample .job-buttons,
.content-article .job-buttons,
.content-group .job-buttons {
	float: left;
	vertical-align: middle;
	left: 10px;
	position: relative;
	z-index: 1;
}

.job-buttons:hover .job-buttons-container,
.group-actions:hover .group-actions-content {
	display: block;
}

.job-buttons .job-icon-mobile {
	background: url("../images/icons/point1.png") center center no-repeat;
	background-size: 20px 20px;
	width: 20px;
	height: 20px;
	margin-bottom: 10px;
	margin-top: 10px;
	float: left;
	cursor: pointer;
	transition: all .1s ease-in-out;
}

.job-buttons .job-icon-mobile:hover {
	background: url("../images/icons/point-hover.png") center center no-repeat;
	background-size: 20px 20px;
	transition: all .2s ease-in-out;
}

.content-job .job-buttons .job-icon-mobile,
.content-sample .job-buttons .job-icon-mobile,
.content-article .job-buttons .job-icon-mobile,
.content-group .job-buttons .job-icon-mobile {
	background: url("../images/icons/point1.png") center center no-repeat;
	background-size: 25px 25px;
	width: 30px;
	height: 30px;
	float: left;
	cursor: pointer;
	transition: all .2s ease-in-out;
}

.content-job .job-buttons .job-icon-mobile:hover,
.content-sample .job-buttons .job-icon-mobile:hover,
.content-article .job-buttons .job-icon-mobile:hover,
.content-group .job-buttons .job-icon-mobile:hover {
	background: url("../images/icons/point-hover.png") center center no-repeat;
	background-size: 25px 25px;
	transition: all .1s ease-in-out;
}

.group-actions .job-buttons {
	position: absolute;
	top: 18px;
	left: 18px;
	padding: 5px 15px;
	border: 1px solid var(--main-color);
	background: var(--main-color-transp);
	border-radius: 50%;
	transition: all .2s ease-in-out;
}

.group-actions .job-buttons:hover {
	box-shadow: 0 0 0 2em var(--main-color) inset;
	transform: scale(1.01);
	transition: all .2s ease-in-out;
}

.column-stat {
	float: left;
	min-height: 1px;
	margin-left: -1px;
	box-sizing: border-box;
	width: 25%;
	border-left: solid 1px #ffffff10;
	position: relative;
	text-align: -webkit-center;
	word-wrap: break-word;
	word-break: break-word;
}

.column-stat-33 {
	float: left;
	min-height: 1px;
	margin-left: -1px;
	box-sizing: border-box;
	width: 33.3%;
	border-left: solid 1px #ffffff10;
	position: relative;
	text-align: -webkit-center;
	word-wrap: break-word;
	word-break: break-word;
}

.column-stat-50 {
	float: left;
	min-height: 1px;
	margin-left: -1px;
	box-sizing: border-box;
	width: 50%;
	border-left: solid 1px #ffffff10;
	position: relative;
	text-align: -webkit-center;
	word-wrap: break-word;
	word-break: break-word;
}

.column-stat-sidebar {
	float: left;
	min-height: 1px;
	margin-left: -1px;
	width: 33.3%;
	border-left: solid 1px #ffffff10;
	position: relative;
	text-align: -webkit-center;
	text-transform: uppercase;
}

.section-upload {
	float: left;
	min-height: 1px;
	width: 200px;
	position: relative;
}

.job-info-title {
	float: left;
	width: 100%;
	color: #fff;
}

.job-info-img-title {
	display: flex;
	line-height: 60px;
	padding: 10px;
	margin-bottom: 10px;
	background: var(--main-color);
	border-radius: var(--border-radius);
	box-sizing: border-box;
}

.job-info-img-title span {
	color: #ffffff;
}

.job-info-img-title .job-info-img {
	height: 60px;
	width: 60px;
	background: var(--foregroud-color-1-transp) url(../images/icons/music.png) no-repeat center center;
	margin-right: 10px;
	background-size: cover;
	border-radius: var(--border-radius-small);
}

.job-info-input .fake-tag-input,
.job-info-input input,
.job-info-input-publicity input,
.job-info-input textarea,
.job-info-input select,
#upload-job .job-info-input .custom-select {
	border: 1px solid #ffffff08;
	background: #ffffff05;
	border-radius: var(--border-radius-small);
	outline: none;
	margin: 5px 0;
	width: 100%;
	max-width: none;
	float: left;
	box-sizing: border-box;
	color: #a5a5a5;
	transition: all .3s ease-in-out;
}

.job-info-input .fake-tag-input:hover,
.job-info-input input:hover,
.job-info-input-publicity input:hover,
.job-info-input textarea:hover,
.job-info-input select:hover,
#upload-job .job-info-input .custom-select:hover,
.select-selected:hover {
	border: 1px solid var(--main-color);
	transition: all .3s ease-in-out;
}

.job-info-input .fake-tag-input,
.job-info-input input,
.job-info-input-publicity input,
.job-info-input select {
	padding: 0 15px;
}

.job-info-input textarea {
	padding: 15px;
}

.job-info-input .fake-tag-input,
.job-info-input input,
.job-info-input-publicity input,
.job-info-input select {
	height: 45px;
}

#upload-job .job-info-input .fake-tag-input,
#upload-job .job-info-input input,
#upload-job .job-info-input select,
#upload-job .job-info-input .custom-select {
	min-width: auto;
}

.job-info-input select {
	width: 175px;
	display: block;
	margin-right: 10px;
	float: left;
}

.job-info-input .toggle-switch {
	position: relative;
	height: 45px;
	border-radius: 45px;
	cursor: pointer;
	user-select: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #666;
	box-sizing: border-box;
	transition: background-color 0.3s;
	box-shadow: 0 2px 5px rgb(0 0 0 / 0.1);
	width: 100%;
	border: 1px solid #ffffff08;
	background: #ffffff05;
}

.job-info-input .toggle-switch input {
	display: none !important;
}

.job-info-input .toggle-switch .slider {
	position: absolute;
	left: 5px;
	width: calc(50% - 5px);
	height: 30px;
	background: var(--main-color);
	border-radius: 30px;
	box-shadow: 0 3px 7px rgba(0,0,0,0.12);
	transition: left 0.3s;
	z-index: 1;
}

.job-info-input .toggle-switch label {
	text-align: center;
	z-index: 2;
	cursor: pointer;
	color: #818183;
	transition: color 0.3s;
	user-select: none;
	display: flex;
	align-items: center;
	height: 45px;
	width: 100%;
	justify-content: center;
}

.job-info-input .toggle-switch label svg {
	width: 20px;
	height: 20px;
	fill: #999;
	transition: fill 0.3s;
}

/* --- Position du slider selon l'option cochée --- */

#orientationPortrait:checked ~ .slider,
#selection-cc:checked ~ .slider {
	left: 50%;
}

/* --- Style actif : couleur et icône --- */

#orientationLandscape:checked ~ label[for="orientationLandscape"],
#selection-ar:checked ~ label[for="selection-ar"] {
	color: #ffffff;
}

#orientationLandscape:checked ~ label[for="orientationLandscape"] svg,
#selection-ar:checked ~ label[for="selection-ar"] svg {
	fill: #ffffff;
}

#orientationPortrait:checked ~ label[for="orientationPortrait"],
#selection-cc:checked ~ label[for="selection-cc"] {
	color: #ffffff;
}

#orientationPortrait:checked ~ label[for="orientationPortrait"] svg,
#selection-cc:checked ~ label[for="selection-cc"] svg {
	fill: #ffffff;
}

.job-info-input .timer-job-padding,
.job-info-input .timer-job-padding-right {
	display: block;
	padding: 0 10px 5px 10px;
	float: left;
	box-sizing: border-box;
}

.job-info-input .timer-job-padding {
	width: 100%;
}

.job-info-input .timer-job-padding-right {
	width: 33.33%;
}

.job-info-input .timer-job {
	display: block;
	width: 25%;
	float: left;
	background: var(--main-color);
	border-radius: 5px 0px 0px 5px;
}

.job-info-input .timer-job-right {
	display: block;
	width: 75%;
	float: left;
	background: var(--foregroud-color-1);
	border-radius: 0px 5px 5px 0px;
}

.job-info-input .margin-timer-job {
	background: #ffffff05;
	border-radius: 5px;
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
	position: relative;
	float: left;
}

.job-info-input input[type="radio"] {
	border: none;
	background: none;
	border-radius: 0;
}

.job-info-input input[type="radio"],
.job-info-input input[type="checkbox"] {
	width: auto;
	margin: 3px 4px 0 0;
	float: left;
	display: block;
	border: 0;
	z-index: 1;
	position: relative;
}

.job-info-radio,
.license-container {
	width: 100%;
	margin-top: 5px;
	float: left;
}

.license-container {
	margin-top: 10px;
	background: #ffffff05;
	padding: 20px;
	border-radius: var(--radius-main);
	box-sizing: border-box;
}

.license-box-container {
	width: 50%;
	float: left;
	padding-right: 10px;
	padding-bottom: 10px;
	box-sizing: border-box;
	background: none;
}

.license-box-container:last-child {
	padding-right: 0;
}

.license-box-content {
	border: 1px solid #ffffff08;
	padding: 10px 10px 10px 35px;
	background: url("../images/icons/group_add_n.png") 10px 10px no-repeat;
	background-size: 17px;
	cursor: pointer;
	border-radius: 6px;
	transition: all .3s cubic-bezier(.25, .8, .25, 1);
}

.license-box-content:hover {
	border: 1px solid var(--main-color);
	background: url("../images/icons/lisence_added.png") 10px 10px no-repeat,var(--main-color-transp);
	background-size: 17px;
	box-shadow: 0 0 1em var(--main-color);
	transition: all .3s cubic-bezier(.25, .8, .25, 1);
}

.license-box-active {
	background: url("../images/icons/lisence_added.png") 10px 10px no-repeat, var(--main-color);
	background-size: 17px;
	border: 1px solid var(--main-color);
	transition: all .3s cubic-bezier(.25, .8, .25, 1);
}

.license-box-active:hover {
	background: url("../images/icons/group_remove.png") 10px 10px no-repeat, var(--main-color-transp);
	background-size: 17px;
	transition: all .3s cubic-bezier(.25, .8, .25, 1);
}

.license-box-active .license-box-title {
	color: #ffffff;
}

.license-box-title {
	color: #5d6168;
}

.license-box-content:hover .license-box-title {
	color: #ffffff;
}

.license-box-desc {
	color: #5d6168;
	font-size: 12px;
	padding-top: 5px;
	width: 100%;
	overflow: auto;
}

.license-icon {
	width: 15px;
	height: 15px;
	display: inline-block;
}

.license-cc-icon {
	background: url("../images/icons/license_cc.png") no-repeat;
	background-size: 15px;
}

.license-at-icon {
	background: url("../images/icons/license_at.png") no-repeat;
	background-size: 15px;
}

.license-nc-icon {
	background: url("../images/icons/license_nc.png") no-repeat;
	background-size: 15px;
}

.license-nd-icon {
	background: url("../images/icons/license_nd.png") no-repeat;
	background-size: 15px;
}

.license-sa-icon {
	background: url("../images/icons/license_sa.png") no-repeat;
	background-size: 15px;
}.edit-menu,
.app-menu {
	padding: 0 10px;
	overflow: auto;
	display: flex;
}

.platform-menu {
	padding: 0 10px;
	overflow: auto;
	display: flex;
	justify-content: center;
}

.upload-menu {
	overflow: auto;
	display: flex;
}

.edit-menu-item,
.app-menu-item,
.invit-menu-item,
.team-menu-item,
.platform-menu-item,
.upload-menu-item,
.contact-menu-item,
.edit-menu > a,
.app-menu > a,
.platform-menu > a,
.upload-menu > a {
	color: #5d6168;
	padding: 15px 3px;
	float: left;
	cursor: pointer;
	margin-right: 10px;
	font-size: var(--font-size-main);
	white-space: nowrap;
	border-bottom: 3px solid transparent;
	text-decoration: none;
	transition: all .3s cubic-bezier(.25, .8, .25, 1);
}

.edit-menu-item:hover,
.edit-menu-item-active,
.app-menu-item:hover,
.app-menu-item-active,
.invit-menu-item:hover,
.invit-menu-item-active,
.team-menu-item:hover,
.team-menu-item-active,
.platform-menu-item:hover,
.platform-menu-item-active,
.contact-menu-item:hover,
.contact-menu-item-active,
.upload-menu-item:hover,
.upload-menu-item-active,
.edit-menu > a:hover,
.edit-menu > a.edit-menu-item-active,
.app-menu > a:hover,
.app-menu > a.app-menu-item-active,
.platform-menu > a:hover,
.platform-menu > a.platform-menu-item-active,
.upload-menu > a:hover,
.upload-menu > a.upload-menu-item-active {
	padding: 15px 3px;
	cursor: pointer;
	transition: all .3s cubic-bezier(.25, .8, .25, 1);
}

.edit-menu-item:hover,
.app-menu-item:hover,
.invit-menu-item:hover,
.team-menu-item:hover,
.platform-menu-item:hover,
.contact-menu-item:hover,
.upload-menu-item:hover,
.edit-menu > a:hover,
.app-menu > a:hover,
.platform-menu > a:hover,
.upload-menu > a:hover {
	color: #818183;
	border-bottom: 3px solid #818183;
}

.edit-menu-item-active,
.app-menu-item-active,
.invit-menu-item-active,
.team-menu-item-active,
.platform-menu-item-active,
.contact-menu-item-active,
.upload-menu-item-active,
.edit-menu > a.edit-menu-item-active,
.app-menu > a.app-menu-item-active,
.platform-menu > a.platform-menu-item-active,
.upload-menu > a.upload-menu-item-active {
	color: var(--main-color);
	border-bottom: 3px solid var(--main-color);
}

/* ========================================================================== 
   RENDER TIME TABS
   ========================================================================== */
.render-time-menu {
	margin-bottom: 10px;
}

.render-time-menu .upload-menu {
	width: 100%;
}

.render-time-panel {
	display: none;
}

.render-time-panel.active {
	display: block;
}

.render-time-values {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	margin-bottom: 12px;
}

.render-time-value {
	min-width: 0;
	padding: 9px 8px;
	background: #ffffff05;
	border: 1px solid #ffffff04;
	border-radius: var(--radius-main);
	text-align: center;
	box-sizing: border-box;
}

.render-time-number {
	color: #fff;
	font-size: 15px;
	font-weight: 500;
}

.render-time-unit {
	margin-left: 3px;
	color: #c7c8cb;
	font-size: 12px;
}

.render-time-value small {
	display: block;
	margin-top: 1px;
	color: #777a82;
	font-size: 10px;
	font-weight: 400;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media only screen and (max-width: 768px) {
	.render-time-values {
		gap: 5px;
	}

	.render-time-value {
		padding: 8px 4px;
	}
}
.job-info-art img {
	width: 200px;
	height: 200px;
	border-radius: var(--radius-main);
	object-fit: cover;
}

.required {
	color: #fff;
}

.job-top-container
.upload-btn-download {
	margin: 0;
}

.upload-btn-download {
	margin: 10px 0;
	padding: 10px;
	width: 100%;
	border-radius: var(--radius-main);
	background: #ffffff05;
	position: relative;
	box-sizing: border-box;
	float: left;
}

.upload-btn {
	float: left;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	cursor: pointer;
	margin: 10px 0;
	height: 45px;
	line-height: 15px;
	padding: 6px 0;
	overflow: hidden;
}

.upload-btn input {
	width: 100%;
	position: relative;
	height: 45px;
	top: -30px;
	opacity: 0;
	cursor: pointer;
	transition: all .3s ease-in-out;
}

.upload-btn input::-webkit-file-upload-button {
	cursor: pointer;
}

.upload-btn-text {
	width: 100%;
	float: left;
	text-align: center;
	box-sizing: border-box;
}

#uploader-message-wait {
	overflow: hidden;
	padding: 50px 0;
}

#uploader-message-wait-file {
	overflow: hidden;
	margin: 20px 20px 0 20px;
}

#filter-home #uploader-message-wait-file {
	margin: 0px;
}

#uploader-message {
	overflow: hidden;
	padding: 30px 0;
}

#upload-success-file {
	max-width: 100%;
	margin: 0px auto;
	padding: 20px 50px;
	border-radius: var(--radius-main);
	background: #ffffff05;
}

#filter-home #upload-success-file {
	padding: 0px;
	border-radius: 0px;
	background: none;
}

#upload-success {
	max-width: 600px;
	margin: 0px auto;
	padding: 50px;
	border-radius: var(--radius-main);
	background: #ffffff05;
}

#upload-success img {
	width: 200px;
	height: 200px;
	object-fit: cover;
	margin: auto;
	display: block;
	border-radius: 50%;
}

#uploader-message-wait #upload-success img {
	width: 200px;
	height: 200px;
	float: left;
	object-fit: cover;
}

#uploader {
	width: 100%;
	position: relative;
	display: flex;
}

.song-art-upload {
	width: 100%;
	position: relative;
	display: block;
}

.upload-title {
	font-size: 30px;
	text-align: center;
	margin-bottom: 50px;
	color: #fff;
}

#uploader-message-wait .upload-title {
	font-size: 30px;
	text-align: center;
	padding-top: 50px;
	padding-bottom: 50px;
	animation: blinkPulse 1.2s infinite ease-in-out;
}

#uploader-message-wait .upload-img {
	position: relative;
	margin: 30px auto;
	display: flex;
}

#uploader-message-wait .upload-img img {
	border-radius: 50%;
}

@keyframes blinkPulse {
	0% {
		opacity: 1;
		transform: scale(1);
	}

	50% {
		opacity: 0.4;
		transform: scale(1.05);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

.upload-desc {
	font-size: 14px;
	text-align: center;
	margin: 20px auto;
}

#uploader-job {
	text-align: center;
	margin: 20px auto;
	font-size: 20px;
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.info-desc {
	border-radius: var(--radius-main);
	background: var(--foregroud-color-2);
	text-align: justify;
	padding: 20px;
	display: inline-block;
	width: 100%;
	box-sizing: border-box;
	margin: 20px auto 0;
}

.panel-btn,
.new-group-btn {
	border-radius: var(--border-radius-large);
	background: transparent;
	border: 1px solid var(--main-color);
	color: var(--main-color) !important;
	margin: 10px 8px;
	padding: 0px 10px;
	line-height: 34px;
	display: flex;
	align-items: center;
	gap: 5px;
	height: 34px;
	transition: all .15s cubic-bezier(0.38, 0.37, 0.29, 1.61);
}

.panel-btn a,
.new-group-btn a {
	color: var(--main-color) !important;
}

.panel-btn:hover a,
.new-group-btn:hover a {
	color: #ffffff !important;
}

.panel-btn:hover,
.new-group-btn:hover {
	color: #fff !important;
	border-radius: var(--border-radius-large);
	background: var(--main-color);
	margin: 10px 8px;
	padding: 0px 10px;
	border: 1px solid transparent;
	transform: scale(1.05);
	transition: all .15s cubic-bezier(0.38, 0.37, 0.29, 1.61) !important;
}

.new-group-btn {
	width: fit-content;
}

.new-group-btn span {
	display: inline-flex;
	color: #ffffff;
}

.go-pro-title {
	font-weight: 700;
	font-size: var(--font-second-title);
}

.go-pro-widget-container {
	color: #fff;
	background: url("../images/pro-plan.webp") no-repeat;
	-moz-background-size: contain;
	-o-background-size: contain;
	background-size: cover;
	background-position: center;
	align-content: center;
	padding: 20px;
	height: 100%;
	border-radius: var(--radius-main);
	position: relative;
	width: 100%;
	box-sizing: border-box;
}

.go-pro-rotator {
	position: relative;
	min-height: 100px;
}

.go-pro-item {
	position: relative;
	width: 100%;
	opacity: 0;
	display: none;
	transition: opacity 0.4s ease;
}

.go-pro-item.active-message {
	display: block;
	opacity: 1;
}

.go-pro-widget-desc {
	padding: 5px 0 0;
}

.go-pro-container {
	padding-top: 10px;
	margin: 30px 80px;
	text-align: center;
	background: #F1F1F1;
	border: 1px solid #e5e5e5;
	overflow: auto;
}

.go-pro-container-pro {
	margin: 0 80px;
	text-align: center;
	overflow: hidden;
}

.go-pro-container-welcome {
	text-align: center;
}

.go-pro-desc {
	font-size: var(--font-size-main);
	max-width: 500px;
	width: 100%;
	margin: 0 auto;
}

.go-pro-desc-welcome {
	max-width: 800px;
	color: #FFF;
	width: 100%;
	margin: 0 auto;
	font-size: var(--font-size-main);
}

.go-pro-btn,
.go-pro-btn1,
.go-pro-btn2 {
	min-height: 40px;
	padding-top: 10px;
	gap: 10px;
	display: flex;
}

.go-pro-btn-payment {
	display: flex;
	grid-template-columns: repeat(auto-fit, minmax(0px, 1fr));
}

.go-pro-widget-btn {
	min-height: 30px;
	padding-top: 15px;
}

.go-pro-btn a {
	border-radius: 25px !important;
	padding: 10px 20px !important;
	color: #fff !important;
	border: 2px solid var(--main-color) !important;
	background: linear-gradient(135deg, var(--main-color) 0%, var(--second-color) 100%);
	cursor: pointer;
	text-decoration: none !important;
	text-transform: none !important;
	font-size: 17px !important;
	width: fit-content !important;
	line-height: 20px !important;
	transition: all .15s cubic-bezier(0.38, 0.37, 0.29, 1.61) !important;
}

.go-pro-btn a:hover {
	color: #fff !important;
	transform: scale(1.1);
	transition: all .15s cubic-bezier(0.38, 0.37, 0.29, 1.61) !important;
}

.go-pro-btn1 a {
	border-radius: 30px;
	padding: 10px 15px;
	color: #fff;
	font-size: 17px;
	border: 2px solid #fff;
	cursor: pointer;
	position: relative;
	-webkit-box-shadow: 0px 5px 20px 5px rgb(0 0 0 / 10%);
	box-shadow: 0px 5px 20px 5px rgb(0 0 0 / 10%);
	text-decoration: none;
	margin: 0 auto;
	transition: all .15s cubic-bezier(0.38, 0.37, 0.29, 1.61);
}

.go-pro-btn1 a:hover {
	border-color: var(--main-color);
	background: linear-gradient(135deg, var(--main-color) 0%, var(--second-color) 100%);
	color: #FFF;
	transform: scale(1.07);
	transition: all .15s cubic-bezier(0.38, 0.37, 0.29, 1.61);
}

.go-pro-btn2 a {
	border-radius: 30px;
	padding: 10px 15px;
	color: #FFF;
	font-size: 17px;
	background: var(--main-color);
	border: 2px solid var(--main-color);
	-webkit-box-shadow: 0px 5px 20px 5px rgb(0 0 0 / 10%);
	box-shadow: 0px 5px 20px 5px rgb(0 0 0 / 10%);
	cursor: pointer;
	position: relative;
	top: 3px;
	text-decoration: none;
	margin: 0 auto;
	transition: all .15s cubic-bezier(0.38, 0.37, 0.29, 1.61);
}

.go-pro-btn2 a:hover {
	border-color: var(--main-color);
	background: linear-gradient(135deg, var(--main-color) 0%, var(--second-color-transp) 100%);
	color: #FFF;
	transform: scale(1.07);
	transition: all .15s cubic-bezier(0.38, 0.37, 0.29, 1.61);
}

.go-pro-btn2 a[data-disabled="true"] {
	background: #5d6168;
	border-color: #5d6168;
	pointer-events: none;
	cursor: not-allowed;
	opacity: 0.7;
}

.gpay-card-info-container {
	display: block;
	margin: 20px auto 0 auto;
}

.go-pro-header {
	background: linear-gradient(135deg, var(--main-color-transp) 0%, var(--second-color-transp) 100%), url("../images/background.webp") no-repeat center;
	background-size: cover;
	color: #FFF;
	padding: 80px 20px;
	margin: 20px 20px 0 20px;
	text-align: center;
	border-radius: var(--radius-main);
}

.go-pro-header-1 {
	background: linear-gradient(135deg, var(--main-color-transp) 0%, var(--second-color-transp) 100%), url("../images/background-1.webp") no-repeat center;
	background-size: cover;
	color: #FFF;
	padding: 80px 20px;
	margin: 20px 20px 0 20px;
	text-align: center;
	border-radius: var(--radius-main);
}

.go-pro-header-2 {
	background: linear-gradient(135deg, var(--main-color-transp) 0%, var(--second-color-transp) 100%), url("../images/background-1.webp") no-repeat center;
	background-size: cover;
	color: #FFF;
	padding: 40px 20px;
	text-align: center;
	border-radius: var(--radius-main);
}

.go-pro-header-title {
	font-size: var(--font-main-title);
}

.go-pro-header-desc {
	font-size: var(--font-size-main);
}

.current-plan {
	padding: 10px 0 0;
	font-size: 14px;
	text-align: center;
}

.current-plan-option {
	color: #777;
	font-weight: 700;
	text-transform: capitalize;
}

.plans-container {
	width: 50%;
	overflow: auto;
	float: left;
}

.feature-container,
.feature-container-1 {
	display: flex;
	align-items: stretch;
	gap: 20px;
	margin: 20px;
	box-sizing: border-box;
}

.license-feature-container {
	flex-wrap: wrap;
}

.license-feature-container > .welcome-license-landing,
.license-feature-container > .feature-option-1,
.license-feature-container > .plan-option-download {
	flex: 1 1 320px;
	min-width: 280px;
	box-sizing: border-box;
}

.license-feature-container > .welcome-license-landing,
.license-feature-container > .plan-option-download {
	padding: 20px;
}

.license-feature-container > .plan-option-download {
	overflow: hidden;
}

.license-feature-container .item-download label {
	display: block;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (max-width: 1200px) {
	.license-feature-container {
		flex-direction: column;
	}

	.license-feature-container > .welcome-license-landing,
	.license-feature-container > .feature-option-1,
	.license-feature-container > .plan-option-download {
		flex: none;
		width: 100%;
		min-width: 0;
	}
}

.feature-container-history {
	position: relative;
	display: flex;
    line-height: 40px;
	align-items: center;
	transition: all .3s ease-in-out;
}

.feature-line {
	padding: 20px;
}

.feature-line:hover {
	background: var(--foregroud-color-3-transp);
	transition: all .5s cubic-bezier(.25, .8, .25, 1);
}

.feature-description {
	margin: 10px 20px 20px;
	padding: 0 15px;
}

.feature-option {
	background: #ffffff05;
	border-radius: var(--radius-main);
	padding: 20px;
	flex: 1;
	flex-direction: column;
	justify-content: space-between;
}

.feature-option-1 {
	background: #ffffff05;
	border-radius: var(--radius-main);
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.plan-option-history,
.plan-option-history-status {
	width: 25%;
	float: left;
	text-align: center;
}

.plan-option p {
	position: relative;
	margin: 0;
	color: #ffffff;
	font-weight: initial;
	display: grid;
}

.plan-option p a {
	color: #000000;
	text-decoration: underline;
}

.plan-option p a:hover {
	color: #c8c8c8;
}

.plan-info {
	width: 50%;
	float: left;
}

.plan-history-title {
	font-size: 20px;
	padding: 15px;
	color: #ffffff;
	background: var(--main-color);
	border-radius: var(--border-radius) var(--border-radius) 0px 0px;
}

.plan-history-container {
	padding: 15px 0px;
	display: flex;
	border-radius: 0px 0px var(--border-radius) var(--border-radius);
	background: #ffffff;
	font-weight: bolder;
	font-family: sans-serif;
	font-size: var(--font-size-main);
	color: #000000;
}

.plan-history,
.plan-history-status {
	width: 33%;
	float: left;
	text-align: center;
}

.plan-option-pro-recommend,
.plan-option-valid {
	border-radius: var(--radius-main);
	flex: 0 0 400px;
	box-sizing: border-box;
	padding: 40px 30px;
	align-items: center;
	display: inline-grid;
	justify-items: center;
}

.plan-option-valid {
	background: linear-gradient(135deg, var(--main-color) 0%, var(--second-color) 100%);
}

.plan-option-pro-recommend {
	background: url("../images/recommend.png") top right no-repeat, linear-gradient(135deg, var(--main-color) 0%, var(--second-color) 100%);
}

.plan-option-download {
	box-shadow: 0 0 20px 0px var(--main-color) inset;
	border: 1px solid var(--main-color);
	border-radius: var(--radius-main);
	flex: 0 0 400px;
	box-sizing: border-box;
	padding: 20px 0;
	align-items: center;
	display: inline-grid;
	justify-items: center;
}

.plan-option-download .job-accept {
	width: 80%;
}

.feature-offer {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px;
	margin-top: 20px;
}

.plan-custom-fields {
	margin-top: 15px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.plan-custom-field {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.plan-custom-field label {
	font-size: 13px;
	font-weight: 600;
	color: #fff;
	line-height: 1.2;
}

.plan-stepper {
	display: flex;
	align-items: center;
	background: rgba(0, 0, 0, 0.18);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 20px;
	overflow: hidden;
	flex-shrink: 0;
	position: relative;
}

.plan-stepper button {
    width: 32px;
    height: 32px;
    border: 0;
    cursor: pointer;
    font-size: 18px;
    font-weight: 700;
    padding: 0 !important;
    color: #fff;
    background: #ffffff20;
    z-index: 2;
    line-height: 32px;
}

.plan-stepper input[type="number"],
.plan-stepper input[type="text"] {
	min-width: 50px;
	width: 100px;
	border: 0;
	text-align: center;
	font-weight: 700;
	color: #fff;
	background: transparent;
	outline: none;
	-moz-appearance: textfield;
}

.plan-stepper input[type="number"]::-webkit-outer-spin-button,
.plan-stepper input[type="number"]::-webkit-inner-spin-button,
.plan-stepper input[type="text"]::-webkit-outer-spin-button,
.plan-stepper input[type="text"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.plan-unit {
	padding-right: 40px;
	font-weight: 700;
	right: 0px;
	position: absolute;
	color: #ffffff;
	z-index: 1;
}

.plan-stepper-duration input[type="number"] {
	box-sizing: border-box;
	text-align: left;
	padding-left: 22px;
	padding-right: 58px;
}

.plan-stepper-duration .plan-unit {
	right: 42px;
	padding-right: 0;
	pointer-events: none;
}

.plan-stepper-duration .plan-unit.plan-unit-no-extension {
	left: 35px;
	right: 35px;
	text-align: center;
}

#swap-plan-container {
	transition: opacity 0.2s ease;
}

#swap-plan-container.opacityShow {
	opacity: 1;
}

#swap-plan-days #timer {
	width: 100%;
}

#swap-plan-days #timer .timer-container {
	display: flex;
	align-items: center;
	gap: 4px;
	justify-content: center;
}

#swap-plan-days #timer .timer-box {
	background: #222;
	color: #fff;
	padding: 6px 10px;
	border-radius: var(--border-radius);
	text-align: center;
	min-width: 40px;
	width: 25%;
	float: left;
}

#swap-plan-days #timer .timer-label {
	font-size: 12px;
	color: #aaa;
}

#swap-plan-days #manage-plan-summary .valid-date-container {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
}

#swap-plan-days #manage-plan-summary .valid-date-box {
	color: rgb(255, 255, 255);
	text-align: center;
	min-width: 40px;
	width: 100%;
	max-width: 320px;
	background: rgb(34, 34, 34);
	padding: 6px 10px;
	border-radius: var(--border-radius);
	box-sizing: border-box;
}

#swap-plan-days #manage-plan-summary .valid-date-label {
	font-size: 12px;
	color: rgb(170, 170, 170);
}

#swap-plan-days #manage-plan-summary .valid-date-box > div:last-child {
	font-weight: 700;
	font-size: 22px;
	line-height: 1.15;
	white-space: nowrap;
}

@media only screen and (max-width: 768px) {
	#swap-plan-days #manage-plan-summary .valid-date-container {
		flex-direction: column;
	}

	#swap-plan-days #manage-plan-summary .valid-date-box {
		width: 100%;
	}

	#swap-plan-days #manage-plan-summary .valid-date-box > div:last-child {
		font-size: 18px;
	}
}

#swap-plan-container {
	display: inline-grid;
	max-width: 100%;
	position: relative;
}

#swap-plan {
	color: #FFF;
	font-weight: 700;
	font-size: var(--font-main-title-big);
	text-align: center;
	margin: 0 auto 10px auto;
	line-height: var(--font-main-title-big);
}

#swap-plan span {
	font-size: var(--font-size-main);
	line-height: var(--font-size-main);
}

#swap-plan-days {
	margin-top: 10px;
	color: #FFF;
	font-size: 35px;
	text-align: center;
	width: 100%;
}

#swap-plan-days1 {
	color: #FFF;
	font-weight: 700;
	font-size: 25px;
	background: #33333333;
	border-radius: var(--border-radius-extra-large);
	text-align: center;
	padding: 5px 20px;
	height: 40px;
	line-height: 40px;
}

#free-plan {
	color: #FFF;
	font-weight: 700;
	font-size: var(--font-main-title-big);
	text-align: center;
	width: 250px;
	margin: 0 auto;
	line-height: var(--font-main-title-big);
	display: inline-grid;
}

#title-plan {
	color: var(--main-color);
	font-weight: 700;
	font-size: var(--font-main-title);
	text-align: left;
}

#desc-plan {
	margin-top: 10px;
	text-align: left;
	line-height: 13px;
}

#desc-plan1 {
	background: #ffffff08;
	border-radius: var(--border-radius-small);
	padding: 10px 15px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#desc-plan1 span {
	width: 70%;
}

#desc-plan-valid {
	text-align: center;
	padding: 0 30px;
	color: #FFF;
	font-size: var(--font-size-main);
}

#option-ok {
	text-align: right;
	color: var(--main-color);
	font-weight: 700;
	width: 50%;
}

#option-nok {
	text-align: right;
	color: #fff;
	font-weight: 700;
	width: 50%;
}

select.plan-options {
	padding: 15px;
	border-radius: var(--border-radius-small);
	border: none;
	background: #fff;
	color: #5d6168;
}

select.plan-options-user {
	padding: 0px 10px;
	border-radius: var(--border-radius-small);
	margin: 0 5px 0 0;
}

/* ==========================================================================
   START INVITE / TEAM MEMBER MODAL
   ========================================================================== */

.invit-member,
.team-member {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 12px;
	margin-top: 10px;
}

.invit-header,
.team-header {
	padding: 10px;
	text-transform: uppercase;
	color: var(--main-color);
	font-size: var(--font-body);
}

.desc-invit-line,
.desc-team-line {
	background: #ffffff08;
	border-radius: var(--border-radius-small);
	padding: 10px 15px 10px 5px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.desc-invit-line .invit-line-container,
.desc-team-line .team-line-container {
	width: 100%;
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
}

.desc-invit-line .invit-line-container .invit-line-text,
.desc-team-line .team-line-container .team-line-text {
	width: 100%;
	position: relative;
	margin-right: 10px;
}

.desc-invit-line .invit-line-container span,
.desc-team-line .team-line-container span {
	position: relative;
	color: #ffffff;
	font-size: var(--font-size-main);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	align-items: center;
	display: flex;
	gap: 10px;
}

#invit-option-ok {
	background: url("../images/icons/approve_a.png") no-repeat right;
	background-size: 20px;
	width: 20px;
	height: 20px;
}

#invit-option-nok {
	background: url("../images/icons/approve_h.png") no-repeat right;
	background-size: 20px;
	width: 20px;
	height: 20px;
}

/* ==========================================================================
   END INVITE / TEAM MEMBER MODAL
   ========================================================================== */

/* ==========================================================================
   START FRAME
   ========================================================================== */

.page-content-frame {
	margin: 10px 20px 60px 20px;
	position: relative;
	z-index: 1;
}

.page-content-frame .divider {
	display: block;
	margin: 0;
}

.frames-list-container {
	float: left;
	width: 100%;
	position: absolute;
}

.plan-frame-title {
	font-size: 14px;
	font-weight: 600;
	padding: 8px;
	color: #ffffff;
	border-radius: var(--border-radius) var(--border-radius) 0px 0px;
}

.frame-row-container {
	padding: 15px 0px;
	display: flex;
	border-radius: var(--border-radius);
	background: #ffffff08;
	font-family: sans-serif;
	font-size: var(--font-size-main);
}

.frame-option-col-small {
	width: 20%;
	float: left;
	text-align: center;
}

.frame-option-col {
	width: 30%;
	float: left;
	text-align: center;
}

.feature-container-frame {
	position: relative;
	display: flex;
	height: 50px;
	align-items: center;
	transition: all .3s ease-in-out;
}

.feature-container-frame::before {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s ease-in-out;

	background: -moz-linear-gradient(45deg, var(--main-color-transp-1) 0%, var(--main-color-transp-2) 40%, var(--main-color-transp-3) 80%);
	background: -webkit-linear-gradient(45deg, var(--main-color-transp-1) 0%, var(--main-color-transp-2) 40%, var(--main-color-transp-3) 80%);
	background: linear-gradient(45deg, var(--main-color-transp-1) 0%, var(--main-color-transp-2) 40%, var(--main-color-transp-3) 80%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#33fe6137", endColorstr="#00fe6137",GradientType=1 );
}

.feature-container-frame:hover::before {
	opacity: 1;
}

.feature-container-frame:hover {
	transition: all .3s ease-in-out;
}

.feature-container-frame + .divider {
	position: relative;
}

.feature-container-frame + .divider::before {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s ease-in-out;

	background: -moz-linear-gradient(45deg, var(--main-color-transp) 0%, var(--main-color-transp-1) 40%, var(--main-color-transp-2) 80%);
	background: -webkit-linear-gradient(45deg, var(--main-color-transp) 0%, var(--main-color-transp-1) 40%, var(--main-color-transp-2) 80%);
	background: linear-gradient(45deg, var(--main-color-transp) 0%, var(--main-color-transp-1) 40%, var(--main-color-transp-2) 80%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#33fe6137", endColorstr="#00fe6137",GradientType=1 );
}

.feature-container-frame:hover + .divider::before {
	opacity: 1;
}

.feature-container-frame > * {
	position: relative;
	z-index: 1;
}
.frame-col-small {
	width: 20%;
	float: left;
	text-align: center;
	color: #ffffff;
}

.frame-col {
	width: 30%;
	float: left;
	text-align: center;
	color: #ffffff;
}

.frame-col .status-frame {
	border-radius: 16px;
	line-height: 25px;
	display: inline-block;
	width: 100%;
}

.frame-col .processing,
.frame-list .processing {
	animation: blink-blue 1.5s infinite;
	background-color: #008fff;
	box-shadow: inset 0 2px 4px rgb(255 255 255 / 50%), inset 0 -2px 8px rgb(0 0 0 / 50%);
	color: #ffffff;
}

.frame-col .failed,
.frame-list .failed {
	background-color: #e58622;
	box-shadow: inset 0 2px 4px rgb(255 255 255 / 50%), inset 0 -2px 8px rgb(0 0 0 / 50%);
	color: #ffffff;
}

.frame-col .pending,
.frame-list .pending {
	background-color: #ffffff08;
	box-shadow: inset 0 2px 4px rgba(255, 255, 255, 5%), inset 0 -5px 8px rgba(0, 0, 0, 10%);
	color: #ffffff;
}

.frame-col .done,
.frame-list .done {
	background-color: #009b4e;
	box-shadow: inset 0 2px 4px rgb(255 255 255 / 50%), inset 0 -2px 8px rgb(0 0 0 / 50%);
	color: #ffffff;
}

.frame-col .error,
.frame-list .error {
	background-color: #be2b2b;
	box-shadow: inset 0 2px 4px rgb(255 255 255 / 50%), inset 0 -2px 8px rgb(0 0 0 / 50%);
	border: 0;
	color: #ffffff;
	margin: 0;
	padding: 0;
}

.frame-list {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	gap: 5px;
	align-items: flex-start;
	max-height: 150px;
}

.frame-item {
	width: calc(100% / 24);
	aspect-ratio: 1 / 1;
	border-radius: 3px;
	background: #444;
	cursor: pointer;
}

/* ==========================================================================
   END FRAME
   ========================================================================== */

/* ==========================================================================
   START PROCESS
   ========================================================================== */

#process,
.process-app {
	width: 100%;
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	padding: 2rem 0;
	z-index: 0;
	box-sizing: border-box;
}

#process .title-process-content,
.process-app .title-process-content {
	margin: 0 10vw 5vh 10vw;
}

#process .title-process-content .heading-section,
.process-app .title-process-content .heading-section {
	color: var(--main-color);
	font-size: var(--font-main-title);
	text-transform: uppercase;
	text-align: center;
	margin-bottom: 2rem;
	word-break: break-word;
	display: grid;
}

#process .title-process-content .heading-section .subheading,
.process-app .title-process-content .heading-section .subheading {
	color: #ffffff;
	text-transform: none;
	letter-spacing: 1.5px;
	font-size: var(--font-second-title);
	float: left;
	font-weight: 100;
}

#process .process,
.process-app .process {
	display: inline-flex;
}

#process .process .heading-section,
.process-app .process .heading-section {
	text-transform: uppercase;
	display: grid;
	margin: 0 2rem;
	text-align: center;
}

#process .tabs-left {
	position: relative;
	padding-left: 40px;
}

#process .tabs-left::before {
	content: "";
	position: absolute;
	left: 10px;
	top: 0;
	width: 2px;
	height: 100%;
	background: #52525270;
}

#process .tabs-left li {
	border-left: 2px solid #52525270;
	padding-left: 20px;
	position: relative;
	border: none;
}

#process .tabs-left li::before {
	content: "";
	position: absolute;
	left: 0px;
	top: 35px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: transparent;
	border: 2px solid grey;
	transition: all 0.3s ease;
}

#process .tabs-left>li.active::before {
	content: "";
	position: absolute;
	left: 0px;
	top: 35px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: transparent;
	border: 2px solid var(--main-color);
	transition: all 0.3s ease;
}

#process .tabs-left>li.active,
#process .tabs-left>li.active:hover,
#process .tabs-left>li.active:focus,
#process .tabs-right>li.active,
#process .tabs-right>li.active:hover,
#process .tabs-right>li.active:focus ,
.process-app .tabs-left>li.active,
.process-app .tabs-left>li.active:hover,
.process-app .tabs-left>li.active:focus,
.process-app .tabs-right>li.active,
.process-app .tabs-right>li.active:hover,
.process-app .tabs-right>li.active:focus {
	height: 180px;
	transition: height .3s ease-in-out;
}

#process .tabs-left>li .num,
.process-app .tabs-left>li .num {
	color: grey;
	font-weight: 600;
	font-size: 2.5rem;
	text-decoration: none;
	position: relative;
	float: left;
	top: -12px;
	display: grid;
	padding: 0 0.8rem 0 0;
	transition: all .3s ease-in-out;
}

#process .tabs-left>li.active .num,
.process-app .tabs-left>li.active .num {
	color: var(--main-color);
	padding: 0 0.8rem 0 1.2rem;
	transition: all .3s ease-in-out;
	text-shadow: 0 0 20px rgba(255, 106, 61, 0.5), 0 0 10px rgba(255, 106, 61, 0.4), 0 0 20px rgba(255, 106, 61, 0);
}

#process .tabs-left,.tabs-right,
.process-app .tabs-left,.tabs-right {
	width: 45%;
	box-sizing: border-box;
	padding: 0;
}

#process .tabs-left>li,.tabs-right>li,
.process-app .tabs-left>li,.tabs-right>li {
	display: block;
}

#process .tabs-left>li,.tabs-right>li,
.process-app .tabs-left>li,.tabs-right>li {
	color: #ffffff;
	text-decoration: none;
	margin: 0 4rem 0 0;
	display: block;
	word-wrap: break-word;
	height: 95px;
	overflow: hidden;
	transition: height .3s ease;
}

#process .tabs-left li a h3,.tabs-right li a span,
.process-app .tabs-left li a h3,.tabs-right li a span {
	color: #ffffff;
	font-size: var(--font-second-title);
	text-decoration: none;
	padding: 2rem 0.8rem;
	display: block;
}

#process .tabs-left li p,
.process-app .tabs-left li p {
	padding: 0 1rem;
	margin: 0;
	font-size: var(--font-size-main);
	color: #ffffff99;
}

#process .tab-pane .text,
.process-app .tab-pane .text {
	overflow: hidden;
	border-radius: 0 0 var(--radius-main) var(--radius-main);
	position: relative;
	background: var(--main-color);
	padding: 1rem;
	color: var(--primary-font-color);
	float: left;
}

#process .tab-pane .text h4,
.process-app .tab-pane .text h4 {
	color: #ffffff;
	font-size: var(--font-second-title);
	text-transform: uppercase;
}

#process .tab-pane .text p,
.process-app .tab-pane .text p {
	font-size: var(--font-size-main);
	margin: 0;
	color: #ffffff;
}

#process .tab-pane .text a,
.process-app .tab-pane .text a {
	text-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
	color: #ffffff08;
	font-size: var(--font-size-main);
}

#process .tab-pane .tab-img,
.process-app .tab-pane .tab-img {
	width: 100%;
	height: auto;
	min-height: 450px;
	position: relative;
	background: #fff;
	border-radius: var(--radius-main) var(--radius-main) 0 0;
	object-fit: cover;
	border: none;
	float: left;
}

#process .tab-pane,
.process-app .tab-pane {
	width: 100%;
	visibility: hidden;
	position: absolute;
	top: 0px;
	display: block;
	border: 1px solid var(--main-color-transp-1);
	border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
	box-shadow: 0 50px 100px -20px var(--main-color-transp-2), 0 30px 60px -30px var(--main-color-transp-1);
	opacity: 0;
	transition: opacity .7s ease-in-out;
}

#process .tab-content,
.process-app .tab-content {
	width: 55%;
	position: relative;
	display: block;
	margin-top: 1rem;
}

#process .tab-content>.active,
.process-app .tab-content>.active {
	opacity: 1;
	position: relative;
	visibility: visible;
	transition: opacity .7s ease-in-out;
}

/* ==========================================================================
   END PROCESS
   ========================================================================== */

/* ==========================================================================
   START NEWS MODULE
   ========================================================================== */

#content-news,
#search-content-news {
	position: relative;
	text-align: -webkit-center;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/* base 3 colonnes */
	gap: 20px;
}

@media (max-width: 768px) {
	#content-news,
	#search-content-news {
		grid-template-columns: 1fr !important;
		/* 1 seule colonne */
		gap: 16px;
		text-align: initial;
		/* enlève ton center bizarre */
	}

	/* désactive complètement le quinconce */

	#content-news.quinconce .news-big,
	#content-news.quinconce .news-small {
		grid-column: span 1 !important;
	}

	/* force toutes les cartes en pleine largeur */

	.news-big,
	.news-small {
		grid-column: span 1 !important;
		width: 100%;
	}

	/* bouton load more full width */

	#content-news #load-more {
		grid-column: span 1 !important;
	}
}

/* QUINCONCE (décalage une ligne sur deux) */

#content-news.quinconce .news-big:nth-child(4n/**/+1) {
	grid-column: 2 / span 2;
	/* décale à droite */
}

#content-news.quinconce .news-small:nth-child(4n/**/+2) {
	grid-column: 1;
	/* met à gauche */
}

#content-news #load-more {
	grid-column: span 3;
}

.news-small {
	background: var(--foregroud-color-1);
	grid-column: span 1;
	height: 250px;
	position: relative;
	text-align: left;
	border-radius: var(--border-radius);
	display: inline-flex;
	transition: all 0.2s ease-in-out;
	-webkit-box-shadow: 0px 5px 10px 5px rgb(0 0 0 / 25%);
	box-shadow: 0px 5px 10px 5px rgb(0 0 0 / 25%);
}

.news-big {
	background: var(--foregroud-color-1);
	grid-column: span 2;
	height: 250px;
	position: relative;
	text-align: left;
	border-radius: var(--border-radius);
	display: inline-flex;
	transition: all 0.2s ease-in-out;
	-webkit-box-shadow: 0px 5px 10px 5px rgb(0 0 0 / 25%);
	box-shadow: 0px 5px 10px 5px rgb(0 0 0 / 25%);
}

.news-small::after,
.news-big::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	transition: all 0.2s ease-in-out;
}

.news-small:hover::after,
.news-big:hover::after {
	border: 1px solid var(--main-color);
	box-shadow: 0 0 20px 0 var(--main-color);
}

.news-small a, .news-big a {
	width: 100%;
}

.news-big img, .news-small img {
	object-fit: cover;
	border-radius: var(--radius-main);
	width: 100%;
	height: 100%;
}

.news-small .news-date, .news-big .news-date {
	position: absolute;
	color: #fff;
	font-size: 12px;
	top: 10px;
	right: 10px;
}

.news-small .news-content,
.news-big .news-content {
	background: linear-gradient(to top, #161616 0%, #161616b5 50%, #1616165e 100%);
	backdrop-filter: blur(5px);
	width: 100%;
	height: 90px;
	bottom: 0;
	position: absolute;
	border-radius: 0 0 12px 12px;
}

.news-small .news-title, .news-big .news-title {
	color: #fff;
	text-transform: uppercase;
	font-size: 16px;
	padding: 10px 0px 10px 10px;
	position: relative;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.news-small .news-description, .news-big .news-description {
	color: #a5a5a5;
	font-size: 12px;
	padding: 0px 10px;
	position: relative;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.job-container,
.groups-container,
.article-container {
	border-bottom: none;
	width: 100%;
	position: absolute;
	overflow: auto;
	height: 100%;
}

.article-container img {
	height: auto;
	max-height: 500px;
	width: 100%;
	object-fit: cover;
}

.article-container .article-view {
	margin: 0px 10% 140px 10%;
	position: relative;
}

.article-container .article-title {
	padding: 20px 0;
	min-height: 15px;
	border-bottom: 1px solid #ffffff10;
}

.article-container .article-title a,
.article-container .article-description a {
	color: #fff;
}

.article-container .article-title-sub {
	font-size: 25px;
	font-weight: 700;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.article-container .article-description {
	text-align: left;
	line-height: 25px;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-top: 20px;
	font-size: 14px;
	word-wrap: break-word;
}

.prev-group-button {
	background: #ffffff08 url("../images/icons/arrow-left.png") no-repeat;
	background-position: 5px 8px;
	width: 40px;
	height: 60px;
	cursor: pointer;
	display: inline-block;
	opacity: 1;
	transition: opacity .2s ease-in-out;
}

.prev-group-button:hover {
	opacity: .5;
	transition: opacity .2s ease-in-out;
}

.next-group-button {
	background: #ffffff08 url("../images/icons/arrow-right.png") no-repeat;
	background-position: 8px;
	width: 40px;
	height: 60px;
	cursor: pointer;
	display: inline-block;
	opacity: 1;
	transition: opacity .2s ease-in-out;
}

.next-group-button:hover {
	opacity: .5;
	transition: opacity .2s ease-in-out;
}

.content-group .prev-button-disabled {
	background: #ffffff08 url("../images/icons/arrow-left-disable.png") no-repeat;
	background-position: 5px 8px;
	width: 40px;
	height: 60px;
}

.content-group .next-button-disabled {
	background: #ffffff08 url("../images/icons/arrow-right-disable.png") no-repeat;
	background-position: 8px;
	width: 40px;
	height: 60px;
}

/* @end */

/* @group current time and duration */

/* dashboard page */

/* @end */

@-webkit-keyframes small-bounce {
	0% {
		-webkit-transform: translateY(0px);
	}

	25% {
		-webkit-transform: translateY(3px);
	}

	50% {
		-webkit-transform: translateY(0px);
	}

	75% {
		-webkit-transform: translateY(-1px);
	}

	100% {
		-webkit-transform: translateY(0px);
	}
}

@-moz-keyframes small-bounce {
	0% {
		-moz-transform: translateY(0px);
	}

	25% {
		-moz-transform: translateY(3px);
	}

	50% {
		-moz-transform: translateY(0px);
	}

	75% {
		-moz-transform: translateY(-1px);
	}

	100% {
		-moz-transform: translateY(0px);
	}
}

@keyframes small-bounce {
	0% {
		transform: translateY(0px);
	}

	25% {
		transform: translateY(3px);
	}

	50% {
		transform: translateY(0px);
	}

	75% {
		transform: translateY(-1px);
	}

	100% {
		transform: translateY(0px);
	}
}

@-webkit-keyframes small-bounce-right {
	0% {
		-webkit-transform: translateX(0px);
	}

	25% {
		-webkit-transform: translateX(3px);
	}

	50% {
		-webkit-transform: translateX(0px);
	}

	75% {
		-webkit-transform: translateX(-1px);
	}

	100% {
		-webkit-transform: translateX(0px);
	}
}

@-moz-keyframes small-bounce-right {
	0% {
		-moz-transform: translateX(0px);
	}

	25% {
		-moz-transform: translateX(3px);
	}

	50% {
		-moz-transform: translateX(0px);
	}

	75% {
		-moz-transform: translateX(-1px);
	}

	100% {
		-moz-transform: translateX(0px);
	}
}

@keyframes small-bounce-right {
	0% {
		transform: translateX(0px);
	}

	25% {
		transform: translateX(3px);
	}

	50% {
		transform: translateX(0px);
	}

	75% {
		transform: translateX(-1px);
	}

	100% {
		transform: translateX(0px);
	}
}

.animation-small-bounce {
	-webkit-animation: small-bounce 850ms linear infinite;
	-moz-animation: small-bounce 850ms linear infinite;
	animation: small-bounce 850ms linear infinite;
}

.animation-small-bounce-right {
	-webkit-animation: small-bounce-right 850ms linear infinite;
	-moz-animation: small-bounce-right 850ms linear infinite;
	animation: small-bounce-right 850ms linear infinite;
}

@keyframes expandBar {
	0% {
		height: 0%;
	}
}

@keyframes expandBarhorizontal {
	0% {
		width: 0%;
	}
}

.animation-expandbar {
	-webkit-animation: expandBar 850ms linear;
	-moz-animation: expandBar 850ms linear;
	animation: expandBar 850ms linear;
}

.animation-expandbar-horizontal {
	-webkit-animation: expandBarhorizontal 850ms linear;
	-moz-animation: expandBarhorizontal 850ms linear;
	animation: expandBarhorizontal 850ms linear;
}

::-webkit-scrollbar-track {
	background-color: #ffffff05;
	border-radius: var(--border-radius);
}

::-webkit-scrollbar {
	height: 5px;
	width: 5px;
	background-color: var(--foregroud-color-2);
	margin: 10px 0;
}

body::-webkit-scrollbar {
	height: 4px;
	width: 12px;
	background-color: var(--foregroud-color-2);
	margin: 10px 0;
}

::-webkit-scrollbar-thumb {
	background-color: var(--main-color);
	border-radius: var(--border-radius);
}

::-webkit-scrollbar-track:hover {
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
	background-color: var(--foregroud-color-2);
}

::-webkit-scrollbar:hover {
	background-color: var(--foregroud-color-3);
}

::-webkit-scrollbar-thumb:hover {
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
	background-color: #888;
}

.blur {
	-webkit-filter: blur(5px);
	-moz-filter: blur(5px);
	-o-filter: blur(5px);
	-ms-filter: blur(5px);
	filter: blur(5px);
	transition: all .5s ease-out;
	-webkit-transition: all .5s ease-out;
	-moz-transition: all .5s ease-out;
	-o-transition: all .5s ease-out;
}

.row-body.blur,
.row-body-admin.blur {
	-webkit-filter: none;
	filter: none;
}

#acordeon,
#acordeon ul,
#acordeon li {
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
	font-weight: 400;
	text-decoration: none;
	position: relative;
}

.content-page #acordeon,
.content-page #acordeon ul,
.content-page #acordeon li {
	margin: 10px 0;
	border-radius: var(--border-radius);
}

#acordeon a {
	line-height: 1.3;
}

#acordeon {
	width: 100%;
}

#acordeon>ul>li>a {
	font-size: 25px;
	font-weight: 700;
	display: block;
	color: #fff;
	text-transform: uppercase;
	position: relative;
}

#acordeon>ul>li>a>span {
	background: -moz-linear-gradient(45deg, var(--main-color-transp-1) 0%, var(--main-color-transp-2) 40%, var(--main-color-transp-3) 80%);
	background: -webkit-linear-gradient(45deg, var(--main-color-transp-1) 0%, var(--main-color-transp-2) 40%, var(--main-color-transp-3) 80%);
	background: linear-gradient(45deg, var(--main-color-transp-1) 0%, var(--main-color-transp-2) 40%, var(--main-color-transp-3) 80%) !important;
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#33fe61", endColorstr="#00fe6137",GradientType=1 );
	padding: 15px 10px;
	display: block;
	font-size: 13px;
	font-weight: 300;
	border-radius: var(--border-radius-small) 0 0 var(--border-radius-small);
}

#acordeon>ul>li>a:hover {
	text-decoration: none;
}

#acordeon>ul>li.active {
	border-bottom: none;
}

#acordeon>ul>li.active>a {
	color: #fff;
}

#acordeon>ul>li.active>a span {
	background: #699ac3;
}

#acordeon span.cnt {
	position: absolute;
	top: 8px;
	right: 15px;
	padding: 0;
	margin: 0;
	background: none;
}

#acordeon ul ul {
	display: none;
}

#acordeon ul ul li {
	border: 1px solid #e0e0e0;
	padding: 20px;
	border-top: 0;
}

#acordeon ul ul a {
	padding: 10px;
	display: block;
	color: #3893D4;
	font-size: 13px;
}

#acordeon ul ul a:hover {
	color: #4382B2;
}

#acordeon ul ul li.odd {
	background: #f4f4f4;
	padding: 15px;
}

#acordeon ul ul li.even {
	background: #fdfdfd;
	word-break: break-word;
	padding: 15px;
}

.content-group .mobile-header,
.content-group .page-header-1,
#main-content .page-header-1,
#main-content .mobile-header,
.play-section .page-header-1,
.play-section .mobile-header {
	display: none;
}

.share-padding {
	padding: 10px;
	margin-bottom: 10px;
	background: #F1F1F1;
	border-radius: 3px;
	z-index: 1;
	position: relative;
}

.tooltip {
	position: relative;
	display: inline-block;
	cursor: pointer;
}

/* ---- TOOLTIP ---- */

.tooltip:after {
	content: attr(data-tooltip);
	position: absolute;
	pointer-events: none;
	z-index: 999;
	padding: 7px;
	min-width: 60px;
	background: #45474B;
	color: #fff;
	font-size: 13px;
	line-height: 1.35;
	white-space: pre;
	border-radius: 6px;
	box-shadow: 0 4px 16px #0003;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.22s cubic-bezier(.4,0,.2,1),
	transform 0.25s cubic-bezier(.4,0,.2,1),
	visibility 0.22s;
}

/* ---- TRIANGLE ---- */

.tooltip:before {
	content: "";
	position: absolute;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	z-index: 1000;
	border: 6px solid transparent;
	transition: opacity 0.22s cubic-bezier(.4,0,.2,1),
	transform 0.25s cubic-bezier(.4,0,.2,1),
	visibility 0.22s;
}

/* ---- TOP ---- */

.tooltip-top:after {
	word-break: auto-phrase;
	white-space: normal;
	text-align: center;
	left: 50%;
	bottom: 100%;
	transform: translateX(-50%) translateY(0px);
}

.tooltip-top:before {
	left: 50%;
	bottom: 100%;
	transform: translateX(-50%) translateY(13px);
	border-top-color: #45474B;
}

.tooltip-top:hover:after, .tooltip-top:focus:after,
.tooltip-top:hover:before, .tooltip-top:focus:before {
	opacity: 1;
	visibility: visible;
}

.tooltip-top:hover:after, .tooltip-top:focus:after {
	transform: translateX(-50%) translateY(-13px);
	/* Slide up */
}

.tooltip-top:hover:before, .tooltip-top:focus:before {
	transform: translateX(-50%) translateY(-3px);
	opacity: 1;
	visibility: visible;
}

/* ---- BOTTOM ---- */

.tooltip-bottom:after {
	word-break: auto-phrase;
	white-space: normal;
	text-align: center;
	left: 50%;
	top: 100%;
	transform: translateX(-50%) translateY(0px);
}

.tooltip-bottom:before {
	left: 50%;
	top: 100%;
	transform: translateX(-50%) translateY(-13px) rotate(180deg);
	border-top-color: #45474B;
}

.tooltip-bottom:hover:after, .tooltip-bottom:focus:after,
.tooltip-bottom:hover:before, .tooltip-bottom:focus:before {
	opacity: 1;
	visibility: visible;
}

.tooltip-bottom:hover:after, .tooltip-bottom:focus:after {
	transform: translateX(-50%) translateY(13px);
	/* Slide down */
}

.tooltip-bottom:hover:before, .tooltip-bottom:focus:before {
	transform: translateX(-50%) translateY(3px) rotate(180deg);
	opacity: 1;
	visibility: visible;
}

/* ---- LEFT ---- */

.tooltip-left:after {
	word-break: auto-phrase;
	white-space: normal;
	text-align: center;
	right: 100%;
	top: 50%;
	transform: translateY(-50%) translateX(0px);
}

.tooltip-left:before {
	right: 100%;
	top: 50%;
	transform: translateY(-50%) translateX(13px) rotate(0deg);
	border-left-color: #45474B;
}

.tooltip-left:hover:after, .tooltip-left:focus:after,
.tooltip-left:hover:before, .tooltip-left:focus:before {
	opacity: 1;
	visibility: visible;
}

.tooltip-left:hover:after, .tooltip-left:focus:after {
	transform: translateY(-50%) translateX(-13px);
	/* Slide left */
}

.tooltip-left:hover:before, .tooltip-left:focus:before {
	transform: translateY(-50%) translateX(-1px) rotate(0deg);
	opacity: 1;
	visibility: visible;
}

/* ---- RIGHT ---- */

.tooltip-right:after {
	word-break: auto-phrase;
	white-space: normal;
	text-align: center;
	left: 100%;
	top: 50%;
	transform: translateY(-50%) translateX(0px);
}

.tooltip-right:before {
	left: 100%;
	top: 50%;
	transform: translateY(-50%) translateX(-13px) rotate(0deg);
	border-right-color: #45474B;
}

.tooltip-right:hover:after, .tooltip-right:focus:after,
.tooltip-right:hover:before, .tooltip-right:focus:before {
	opacity: 1;
	visibility: visible;
}

.tooltip-right:hover:after, .tooltip-right:focus:after {
	transform: translateY(-50%) translateX(13px);
	/* Slide right */
}

.tooltip-right:hover:before, .tooltip-right:focus:before {
	transform: translateY(-50%) translateX(1px) rotate(0deg);
	opacity: 1;
	visibility: visible;
}

.slinky-menu-first {
	margin: 0 auto;
	position: relative;
}

.slinky-menu {
	width: inherit;
	overflow: hidden;
	position: fixed;
	z-index: 1;
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.slinky-menu>ul {
	left: 0;
	position: relative;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.slinky-menu li,
.slinky-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.slinky-menu ul {
	width: 100%;
}

.slinky-menu a {
	color: #818183;
	display: block;
	padding: 6px 20px;
	border-left: 4px solid transparent;
	text-decoration: none;
	font-family: "Segoe UI", "Trebuchet MS", "PT Sans", "Helvetica Neue", HelveticaNeue-Light, Helvetica, Arial, sans-serif;
	letter-spacing: .5px;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 30px;
	font-size: 12px;
	width: 100%;
	cursor: pointer;
	transition: all .4s ease-in-out;
}

.slinky-menu li ul {
	display: none;
	left: 100%;
	position: absolute;
	top: 0;
	overflow-x: auto;
	height: calc(100vh - 220px);
}

#trash-list {
	position: absolute;
}

#trash-list.active {
	display: block;
}

#trash-list::before,
#trash-list::after {
	content: "";
	position: sticky;
	left: 0;
	display: block;
	width: 100%;
	height: 30px;
	pointer-events: none;
	z-index: 999;
}

#trash-list::before {
	top: 0;
	margin-top: -30px;
	/*background: linear-gradient(to bottom, var(--foregroud-color-2) 0%, var(--foregroud-color-2) 15%, transparent 100%);*/
}

#trash-list::after {
	bottom: -2px;
	background: linear-gradient(to top, var(--foregroud-color-2) 0%, var(--foregroud-color-2) 15%, transparent 100%);
}

.slinky-menu li a p {
	display: inline-block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin: 0;
	position: absolute;
	max-width: 140px;
	margin-top: 5px;
}

.slinky-menu .history-title {
	background: #ffffff08;
	border-radius: var(--border-radius-small);
	color: #ffffff;
	cursor: context-menu;
	margin: 10px 15px;
	padding: 12px 20px;
}

.cat-group-title {
	min-height: 46px;
	margin: 0;
	padding: 0 48px 0 14px;
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	border: 1px solid transparent;
	border-radius: calc(var(--radius-main) - 6px);
	background: #ffffff05;
	color: #ffffff;
	font-weight: 600;
	text-transform: none;
	cursor: pointer;
	box-sizing: border-box;
	transition: all .2s ease-in-out;
}

.cat-group-title > img {
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	margin-right: 3px;
	opacity: .75;
	object-fit: contain;
}

.cat-group-title:hover {
	border-color: #ffffff15;
	background: #ffffff08;
}

.cat-group-action {
	width: 25px;
	height: 25px;
	font-size: var(--font-second-title);
	text-align: center;
	font-weight: 700;
	border-radius: 50%;
	overflow: hidden;
	line-height: 26px;
	background: #56586230;
	user-select: none;
	position: absolute;
	right: 10px;
	transform: rotate(180deg);
	transition: all .3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.cat-group.active .cat-group-action {
	transform: rotate(0deg);
	background: rgba(255,255,255,0.12);
}

.cat-group.active .cat-group-title {
	border-color: var(--main-color-transp);
	background: linear-gradient(90deg, var(--main-color-transp-1), #ffffff05 45%);
}

.cat-group {
	position: relative;
	width: 100%;
	margin: 0 0 10px;
	padding: 8px;
	float: none;
	border: 1px solid #ffffff10;
	border-radius: var(--radius-main);
	background: linear-gradient(180deg, #ffffff06, #ffffff02);
	box-sizing: border-box;
	transition: all .2s ease-in-out;
}

.cat-group:last-child {
	margin-bottom: 0;
}

.cat-group:hover,
.cat-group.active {
	border-color: #ffffff18;
}

.cat-group-content {
	padding-top: 8px;
}

.group-separator {
	margin: 10px 0;
	padding: 10px 12px;
	color: #6f7179;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .5px;
	cursor: default;
	box-sizing: border-box;
}

.slinky-menu .days-left {
	float: right;
	font-size: 10px;
	padding: 0 6px;
	margin-top: 6px;
	border-radius: var(--border-radius);
	line-height: 18px;
	color: #fff;
}

.slinky-menu .days-left.urgent {
	background-color: #be2b2b;
}

.slinky-menu .days-left.soon {
	background-color: #e58622;
}

.slinky-menu .days-left.later {
	background-color: #008fff;
}

.slinky-menu li a img {
	margin-right: 15px;
	top: 2px;
	position: relative;
}

.slinky-menu li.w-20 a img {
	margin-right: 15px;
	border-radius: 50%;
	top: 5px;
	position: relative;
}

.slinky-menu h2~a.back {
	left: 0;
	position: absolute;
	top: 0;
}

.slinky-menu h2 {
	font-size: 0.8rem;
	font-weight: 100;
	margin: 0;
	text-align: left;
	padding: 0.7em 3em;
}

.slinky-menu li {
	line-height: 1;
	display: flex;
	align-items: center;
}

.slinky-menu li .header {
    position: sticky;
    z-index: 1;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 15px rgb(27 28 31), 0 0 30px rgb(27 28 31);
}

.slinky-menu-active {
	border-left: 4px solid var(--main-color) !important;
	background: -moz-linear-gradient(45deg, var(--main-color-transp-1) 0%, var(--main-color-transp-2) 40%, var(--main-color-transp-3) 80%);
	/* FF3.6-15 */
	background: -webkit-linear-gradient(45deg, var(--main-color-transp-1) 0%, var(--main-color-transp-2) 40%, var(--main-color-transp-3) 80%);
	/* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(45deg, var(--main-color-transp-1) 0%, var(--main-color-transp-2) 40%, var(--main-color-transp-3) 80%);
	/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	color: var(--main-color) !important;
	text-shadow: 2px 2px 20px var(--main-color-transp);
	transition: all .4s ease-in-out;
}

.slinky-menu-active:hover,
.slinky-menu li a:hover,
.sidebar-links a:hover {
	border-left: 4px solid #ffffff !important;
	background: -moz-linear-gradient(45deg, #ffffff30 0%, #ffffff0d 40%, #ffffff00 80%);
	/* FF3.6-15 */
	background: -webkit-linear-gradient(45deg, #ffffff30 0%, #ffffff0d 40%, #ffffff00 80%);
	/* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(45deg, #ffffff30 0%, #ffffff0d 40%, #ffffff00 80%);
	/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	color: #ffffff !important;
	transition: background .4s ease-in-out, color .4s ease-in-out;
}

.slinky-menu-active:hover img,
.slinky-menu li a:hover img,
.sidebar-links a:hover img {
	filter: brightness(0) invert(1);
}

.slinky-menu-active a {
	color: #fff;
}

.slinky-menu a.next::after {
	content: "\276F"; /* ❯ */
	margin-left: 1em;
	float: right;
}

.pull-left,
.slider .arrow .btn-left,
.slider .dots a {
	float: left;
}

.slinky-menu a.back::before {
	content: "\276E"; /* ❮ */
	margin-right: 1em;
	float: left;
}

.nav-menu-container {
	position: fixed;
	width: 290px;
	top: 0px;
	height: -webkit-fill-available;
	background: var(--foregroud-color-2);
	transition: all 0.5s ease-in-out;
	z-index: 2;
}

.nav-fold {
	margin: 20px;
	text-align: center;
	box-sizing: border-box;
    overflow: hidden;
}

.nav-avatar {
	position: relative;
	width: clamp(60px, 55%, 130px);
	aspect-ratio: 1 / 1;
	margin: 0 auto;
}

.w-40 {
	display: block;
	width: 100%;
	height: 100%;
	padding: clamp(5px, 10%, 15px);
	border-radius: 50%;
	border: 1px solid #ffffff15;
	object-fit: cover;
	box-sizing: border-box;
}

/* Badge verified */
.pull-left-verified {
	position: absolute;
	right: 2%;
	bottom: 8%;
	width: clamp(5px, 20%, 20px);
	height: clamp(5px, 20%, 20px);
	margin: 0;
	z-index: 2;
}

/* Badge Pro */
.pull-left-pro {
	position: absolute;
	left: 2%;
	bottom: 8%;
	width: clamp(5px, 20%, 20px);
	height: clamp(5px, 20%, 20px);
	margin: 0;
	z-index: 2;
}

/* Variante si ton badge Pro doit être à droite */
.pull-left-pro-right {
	position: absolute;
	right: 2%;
	top: 8%;
	width: 20px;
	height: 20px;
	margin: 0;
	z-index: 2;
}

.pull-left-verified img,
.pull-left-pro img,
.pull-left-pro-right img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.clear-text {
	display: block;
	width: 100%;
	overflow: hidden;
	text-align: center;
	line-height: 25px;
	margin-top: 10px;
}

.text-ellipsis {
	display: block;
	width: 100%;
	min-width: 0;
	text-decoration: none;
	font-family: "Segoe UI", "Trebuchet MS", "PT Sans", "Helvetica Neue",
		HelveticaNeue-Light, Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ==========================================================================
   END NEWS MODULE
   ========================================================================== */

/* ==========================================================================
   START COOKIE BANNER
   ========================================================================== */

#cookie {
	position: relative;
	z-index: 1000;
	max-width: 400px;
	margin: 0 auto;
}

.cookie-popup {
	position: fixed;
	bottom: -300px;
	box-sizing: border-box;
	max-width: 400px;
	backdrop-filter: blur(10px);
	background: var(--foregroud-color-1-transp);
	border-radius: var(--radius-main);
	padding: 15px 25px 22px;
	transition: all 0.3s ease;
	box-shadow: rgba(0, 0, 0, 0.3) 5px 10px 24px 0px;
}

.cookie-popup.show {
	bottom: 1rem;
}

.cookie-popup .title-box {
	display: flex;
	align-items: center;
	column-gap: 15px;
	color: #ffffff;
	margin-bottom: 15px;
}

.cookie-popup .title-box i {
	font-size: 50px;
}

.cookie-popup .title-box h3 {
	font-size: 24px;
	font-weight: 500;
}

.cookie-popup .cookie-info {
	margin-bottom: 15px;
}

.cookie-popup .cookie-info p {
	font-weight: 400;
	white-space: normal;
}

.cookie-popup .cookie-info p a {
	color: #ffffff;
	text-decoration: none;
	cursor: pointer;
}

.cookie-popup .cookie-info p a:hover {
	text-decoration: underline;
}

.cookie-popup .buttons {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

#header-list-email,
#history-list-newsletter,
#edit-list-page-content,
#contact-list-email {
	list-style-type: none;
	padding: 0;
	margin: 0;
	width: 100%;
	position: relative;
}

.manage-content-edit {
	position: relative;
	float: left;
}

.manage-jobs-container .manage-content-edit {
	position: relative;
	float: left;
	padding-bottom: 0px;
}

#history-list-newsletter .manage-content-edit {
	position: relative;
	float: left;
	width: 100%;
	padding-top: 20px;
	padding-bottom: 0px;
}

#contact-list-email .manage-content-edit,
#edit-list-page-content .manage-content-edit {
	position: relative;
	float: left;
	width: 100%;
	padding-bottom: 0px;
}

#header-list-email li,
#history-list-newsletter li,
#edit-list-page-content li,
#contact-list-email li,
.job-list, .team-list {
	border-radius: var(--radius-main);
	border: 1px solid #ffffff10;
	position: relative;
	transition: all .3s ease-in-out;
	box-sizing: border-box;
	background: #ffffff05;
	float: left;
	width: 100%;
	color: #fff;
}

.team-list.owner {
	background: -moz-linear-gradient(45deg, var(--main-color-transp-1) 0%, var(--main-color-transp-2) 20%, #ffffff05 50%);
	background: -webkit-linear-gradient(45deg, var(--main-color-transp-1) 0%, var(--main-color-transp-2) 20%, #ffffff05 50%);
	background: linear-gradient(45deg, var(--main-color-transp-1) 0%, var(--main-color-transp-2) 20%, #ffffff05 50%);
}

#header-list-email li,
#history-list-newsletter li,
#edit-list-page-content li,
#contact-list-email li {
	margin: 10px 0 0 0;
}

.team-list,
.job-list {
	transition: opacity 0.4s ease, height 0.4s ease;
	margin-top: 10px;
}

.content-teams .team-list.pending,
.content-nodes .job-list.pending {
	border: 1px solid #46484b;
	background: linear-gradient(135deg, rgb(70 72 75 / 40%) 0%, rgba(80, 80, 80, 0.05) 40%, rgba(80, 80, 80, 0) 80%);
	transition: all .3s ease-in-out;
}

.content-teams .team-list.pending .manage-members-image,
.content-teams .team-list.pending .manage-cont1,
.content-nodes .job-list.pending .manage-users-image,
.content-nodes .job-list.pending .manage-cont1 {
	opacity: 0.3;
}

.job-list.closing {
	opacity: 0;
	height: 0 !important;
	transition: opacity 0.4s ease, height 0.4s ease;
}

.job-click {
	cursor: pointer;
}

.job-click-edit,
.group-click-edit {
	cursor: pointer;
}

.newsletter-progress-cell {
	min-width: 180px;
}

.newsletter-progress {
	width: 100%;
	height: 8px;
	position: relative;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 50px;
}

.newsletter-progress-bar {
	height: 100%;
	width: 0;
	border-radius: var(--radius-main);
	box-shadow: inset 0 2px 4px rgba(255, 204, 163, 0.5), inset 0 -2px 3px rgba(0, 0, 0, 0);
}

.newsletter-progress-text {
	margin-top: 6px;
	color: #ffffff;
	font-size: 12px;
	line-height: 16px;
}

.newsletter-progress-details {
	margin-top: 2px;
	color: #818183;
	font-size: 11px;
	line-height: 15px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.newsletter-status {
	text-transform: capitalize;
}

.action-header {
	Position: absolute;
	right: 15px;
}

#header-list-email li:hover,
#history-list-newsletter li:hover,
#edit-list-page-content li:hover,
#contact-list-email li:hover,
.job-list:hover, .team-list:hover {
	border: 1px solid var(--main-color-transp);
	background: -moz-linear-gradient(45deg, var(--main-color-transp-1) 0%, var(--main-color-transp-2) 40%, var(--main-color-transp-3) 80%);
	background: -webkit-linear-gradient(45deg, var(--main-color-transp-1) 0%, var(--main-color-transp-2) 40%, var(--main-color-transp-3) 80%);
	background: linear-gradient(45deg, var(--main-color-transp-1) 0%, var(--main-color-transp-2) 40%, var(--main-color-transp-3) 80%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#33fe6137", endColorstr="#00fe6137",GradientType=1 );
	transition: all .3s ease-in-out;
}

#header-list-email .manage-contact-container {
	display: flex;
	width: 100%;
	justify-content: space-between;
}

#header-list-email .manage-contact-container .deleterows input[type="submit"] {
	margin-right: 10px;
}

#header-list-email .manage-contact-container select {
	padding: 6px 8px;
	border-radius: var(--border-radius-large);
	color: #5d6168;
	background: #4a4a4a05;
	border: 1px solid #4a4a4a30;
}

#header-list-email .manage-contact-container a {
	cursor: pointer;
	border-radius: 50%;
	margin: 2px 0 0 4px;
	padding: 3px;
	border: solid 1px #959aae;
	transition: all .3s ease-in-out;
}

#header-list-email .manage-contact-container a:hover {
	box-shadow: 0 0 0 1em #959aae30 inset;
	transition: all .3s ease-in-out;
}

#header-list-email .manage-header,
#history-list-newsletter .manage-header,
#edit-list-page-content .manage-header,
#contact-list-email .manage-header {
	width: 100%;
	background: #f1f1f1;
	color: #000000;
	border-radius: 0 0 var(--radius-main) var(--radius-main);
	padding: 15px 10px;
	box-sizing: border-box;
}

#header-list-email p,
#contact-list-email p {
	margin: 0 0 0 40px;
	overflow: hidden;
	text-overflow: ellipsis;
}

#contact-list-email p {
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

#history-list-newsletter a p,
#edit-list-page-content a p {
	overflow: hidden;
	text-overflow: ellipsis;
	color: #fff;
	/* max-height: 32px */
}

#contact-list-email a p {
	margin: 0 0 0 40px;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #fff;
	max-height: 32px;
}

#header-list-email .manage-header-extra,
#history-list-newsletter .manage-header-extra,
#edit-list-page-content .manage-header-extra,
#contact-list-email .manage-header-extra {
	float: right;
	text-align: right;
	line-height: 37px;
	min-width: 120px;
}

#header-list-email .manage-cont,
#header-list-email .manage-header-cont,
#history-list-newsletter .manage-cont,
#history-list-newsletter .manage-header-cont,
#edit-list-page-content .manage-cont,
#edit-list-page-content .manage-header-cont,
#contact-list-email .manage-cont,
#contact-list-email .manage-header-cont {
	width: 20%;
	display: inline-flex;
	max-height: 45px;
	vertical-align: middle;
	flex: 1;
}

#header-list-email .manage-header-cont-image,
#history-list-newsletter .manage-header-cont-image,
#edit-list-page-content .manage-header-cont-image,
#contact-list-email .manage-header-cont-image {
	display: inline-flex;
	line-height: 37px;
	text-indent: 55px;
	flex: 1;
}

#header-list-email .manage-cont img,
#history-list-newsletter .manage-cont img,
#edit-list-page-content .manage-cont1 img,
#header-list-email .manage-cont1 img,
#edit-list-page-content .manage-cont1 img {
	border-radius: 50%;
	float: left;
	margin-right: 10px;
	margin-top: 8px;
}

#history-list-newsletter .manage-cont1 img {
	border-radius: 50%;
	float: left;
}

#header-list-email .manage-cont1,
#header-list-email .manage-header-cont1,
#history-list-newsletter .manage-cont1,
#history-list-newsletter .manage-header-cont1,
#edit-list-page-content .manage-cont1,
#edit-list-page-content .manage-header-cont1,
#contact-list-email .manage-cont1,
#contact-list-email .manage-header-cont1 {
	width: 50%;
	float: left;
	vertical-align: middle;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1;
}

#header-list-email .manage-cont2,
#header-list-email .manage-header-cont2,
#history-list-newsletter .manage-cont2,
#history-list-newsletter .manage-header-cont2,
#edit-list-page-content .manage-cont2,
#edit-list-page-content .manage-header-cont2,
#contact-list-email .manage-cont2,
#contact-list-email .manage-header-cont2 {
	display: inline-flex;
	width: 50%;
	line-height: 37px;
	flex: 1;
}

#header-list-email .manage-cont3,
#header-list-email .manage-header-cont3,
#history-list-newsletter .manage-cont3,
#history-list-newsletter .manage-header-cont3,
#edit-list-page-content .manage-cont3,
#edit-list-page-content .manage-header-cont3,
#contact-list-email .manage-cont3,
#contact-list-email .manage-header-cont3 {
	display: inline-flex;
	min-width: 20%;
	flex: 1;
}

#group-list-row {
	list-style-type: none;
	width: 100%;
	max-height: 303px;
	margin: 0;
	padding: 0 4px 0 0;
	display: flex;
	flex-direction: column;
	gap: 7px;
	overflow-x: hidden;
	overflow-y: auto;
	box-sizing: border-box;
}

#group-list-row li {
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 8px 9px 8px 11px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	border: 1px solid #ffffff08;
	border-radius: calc(var(--radius-main) - 6px);
	background: linear-gradient(180deg, #ffffff07, #ffffff04);
	box-sizing: border-box;
	cursor: pointer;
	transform: none;
	transition: background .2s ease-in-out, border-color .2s ease-in-out;
}

#group-list-row li a {
	min-width: 0;
	margin: 0;
	padding: 0;
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	gap: 10px;
	color: #ffffff;
	font-weight: 500;
	line-height: 1.25;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#group-list-row li a .folder-30 {
	flex: 0 0 30px;
	float: none;
}

#group-list-row li img {
	width: 36px;
	height: 36px;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}

#group-list-row li.header {
	background: #ffffff08;
	cursor: default;
}

#group-list-row li:hover:not(.header) {
	border-color: var(--main-color-transp);
	background: linear-gradient(90deg, var(--main-color-transp-1), #ffffff07 72%);
	transform: none;
}

#group-list-row li.group-suggested {
	border-color: #ffffff06;
	background: #ffffff03;
}

#group-list-row li.group-suggested:hover {
	border-color: var(--main-color-transp);
	background: linear-gradient(90deg, var(--main-color-transp-1), #ffffff06 72%);
}

#group-list-row > .group-separator {
	width: 100%;
	min-height: auto;
	margin: 4px 0 0;
	padding: 7px 4px 5px;
	display: flex;
	align-items: center;
	gap: 9px;
	color: #5d6168;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .5px;
	cursor: default;
	box-sizing: border-box;
}

#group-list-row > .group-separator::after {
	content: "";
	height: 1px;
	flex: 1;
	background: #ffffff0d;
}

#group-list-row li .adding_btn {
	width: 30px;
	height: 30px;
	min-width: 30px;
	min-height: 30px;
	margin: 0;
	padding: 0;
	flex: 0 0 30px;
	float: none;
	border: 1px solid var(--main-color);
	border-radius: 50%;
	background-color: var(--main-color-transp);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 18px 18px;
	box-sizing: border-box;
	opacity: .85;
	transform: none;
	transition: background-color .2s ease-in-out, border-color .2s ease-in-out, opacity .2s ease-in-out;
}

#group-list-row li:hover .adding_btn,
#group-list-row li .adding_btn:hover {
	border-color: var(--main-color-transp);
	background-color: var(--main-color-transp-1);
	background-size: 18px 18px;
	opacity: 1;
	transform: none;
}

.page-input-newsletter > .list-general,
.page-input-newsletter > .list-email {
	width: 100%;
	padding: 5px;
	background: #ffffff03;
	border: 1px solid #ffffff0a;
	border-radius: calc(var(--radius-main) - 5px);
	box-sizing: border-box;
}

.page-input-newsletter #contact-list-publicity,
.page-input-newsletter #mailing-list-publicity {
	width: 100%;
	max-height: 390px;
	margin: 0;
	padding: 0;
	list-style: none;
	position: relative;
	overflow-x: hidden;
	overflow-y: auto;
	scrollbar-gutter: stable;
	box-sizing: border-box;
}

.page-input-newsletter #contact-list-publicity li,
.page-input-newsletter #mailing-list-publicity li {
	width: 100%;
	min-height: 58px;
	margin: 0 0 5px;
	padding: 8px 54px 8px 10px;
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	color: #ffffff;
	font-weight: 400;
	background: var(--foregroud-color-2);
	border: 1px solid transparent;
	border-radius: calc(var(--radius-main) - 6px);
	box-sizing: border-box;
	cursor: pointer;
	box-shadow: none;
	transform: none;
	transition: background-color .2s ease-in-out, border-color .2s ease-in-out;
}

.page-input-newsletter #contact-list-publicity li:last-child,
.page-input-newsletter #mailing-list-publicity li:last-child {
	margin-bottom: 0;
}

.page-input-newsletter #contact-list-publicity li:hover:not(.header),
.page-input-newsletter #mailing-list-publicity li:hover:not(.header) {
	margin-left: 0;
	margin-right: 0;
	padding: 8px 54px 8px 10px;
	background: linear-gradient(90deg, var(--main-color-transp-1), #ffffff07 72%);
	border-color: var(--main-color-transp);
	box-shadow: none;
	transform: none;
}

.page-input-newsletter #contact-list-publicity li a,
.page-input-newsletter #mailing-list-publicity li a {
	color: #ffffff;
	font-weight: 500;
	text-decoration: none;
	transform: none;
}

.page-input-newsletter #contact-list-publicity li .col1,
.page-input-newsletter #contact-list-publicity li .col2,
.page-input-newsletter #contact-list-publicity li .col3,
.page-input-newsletter #mailing-list-publicity li .col1,
.page-input-newsletter #mailing-list-publicity li .col2,
.page-input-newsletter #mailing-list-publicity li .col3 {
	min-width: 0;
	width: auto;
	position: static;
	display: flex;
	align-items: center;
	line-height: 20px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	box-sizing: border-box;
}

.page-input-newsletter #contact-list-publicity li .col1 {
	flex: 1 1 auto;
	gap: 11px;
}

.page-input-newsletter #contact-list-publicity li .col3 {
	flex: 0 0 110px;
	justify-content: flex-end;
	color: #818183;
}

.page-input-newsletter #mailing-list-publicity li .col1 {
	flex: 0 1 28%;
}

.page-input-newsletter #mailing-list-publicity li .col2 {
	flex: 1 1 auto;
	color: #b5b5b8;
}

.page-input-newsletter #mailing-list-publicity li .col3 {
	flex: 0 0 100px;
	justify-content: flex-end;
	color: #818183;
}

.page-input-newsletter #contact-list-publicity li .col1 a,
.page-input-newsletter #contact-list-publicity li .col2 a,
.page-input-newsletter #contact-list-publicity li .col3 a,
.page-input-newsletter #mailing-list-publicity li .col1 a,
.page-input-newsletter #mailing-list-publicity li .col2 a,
.page-input-newsletter #mailing-list-publicity li .col3 a {
	min-width: 0;
	width: 100%;
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.page-input-newsletter #contact-list-publicity li .col3 a,
.page-input-newsletter #mailing-list-publicity li .col2 a,
.page-input-newsletter #mailing-list-publicity li .col3 a {
	color: inherit;
	font-weight: 400;
}

.page-input-newsletter #contact-list-publicity li .col1 img {
	width: 40px;
	height: 40px;
	min-width: 40px;
	min-height: 40px;
	flex: 0 0 40px;
	object-fit: cover;
	border: 1px solid #ffffff10;
	border-radius: 50%;
	background: var(--foregroud-color-1);
	box-sizing: border-box;
}

.page-input-newsletter #contact-list-publicity li .adding_btn,
.page-input-newsletter #mailing-list-publicity li .adding_email_btn {
	width: 30px;
	height: 30px;
	min-width: 30px;
	min-height: 30px;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 50%;
	right: 12px;
	float: none;
	flex: 0 0 30px;
	border: 1px solid var(--main-color);
	border-radius: 50%;
	background-color: var(--main-color-transp);
	background-image: url("../images/icons/add.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 18px 18px;
	box-sizing: border-box;
	opacity: .85;
	transform: translateY(-50%);
	transition: background-color .2s ease-in-out, border-color .2s ease-in-out, opacity .2s ease-in-out;
}

.page-input-newsletter #contact-list-publicity li:hover .adding_btn,
.page-input-newsletter #contact-list-publicity li .adding_btn:hover,
.page-input-newsletter #mailing-list-publicity li:hover .adding_email_btn,
.page-input-newsletter #mailing-list-publicity li .adding_email_btn:hover {
	width: 30px;
	height: 30px;
	min-width: 30px;
	min-height: 30px;
	top: 50%;
	right: 12px;
	margin: 0;
	padding: 0;
	border-color: var(--main-color-transp);
	background-color: var(--main-color-transp-1);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 18px 18px;
	opacity: 1;
	transform: translateY(-50%);
}

.page-input-newsletter #contact-list-publicity li.header,
.page-input-newsletter #mailing-list-publicity li.header {
	background: #ffffff08;
	border-color: #ffffff08;
	cursor: default;
}

@media only screen and (max-width: 768px) {
	.page-input-newsletter {
		padding: 12px;
	}

	.page-input-newsletter .list-menu {
		min-height: 0;
		flex-wrap: wrap;
	}

	.page-input-newsletter .list-menu > .list-menu-item {
		flex: 1 1 calc(50% - 3px);
	}

	.page-input-newsletter .list-menu > .list-general,
	.page-input-newsletter .list-menu > .list-email {
		width: 100%;
		margin-left: 0;
	}

	.page-input-newsletter .list-menu .contact-menu-item.panel-btn,
	.page-input-newsletter .list-menu .contact-menu-item.panel-btn a {
		width: 100%;
	}

	.page-input-newsletter #contact-list-publicity li,
	.page-input-newsletter #mailing-list-publicity li,
	.page-input-newsletter #contact-list-publicity li:hover:not(.header),
	.page-input-newsletter #mailing-list-publicity li:hover:not(.header) {
		gap: 9px;
		padding: 8px 48px 8px 8px;
	}

	.page-input-newsletter #contact-list-publicity li .col3,
	.page-input-newsletter #mailing-list-publicity li .col3 {
		display: none;
	}

	.page-input-newsletter #mailing-list-publicity li .col1 {
		flex: 0 1 34%;
	}

	.page-input-newsletter #contact-list-publicity li .adding_btn,
	.page-input-newsletter #mailing-list-publicity li .adding_email_btn,
	.page-input-newsletter #contact-list-publicity li:hover .adding_btn,
	.page-input-newsletter #contact-list-publicity li .adding_btn:hover,
	.page-input-newsletter #mailing-list-publicity li:hover .adding_email_btn,
	.page-input-newsletter #mailing-list-publicity li .adding_email_btn:hover {
		right: 9px;
	}
}

.state-newsletter-on {
	padding: 0 10px;
	background: #009b4e;
	border-radius: 10px;
	line-height: 20px;
	color: #fff;
	display: inline-block;
}

.state-newsletter-off {
	padding: 0 10px;
	background: #be2b2b;
	border-radius: 10px;
	line-height: 20px;
	color: #fff;
	display: inline-block;
}

.import_upload {
	padding: 20px 0;
	background: url("../images/error/email-list.webp") top no-repeat;
	background-size: auto 230px;
	width: 100%;
}

.newsletter-landing {
	padding: 40px 0;
	border-radius: var(--radius-main) var(--radius-main) 0 0;
	background: linear-gradient(135deg, var(--main-color-transp) 0%, var(--second-color-transp) 100%), url("../images/welcome/pro-coupon.webp") no-repeat center;
	text-align: center;
	background-size: cover;
}

.newsletter-landing-flex {
	padding: 40px 0;
	border-radius: var(--radius-main);
	background: linear-gradient(135deg, var(--main-color-transp) 0%, var(--second-color-transp) 100%), url("../images/welcome/pro-coupon.webp") no-repeat center;
	text-align: center;
	background-size: cover;
	display: flex;
}

.newsletter-landing-flex .newsletter-landing-50 {
	width: 50%;
}

.deleterows input[type="submit"] {
	color: var(--main-color);
	background: transparent;
	text-align: center;
	border-radius: var(--border-radius-extra-large);
	cursor: pointer;
	padding: 10px !important;
	display: inline-block;
	position: relative;
	outline: none;
	transition: all .5s ease-in-out;
}

.deleterows input[type="submit"]:hover {
	color: #fff;
	background: var(--main-color);
	transition: all .5s ease-in-out;
}

.list-menu {
	padding: 0 10px;
	margin-top: 10px;
	border-radius: var(--border-radius-small) var(--border-radius-small) 0 0;
	overflow: auto;
	background: #1b1b1e;
	display: flex;
	position: relative;
}

.list-menu-item,
.invit-menu-item,
.team-menu-item,
.stats-menu-item {
	color: #5d6168;
	padding: 15px 3px;
	float: left;
	cursor: pointer;
	margin-right: 5px;
	font-size: var(--font-size-main);
	white-space: nowrap;
	border-bottom: 3px solid transparent;
	transition: all .3s cubic-bezier(.25, .8, .25, 1);
}

.list-menu-item:hover,
.list-menu-item-active,
.invit-menu-item:hover,
.invit-menu-item-active,
.team-menu-item:hover,
.team-menu-item-active,
.stats-menu-item:hover,
.stats-menu-item-active {
	color: var(--main-color);
	padding: 15px 3px;
	border-bottom: 3px solid var(--main-color);
	cursor: pointer;
	transition: all .3s cubic-bezier(.25, .8, .25, 1);
}

/* Newsletter contact picker tabs */

.page-input-newsletter .list-menu {
	width: 100%;
	min-height: 48px;
	margin: 12px 0 10px;
	padding: 5px;
	display: flex;
	align-items: center;
	gap: 5px;
	overflow: visible;
	color: #818183;
	background: var(--foregroud-color-2);
	border: 1px solid #ffffff0d;
	border-radius: calc(var(--radius-main) - 5px);
	box-sizing: border-box;
}

.page-input-newsletter .list-menu > .list-menu-item {
	min-height: 36px;
	margin: 0;
	padding: 0 13px;
	display: flex;
	align-items: center;
	justify-content: center;
	float: none;
	color: #818183;
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	background: transparent;
	border: 1px solid transparent;
	border-radius: calc(var(--radius-main) - 8px);
	box-sizing: border-box;
	box-shadow: none;
	transform: none;
	transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out;
}

.page-input-newsletter .list-menu > .list-menu-item:hover {
	margin: 0;
	padding: 0 13px;
	color: #ffffff;
	background: #ffffff08;
	border: 1px solid #ffffff0d;
	transform: none;
}

.page-input-newsletter .list-menu > .list-menu-item-active,
.page-input-newsletter .list-menu > .list-menu-item-active:hover {
	margin: 0;
	padding: 0 13px;
	color: #ffffff;
	background: linear-gradient(135deg, var(--main-color), var(--second-color));
	border: 1px solid transparent;
	box-shadow: 0 6px 18px #00000020;
	transform: none;
}

.page-input-newsletter .list-menu > .list-general,
.page-input-newsletter .list-menu > .list-email {
	min-width: 0;
	margin-left: auto;
	align-items: center;
	justify-content: flex-end;
	flex: 0 0 auto;
}

.page-input-newsletter .list-menu .contact-menu-item.panel-btn {
	min-height: 36px;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	float: none;
	color: var(--main-color);
	background: var(--main-color-transp-2);
	border: 1px solid var(--main-color-transp-1);
	border-radius: calc(var(--radius-main) - 8px);
	box-sizing: border-box;
	transform: none;
	transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out;
}

.page-input-newsletter .list-menu .contact-menu-item.panel-btn:hover,
.page-input-newsletter .list-menu .contact-menu-item.panel-btn:active {
	min-height: 36px;
	margin: 0;
	padding: 0;
	color: #ffffff;
	background: var(--main-color-transp-1);
	border: 1px solid var(--main-color-transp);
	transform: none;
}

.page-input-newsletter .list-menu .contact-menu-item.panel-btn a {
	height: 34px;
	padding: 0 13px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: inherit;
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	box-sizing: border-box;
	transform: none;
}

#job-list-newsletter,
#job-list-newsletter0,
#job-list-newsletter1,
#job-list-newsletter2,
#job-list-newsletter3 {
	list-style-type: none;
	padding: 0;
	position: relative;
	width: 100%;
	display: block;
}

#job-list-newsletter li,
#job-list-newsletter0 li,
#job-list-newsletter3 li,
#job-list-newsletter1 li .item-selector,
#job-list-newsletter2 li .item-selector {
	width: 100%;
	height: 100px;
	display: block;
	margin-bottom: 20px;
	padding: 10px;
	border-radius: var(--radius-main);
	border: 1px solid #ffffff10;
	position: relative;
	transition: all .3s ease-in-out;
	box-sizing: border-box;
	background: #ffffff05;
}

#job-list-newsletter li:hover,
#job-list-newsletter0 li:hover,
#job-list-newsletter3 li:hover,
#job-list-newsletter1 li .item-selector:hover,
#job-list-newsletter2 li .item-selector:hover {
	border: 1px solid var(--main-color-transp);
	background: -moz-linear-gradient(-45deg, rgba(254,97,55,0.3) 0%, rgba(254,97,55,0.05) 40%, rgba(254,97,55,0) 80%);
	/* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, rgba(254,97,55,0.3) 0%, rgba(254,97,55,0.05) 40%, rgba(254,97,55,0) 80%);
	/* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, rgba(254,97,55,0.3) 0%, rgba(254,97,55,0.05) 40%, rgba(254,97,55,0) 80%);
	/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#33fe6137", endColorstr="#00fe6137",GradientType=1 );
	/* IE6-9 fallback on horizontal gradient */
	transition: all .3s ease-in-out;
}

#job-list-newsletter li img,
#job-list-newsletter0 li img,
#job-list-newsletter3 li img,
#job-list-newsletter1 li .item-selector img,
#job-list-newsletter2 li .item-selector img {
	border-radius: var(--border-radius-small);
	min-height: -webkit-fill-available;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	position: absolute;
}

#job-list-newsletter li .title,
#job-list-newsletter0 li .title,
#job-list-newsletter0 li .title1,
#job-list-newsletter3 li .title,
#job-list-newsletter3 li .title1,
#job-list-newsletter1 li .item-selector .title,
#job-list-newsletter1 li .item-selector .title1,
#job-list-newsletter2 li .item-selector .title,
#job-list-newsletter2 li .item-selector .title1 {
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	text-transform: uppercase;
	font-size: 18px;
	color: #5d6168;
	margin-left: 90px;
}

#job-list-newsletter li .title1 {
	font-weight: 700;
	white-space: pre-wrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-transform: uppercase;
	font-size: 18px;
	color: #5d6168;
	margin-left: 90px;
}

.private,
#job-list-newsletter2 .no-active-group .item-selector:hover,
#job-list-newsletter1 .no-active-job .item-selector:hover,
#job-list-newsletter1 .no-active-software .item-selector:hover,
#job-list-newsletter1 .no-active-report-template .item-selector:hover,
#job-list-newsletter1 .no-active-news .item-selector:hover {
	border: 1px solid #46484b !important;
	background: linear-gradient(135deg, rgb(70 72 75 / 40%) 0%, rgba(80, 80, 80, 0.05) 40%, rgba(80, 80, 80, 0) 80%);
	transition: all .3s ease-in-out;
}

.private .state-demo-on,
#job-list-newsletter2 .no-active-group .item-selector .tag,
#job-list-newsletter1 .no-active-job .item-selector .tag {
	background: #46484b;
	opacity: .3;
	transition: all .3s ease-in-out;
}

.private .manage-cont1,
.private .manage-jobs-image,
#job-list-newsletter2 .no-active-group .item-selector img,
#job-list-newsletter1 .no-active-job .item-selector img,
#job-list-newsletter1 .no-active-software .item-selector .windows-img-80,
#job-list-newsletter1 .no-active-software .item-selector .linux-img-80,
#job-list-newsletter1 .no-active-software .item-selector .mac-img-80,
#job-list-newsletter1 .no-active-report-template .item-selector .report-template-list-icon,
#job-list-newsletter1 .no-active-news .item-selector img,
#job-list-newsletter2 .no-active-group .item-selector p,
#job-list-newsletter1 .no-active-job .item-selector p,
#job-list-newsletter1 .no-active-software .item-selector p,
#job-list-newsletter1 .no-active-report-template .item-selector p,
#job-list-newsletter1 .no-active-news .item-selector p,
#job-list-newsletter2 .no-active-group .item-selector .sub-title,
#job-list-newsletter1 .no-active-job .item-selector .sub-title,
#job-list-newsletter1 .no-active-software .item-selector .sub-title,
#job-list-newsletter1 .no-active-report-template .item-selector .sub-title,
#job-list-newsletter1 .no-active-news .item-selector .sub-title {
	opacity: .3;
	transition: all .3s ease-in-out;
}

#job-list-newsletter2 li .title1 {
	margin-top: 0;
}

#job-list-newsletter li .sub-title,
#job-list-newsletter0 li .sub-title,
#job-list-newsletter3 li .sub-title,
#job-list-newsletter1 li .item-selector .sub-title,
#job-list-newsletter2 li .item-selector .sub-title {
	white-space: pre-wrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #fff;
	opacity: .8;
	margin-left: 90px;
	margin-right: 20%;
	transition: all .3s ease-in-out;
}

#job-list-newsletter li .tag,
#job-list-newsletter0 li .tag,
#job-list-newsletter1 li .item-selector .tag,
#job-list-newsletter2 li .item-selector .tag {
	display: inline-block;
	background: #008fff;
	border-radius: var(--radius-main);
	padding: 1px 5px;
	z-index: 5;
	position: relative;
	margin-left: 10px;
	color: #fff;
}

#job-list-newsletter li .tag a,
#job-list-newsletter0 li .tag a,
#job-list-newsletter1 li .item-selector .tag a,
#job-list-newsletter2 li .item-selector .tag a {
	color: #fff;
}

#job-list-newsletter p,
#job-list-newsletter0 p,
#job-list-newsletter3 p,
#job-list-newsletter1 .item-selector p,
#job-list-newsletter2 .item-selector p {
	margin: 0;
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: all .3s ease-in-out;
}

#job-list-newsletter li .newsletter-header-extra,
#job-list-newsletter0 li .newsletter-header-extra,
#job-list-newsletter3 li .newsletter-header-extra,
#job-list-newsletter1 li .item-selector .newsletter-header-extra,
#job-list-newsletter2 li .newsletter-header-extra {
	font-weight: 400;
	cursor: pointer;
	text-decoration: none;
	color: #008fff;
	text-align: center;
	padding: 3px 8px;
	right: 10px;
	bottom: 37px;
	position: absolute;
}

.stats-content {
	opacity: 0;
	height: 0;
	background: #ffffff05;
	padding: 0 20px;
	border-radius: var(--radius-main);
	transition: all .2s ease-in-out;
	position: relative;
}

.opennedstats .stats-content {
	opacity: 100;
	height: 550px;
	margin-bottom: 20px;
	transition: all .6s ease-in-out;
}

.page-edit-content {
	width: 100%;
	position: relative;
}

.stats-container {
	padding: 0;
}

.page-edit-container {
	margin-top: 20px;
	position: relative;
	float: left;
	display: block;
	width: 100%;
}

.newsletter-header-extra a {
	border-radius: var(--radius-main);
	border: 1px solid #fff;
	background: none;
	padding: 6px 12px;
	color: #fff;
	transition: all .3s ease-in-out;
}

.newsletter-header-extra a:hover {
	border: 1px solid #fff;
	box-shadow: 0 0 0 2em #fff inset;
	color: #000;
	transition: all .3s ease-in-out;
}

.newsletter-title {
	font-size: 30px;
	text-align: center;
}

.newsletter-description {
	font-size: 12px;
	text-align: center;
	padding-bottom: 20px;
}

.page-input-content-newsletter {
	width: 100%;
	position: relative;
	box-sizing: border-box;
	padding-top: 160px;
	display: inline-flex;
}

.page-input-sub-newsletter {
	color: #5d6168;
	font-size: 12px;
	padding-top: 4px;
	text-align: center;
}

.button-normal-newsletter {
	border: 2px solid var(--main-color-transp);
	background: #fff;
	color: #fff;
	border-radius: 25px;
	overflow: auto;
	padding: 6px 10px;
	cursor: pointer;
	text-decoration: none;
	display: inline;
}

.csvfile-btn {
	width: 250px;
	box-sizing: border-box;
	text-align: center;
	cursor: pointer;
	margin: auto;
	height: 50px;
	padding: 11px 0;
	overflow: hidden;
	font-size: 20px;
	background: linear-gradient(135deg, var(--main-color-transp) 0%, var(--second-color-transp) 100%);
	transition: all .3s ease-in-out;
}

.csvfile-btn input {
	width: 250px;
	position: relative;
	height: 50px;
	top: -40px;
	opacity: 0;
	cursor: pointer;
}

.csvfile-btn input::-webkit-file-upload-button {
	cursor: pointer;
}

.csvfile-btn-selected {
	border: 2px solid var(--main-color);
	background: linear-gradient(135deg, var(--main-color-transp) 0%, var(--second-color-transp) 100%);
	transition: all .3s ease-in-out;
	color: #FFF;
}

.csvfile-btn-selected:hover,
.csvfile-btn:hover {
	border: 2px solid var(--main-color);
	color: #FFF;
	box-shadow: 0 0 0 3em var(--main-color) inset;
	transform: scale(1.05);
	transition: all .3s cubic-bezier(.25, .8, .25, 1);
}

.csvfile-btn-text {
	padding: 0 5px;
	width: 100%;
	text-align: center;
	box-sizing: border-box;
	top: -3px;
	position: relative;
}

.loader {
	position: relative;
	margin: 0 auto;
	width: 100px;
}

.loader:before {
	content: "";
	display: block;
	padding-top: 100%;
}

.circular {
	-webkit-animation: rotate 2s linear infinite;
	animation: rotate 2s linear infinite;
	height: 100%;
	-webkit-transform-origin: center center;
	-ms-transform-origin: center center;
	transform-origin: center center;
	width: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}

.path {
	stroke-dasharray: 1, 200;
	stroke-dashoffset: 0;
	-webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
	animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
	stroke-linecap: round;
}

@-webkit-keyframes rotate {
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@keyframes rotate {
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@-webkit-keyframes dash {
	0% {
		stroke-dasharray: 1, 200;
		stroke-dashoffset: 0;
	}

	50% {
		stroke-dasharray: 89, 200;
		stroke-dashoffset: -35;
	}

	100% {
		stroke-dasharray: 89, 200;
		stroke-dashoffset: -124;
	}
}

@keyframes dash {
	0% {
		stroke-dasharray: 1, 200;
		stroke-dashoffset: 0;
	}

	50% {
		stroke-dasharray: 89, 200;
		stroke-dashoffset: -35;
	}

	100% {
		stroke-dasharray: 89, 200;
		stroke-dashoffset: -124;
	}
}

@-webkit-keyframes color {
	100%,
	0% {
		stroke: var(--main-color);
	}
}

@keyframes color {
	100%,
	0% {
		stroke: var(--main-color);
	}
}

/* Supprime le highlight bleu/gris au clic */

input[type="radio"] {
	-webkit-tap-highlight-color: transparent;
}

/* Supprime le focus outline */

input[type="radio"]:focus,
input[type="radio"]:active {
	outline: none !important;
	box-shadow: none !important;
}

/* Supprime l'effet actif (clic maintenu) */

input[type="radio"]:active {
	background: transparent !important;
}

.switch-on,
.switch-off {
	padding: 0px !important;
	height: 45px;
	width: 60px !important;
	position: relative;
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	background: transparent !important;
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	margin: 0px -5px 0 0 !important;
	-webkit-tap-highlight-color: transparent;
	cursor: pointer;
}

.switch-news-on,
.switch-news-off {
	padding: 0px !important;
	height: 45px;
	width: 80px !important;
	position: relative;
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	background: transparent !important;
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	margin: 0px -5px 0 0 !important;
	-webkit-tap-highlight-color: transparent;
	cursor: pointer;
}

.switch-on:focus,
.switch-off:focus,
.switch-news-on:focus,
.switch-news-off:focus,
.switch-on:active,
.switch-off:active,
.switch-news-on:active,
.switch-news-off:active,
.switch-on:focus-visible,
.switch-off:focus-visible,
.switch-news-on:focus-visible,
.switch-news-off:focus-visible {
	outline: none !important;
	border: none !important;
	box-shadow: none !important;
}

.switch-off:after,
.switch-news-off:after {
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	content: attr(data-unchecked);
	position: absolute;
	z-index: 5;
	text-transform: uppercase;
	text-align: center;
	border-radius: 0 6px 6px 0;
	padding: 10px 15px;
	background: #ffffff05;
	border: 1px solid #ffffff08;
	color: #a5a5a5;
	box-shadow: inset 0 0 15px 0 #0c0d0fa8;
	background-clip: padding-box !important;
	transform: scale(1) translateZ(0);
	backface-visibility: hidden;
	transition: background 0.25s ease,
	border-color 0.25s ease,
	color 0.25s ease,
	box-shadow 0.25s ease,
	opacity 0.25s ease,
	transform 0.2s ease;
}

.switch-on:before,
.switch-news-on:before {
	content: attr(data-checked);
	position: absolute;
	z-index: 5;
	text-transform: uppercase;
	text-align: center;
	border-radius: 6px 0 0 6px;
	padding: 10px 18px;
	background: #ffffff05;
	border: 1px solid #ffffff08;
	color: #a5a5a5;
	box-shadow: inset 0 0 15px 0 #0c0d0fa8;
	background-clip: padding-box !important;
	transform: scale(1) translateZ(0);
	backface-visibility: hidden;
	transition: background 0.25s ease,
	border-color 0.25s ease,
	color 0.25s ease,
	box-shadow 0.25s ease,
	opacity 0.25s ease,
	transform 0.2s ease;
}

.switch-on[type="radio"]:checked:before,
.switch-off[type="radio"]:checked:after,
.switch-news-on[type="radio"]:checked:before,
.switch-news-off[type="radio"]:checked:after {
	background: linear-gradient(
	135deg,
	var(--main-color) 0%,
	var(--second-color) 100%
	);
	border: 1px solid var(--main-color);
	color: #fff;
	outline: none !important;
	box-shadow: none !important;
	transform: translateY(-1px) scale(1.02) translateZ(0);
	backface-visibility: hidden;
}

.switch-on[type="radio"]:disabled:before,
.switch-off[type="radio"]:disabled:after,
.switch-news-on[type="radio"]:disabled:before,
.switch-news-off[type="radio"]:disabled:after {
	background: #ffffff10;
	border: 1px solid #ffffff10;
	color: #777;
	cursor: not-allowed;
	opacity: 0.6;
}

.col {
	position: relative;
	float: left;
	padding: 15px 15px 0px 15px;
	width: 100%;
	min-height: 1px;
	flex-direction: column;
	box-sizing: border-box;
}

.col1 {
	flex: 1;
	gap: 10px;
}

.col2 {
	flex: 1;
	justify-content: flex-start;
}

.col3 {
	flex: 1;
	justify-content: flex-start;
}

/* COLONNES ALIGNÉES COMME UN TABLEAU */

.col1, .col2, .col3 {
	display: flex;
	align-items: center;
	height: 100%;
}

.col .col {
	display: flex;
}

@media only screen and (min-width: 200px) {
	.col--sm-1\/2 {
		width: 50%;
	}

	.gallery-container .col--sm-1\/2 {
		width: calc((100% - 15px) / 2);
	}
}

@media only screen and (min-width: 768px) {
	.gallery-container .col--lg-1\/3 {
		width: calc((100% - 45px) / 3);
	}

	.gallery-container .col--lg-1\/4 {
		width: calc((100% - 45px) / 4);
	}

	.gallery-container .col--lg-1\/5 {
		width: calc((100% - 45px) / 5);
	}
}

@media only screen and (min-width: 1200px) {
	.gallery-container .col--lg-1\/3 {
		width: calc((100% - 45px) / 3);
	}

	.gallery-container .col--lg-1\/4 {
		width: calc((100% - 45px) / 4);
	}

	.gallery-container .col--lg-1\/5 {
		width: calc((100% - 45px) / 5);
	}

	.col--lg-1\/3 {
		width: 33.3%;
		box-sizing: border-box;
	}

	.col--lg-1\/4 {
		width: 25%;
		box-sizing: border-box;
	}

	.col--lg-1\/5 {
		width: 20%;
		box-sizing: border-box;
	}

	.col--lg-1\/6 {
		width: 16.666%;
		box-sizing: border-box;
	}
}

.content-sample .main,
.content-job .main,
.content-group .main {
	position: relative;
	margin: 0 auto;
	padding: 0;
	width: 100%;
	max-width: 450px;
	background-color: #fff;
}

.content-sample .main,
.content-job .main,
.content-group .main {
	width: 450px;
}

.content-sample .main,
.content-job .main,
.content-group .main {
	float: right;
	min-height: 100vh;
}

.content-sample .artwork,
.content-job .artwork,
.content-group .artwork {
	position: absolute;
	top: 0;
	padding: 0;
	width: 100%;
	height: 74px;
	background-color: #1a1c27;
}

.page-img-30 {
	min-width: 40px;
	min-height: 40px;
	background: url("../images/icons/page.png") no-repeat center center;
	background-size: 40px 40px;
	float: left;
	position: relative;
}

.layout-img-30 {
	min-width: 40px;
	min-height: 40px;
	background: url("../images/icons/layout.png") no-repeat center center;
	background-size: 40px 40px;
	float: left;
	position: relative;
}

.admin-img-30 {
	min-width: 40px;
	min-height: 40px;
	background: url("../images/icons/admin-1.png") no-repeat center center;
	background-size: 40px 40px;
	float: left;
	position: relative;
}

.team-member-img-30,
.team-pending-img-30 {
	min-width: 30px;
	min-height: 30px;
	background: url("../images/icons/team.webp") no-repeat center center;
	background-size: 30px 30px;
	float: left;
	position: relative;
}

.team-owner-img-30 {
	min-width: 30px;
	min-height: 30px;
	background: url("../images/icons/team-owner.webp") no-repeat center center;
	background-size: 30px 30px;
	float: left;
	position: relative;
}

.node-img-30 {
	min-width: 40px;
	min-height: 40px;
	background: var(--main-color) url("../images/icons/device.webp") no-repeat center center;
	border-radius: var(--border-radius-small);
	background-size: 40px 40px;
	float: left;
	position: relative;
}

.windows-img-20,
.windows-img-30,
.windows-img-50,
.windows-img-80 {
	background: var(--main-color) url("../images/icons/windows.webp") no-repeat center center;
	border-radius: var(--border-radius-small);
	float: left;
	position: relative;
}

.windows-img-center-80 {
	background: var(--main-color) url("../images/icons/windows.webp") no-repeat center center;
	border-radius: var(--border-radius-small);
	position: relative;
}

.linux-img-20,
.linux-img-30,
.linux-img-50,
.linux-img-80 {
	background: var(--main-color) url("../images/icons/linux.webp") no-repeat center center;
	border-radius: var(--border-radius-small);
	float: left;
	position: relative;
}

.linux-img-center-80 {
	background: var(--main-color) url("../images/icons/linux.webp") no-repeat center center;
	border-radius: var(--border-radius-small);
	position: relative;
}

.mac-img-20,
.mac-img-30,
.mac-img-50,
.mac-img-80 {
	background: var(--main-color) url("../images/icons/mac.webp") no-repeat center center;
	border-radius: var(--border-radius-small);
	float: left;
	position: relative;
}

.mac-img-center-80 {
	background: var(--main-color) url("../images/icons/mac.webp") no-repeat center center;
	border-radius: var(--border-radius-small);
	position: relative;
}

.blender-img-20,
.blender-img-30,
.blender-img-50,
.blender-img-80 {
	background: #ff7d0d url("../images/software/blender-1.webp") no-repeat center center;
	border-radius: var(--border-radius-small);
	float: left;
	position: relative;
}

[class~="3dsmax-img-20"],
[class~="3dsmax-img-30"],
[class~="3dsmax-img-50"],
[class~="3dsmax-img-80"] {
	background: #37A5CC url("../images/software/3ds-1.webp") no-repeat center center;
	border-radius: var(--border-radius-small);
	float: left;
	position: relative;
}

.maya-img-20,
.maya-img-30,
.maya-img-50,
.maya-img-80 {
	background: #FE4703 url("../images/software/maya-1.webp") no-repeat center center;
	border-radius: var(--border-radius-small);
	float: left;
	position: relative;
}

.cinema4d-img-20,
.cinema4d-img-30,
.cinema4d-img-50,
.cinema4d-img-80 {
	background: #2B2BA3 url("../images/software/cinema4d-1.webp") no-repeat center center;
	border-radius: var(--border-radius-small);
	float: left;
	position: relative;
}

.houdini-img-20,
.houdini-img-30,
.houdini-img-50,
.houdini-img-80 {
	background: #FE4703 url("../images/software/houdini-1.webp") no-repeat center center;
	border-radius: var(--border-radius-small);
	float: left;
	position: relative;
}

.unreal-img-20,
.unreal-img-30,
.unreal-img-50,
.unreal-img-80 {
	background: #000000 url("../images/software/unreal-1.webp") no-repeat center center;
	border-radius: var(--border-radius-small);
	float: left;
	position: relative;
}

.blender-img-20,
[class~="3dsmax-img-20"],
.maya-img-20,
.cinema4d-img-20,
.houdini-img-20,
.unreal-img-20,
.windows-img-20,
.linux-img-20,
.mac-img-20 {
	min-width: 30px;
	min-height: 30px;
	width: 30px;
	height: 30px;
	background-size: 30px 30px;
	margin-right: 10px;
}

.blender-img-30,
[class~="3dsmax-img-30"],
.maya-img-30,
.cinema4d-img-30,
.houdini-img-30,
.unreal-img-30,
.windows-img-30,
.linux-img-30,
.mac-img-30 {
	min-width: 45px;
	min-height: 45px;
	width: 45px;
	height: 45px;
	background-size: 45px 45px;
}

.blender-img-50,
[class~="3dsmax-img-50"],
.maya-img-50,
.cinema4d-img-50,
.houdini-img-50,
.unreal-img-50,
.windows-img-50,
.linux-img-50,
.mac-img-50 {
	min-width: 50px;
	min-height: 50px;
	width: 50px;
	height: 50px;
	background-size: 50px 50px;
}

.blender-img-80,
[class~="3dsmax-img-80"],
.maya-img-80,
.cinema4d-img-80,
.houdini-img-80,
.unreal-img-80,
.windows-img-80,
.linux-img-80,
.mac-img-80 {
	min-width: 80px;
	min-height: 80px;
	width: 80px;
	height: 80px;
	background-size: 60px 60px;
	position: relative;
}

.windows-img-center-80,
.linux-img-center-80,
.mac-img-center-80 {
	min-width: 80px;
	min-height: 80px;
	width: 80px;
	height: 80px;
	background-size: 60px 60px;
	position: relative;
	margin: 0 auto;
}

.category-img-30 {
	min-width: 45px;
	min-height: 45px;
	width: 45px;
	height: 45px;
	background: url("../images/icons/category.png") no-repeat center center;
	background-size: 45px 45px;
	float: left;
	position: relative;
}

.sample-img-30 {
	min-width: 45px;
	min-height: 45px;
	width: 45px;
	height: 45px;
	background: url("../images/icons/sample.png") no-repeat center center;
	background-size: 45px 45px;
	float: left;
	position: relative;
}

.member-access-1 {
	border: 2px solid #009b4e;
}

.member-access-2 {
	border: 2px solid #008fff;
}

.member-access-3 {
	border: 2px solid #be2b2b;
}

.state-completed,
.state-demo-on,
.state-low,
.state-online {
	padding: 4px 10px;
	background: #009b4e;
	border-radius: var(--radius-main);
	line-height: 20px;
	display: inline-block;
	color: #fff;
	width: fit-content;
}

.state-sending,
.state-medium,
.state-pending {
	padding: 4px 10px;
	background: #e58622;
	border-radius: var(--radius-main);
	line-height: 20px;
	display: inline-block;
	color: #fff;
	width: fit-content;
}

.state-paused,
.state-error,
.state-cancelled,
.state-demo-off,
.state-high,
.state-offline {
	padding: 4px 10px;
	background: #be2b2b;
	border-radius: var(--radius-main);
	line-height: 20px;
	display: inline-block;
	color: #fff;
	width: fit-content;
}

.state-queued,
.state-demo-neutre {
	padding: 4px 10px;
	background: #008fff;
	border-radius: var(--radius-main);
	line-height: 20px;
	display: inline-block;
	color: #fff;
	width: fit-content;
}

.state-payment-0,
.state-payment-1,
.state-payment-2,
.state-payment-3,
.state-payment-4,
.state-payment-5,
.state-payment-6 {
	padding: 0 8px;
	border-radius: var(--border-radius);
	line-height: 23px;
	display: inline-block;
	color: #fff;
	width: fit-content;
}

.state-payment-0 {
	background: #be2b2b;
}

.state-payment-1 {
	background: #009b4e;
}

.state-payment-2 {
	background: #009b4e;
}

.state-payment-3 {
	background: #0096ff;
}

.state-payment-4 {
	background: #888888;
}

.state-payment-5 {
	background: #ff7146;
}

.state-payment-6 {
	background: #be2b2b;
}

.link-network {
	height: 60px;
	line-height: 60px;
	width: 100%;
	float: left;
	border-bottom: 1px solid #ffffff10;
}

.link-network .action-network {
	float: right;
	right: 25px;
	position: relative;
}

.link-network .action-network a {
	border-radius: var(--radius-main);
	border: 1px solid var(--main-color);
	box-shadow: 0 0 0 1.5em var(--main-color) inset;
	background: none;
	padding: 6px 12px;
	color: #fff;
	transition: all .3s ease-in-out;
}

.link-network .action-network a:hover {
	border: 1px solid #fff;
	box-shadow: 0 0 0 0 inset;
	color: #fff;
	transition: all .3s ease-in-out;
}

.soundcloud-network {
	width: 150px;
	height: 60px;
	float: left;
	position: relative;
	background: url("../images/icons/network/soundcloud.png") no-repeat center center;
	background-size: 80%;
}

.beatport-network {
	width: 150px;
	height: 60px;
	float: left;
	position: relative;
	background: url("../images/icons/network/beatport.png") no-repeat center center;
	background-size: 80%;
}

.youtube-network {
	width: 150px;
	height: 60px;
	float: left;
	position: relative;
	background: url("../images/icons/network/youtube.png") no-repeat center center;
	background-size: 80%;
}

.itunes-network {
	width: 150px;
	height: 60px;
	float: left;
	position: relative;
	background: url("../images/icons/network/itunes.png") no-repeat center center;
	background-size: 80%;
}

.spotify-network {
	width: 150px;
	height: 60px;
	float: left;
	position: relative;
	background: url("../images/icons/network/spotify.png") no-repeat center center;
	background-size: 80%;
}

.deezer-network {
	width: 150px;
	height: 60px;
	float: left;
	position: relative;
	background: url("../images/icons/network/deezer.png") no-repeat center center;
	background-size: 80%;
}

.gplay-network {
	width: 150px;
	height: 60px;
	float: left;
	position: relative;
	background: url("../images/icons/network/gplay.png") no-repeat center center;
	background-size: 80%;
}

.tidal-network {
	width: 150px;
	height: 60px;
	float: left;
	position: relative;
	background: url("../images/icons/network/tidal.png") no-repeat center center;
	background-size: 80%;
}

.content-group .job-container {
	opacity: 0;
	transition: opacity .35s ease-in-out;
}

.content-group .current-job {
	opacity: 1;
	display: block;
	transition: opacity .35s ease-in-out;
}

.left-job {
	z-index: 101;
	border-radius: 0 var(--radius-main) var(--radius-main) 0;
	display: inline-block;
	position: sticky;
	top: calc(50% - 25px);
	float: left;
}

.right-job {
	z-index: 101;
	left: 100%;
	border-radius: var(--radius-main) 0 0 var(--radius-main);
	display: inline-block;
	position: sticky;
	top: calc(50% - 25px);
	float: left;
}

.layer-svg {
	position: absolute;
}

.head-unsubscribe,
.head-login {
	top: calc(50vh - 317px);
	position: relative;
	height: fit-content;
}

.head {
	width: 100%;
	max-width: 700px;
	height: 100%;
	margin: 0 auto;
	border-radius: var(--radius-main);
	overflow: hidden;
	position: relative;
	box-sizing: border-box;
	box-shadow: 0 3px 15px #000;
}

.left-panel {
	width: 40%;
	float: left;
	border-radius: var(--border-radius-small) 0 0 var(--border-radius-small);
	height: -webkit-fill-available;
	padding: 0;
	display: flex;
	align-items: center;
	position: absolute;
}

.unsubscribe,
.login {
	width: 60%;
	float: right;
	background: var(--foregroud-color-1);
	min-height: 250px;
	border-radius: 0 var(--border-radius-small) var(--border-radius-small) 0;
}

.login input[type="text"],
.login input[type="password"] {
	outline: none;
	font-size: var(--font-body);
	color: #fff;
	margin: 0;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	border: 1px solid #50505020;
	border-radius: 6px;
	background: #ffffff05;
	-webkit-appearance: none;
}

.login .input-title {
	color: #fff;
	width: 100%;
	text-align: left;
	font-size: var(--font-size-main);
	margin-bottom: 5px;
}

@media (max-width:450px) {
	.head {
		height: 250px;
		margin: 0 auto;
		overflow: unset;
	}

	.left-panel {
		width: 100%;
		float: left;
		border-radius: var(--border-radius-small) var(--border-radius-small) 0 0;
		min-height: 250px;
		position: relative;
		padding: 0;
	}
	
	.unsubscribe,
	.login {
		width: 100%;
		border-radius: 0 0 var(--border-radius-small) var(--border-radius-small);
	}
}

.slide {
	display: none;
	margin: 20px 50px;
}

.slide h2 {
	color: #fff;
	text-transform: uppercase;
	text-align: center;
	font-size: 30px;
	width: 100%;
	margin: 0;
}

.slide-bullet {
	height: 12px;
	width: 12px;
	background: #CCC;
	border-radius: 50%;
	display: inline-block;
	margin: 12px 2px;
	cursor: pointer;
	transform: scale(1);
	transition: all .3s cubic-bezier(.25, .8, .25, 1);
}

.slide-bullet:hover {
	background: #999;
	box-shadow: 0 0 0 4px var(--main-color-transp);
	transform: scale(1.1);
	transition: all .3s cubic-bezier(.25, .8, .25, 1);
}

.slide-bullet-active,
.slide-bullet-active:hover {
	background: none;
	box-shadow: 0 0 0 2px #fff;
	transform: scale(1.1);
	transition: all .3s cubic-bezier(.25, .8, .25, 1);
}

.left-arrow {
	background: url("../images/icons/arrow-left.png") no-repeat center center;
	background-size: 20px;
	width: 32px;
	height: 32px;
	position: absolute;
	top: calc(50% - 16px);
	left: 0;
	cursor: pointer;
	opacity: 1;
	transition: all .2s ease-in-out;
}

.right-arrow {
	background: url("../images/icons/arrow-right.png") no-repeat center center;
	background-size: 20px;
	width: 32px;
	height: 32px;
	position: absolute;
	top: calc(50% - 16px);
	right: 0;
	cursor: pointer;
	opacity: 1;
	transition: all .2s ease-in-out;
}

.right-arrow:hover,
.left-arrow:hover {
	opacity: .5;
	transition: all .2s ease-in-out;
}

.center-text {
	text-align: center;
}

.center-bullet {
	text-align: center;
	padding: 20px 0px;
}

.btn-next {
	padding: 10px 20px;
	float: right;
	color: #fff;
	background: linear-gradient(135deg, var(--main-color) 0%, var(--second-color) 100%);
	border-radius: var(--border-radius-large);
	cursor: pointer;
	position: absolute;
	font-size: var(--font-body);
	transition: all .5s ease-in-out;
	bottom: 20px;
	right: 20px;
}

.btn-cancel {
	padding: 10px 20px;
	float: left;
	color: #fff;
	border-radius: var(--border-radius-large);
	position: absolute;
	cursor: pointer;
	font-size: var(--font-body);
	transition: all .5s ease-in-out;
	left: 20px;
}

.btn-cancel:hover,
.btn-cancel:active,
.btn-next:hover,
.btn-next:active {
	box-shadow: 0 0 0 2em var(--main-color) inset;
	color: #fff;
	transition: all .5s ease-in-out;
}

.welcome-01,
.welcome-02,
.welcome-03,
.welcome-04,
.welcome-05,
.welcome-06,
.welcome-07,
.welcome-08,
.welcome-09,
.welcome-10 {
	width: 100%;
	height: 250px;
	margin: 10px auto;
	background-size: 100% !important;
}

.welcome-01 {
	background: url("../images/icons/welcome/01.png") center no-repeat;
}

.welcome-02 {
	background: url("../images/icons/welcome/02.png") center no-repeat;
}

.welcome-03 {
	background: url("../images/icons/welcome/03.png") center no-repeat;
}

.welcome-04 {
	background: url("../images/icons/welcome/04.png") center no-repeat;
}

.welcome-05 {
	background: url("../images/icons/welcome/05.png") center no-repeat;
}

.welcome-06 {
	background: url("../images/icons/welcome/06.png") center no-repeat;
}

.welcome-07 {
	background: url("../images/icons/welcome/07.png") center no-repeat;
}

.welcome-08 {
	background: url("../images/icons/welcome/08.png") center no-repeat;
}

.welcome-09 {
	background: url("../images/icons/welcome/09.png") center no-repeat;
}

.welcome-10 {
	background: url("../images/icons/welcome/10.png") center no-repeat;
}

@media only screen and (max-device-width: 1640),
only screen and (device-width: 1640px) and (device-height: 1640px),
only screen and (width: 1630px) and (orientation: landscape),
only screen and (device-width: 1640px),
only screen and (max-width: 1640px) {
	.content-sample .song-art img {
		width: 350px;
		height: 350px;
		margin-bottom: 35px;
	}

	.content-sample .song-art, .content-sample .song-art a {
		width: 350px !important;
		height: 350px;
		left: calc(50% - 175px);
		top: calc(50% - 210px);
	}

	.content-sample .song-play-btn {
		top: calc(50% - 100px);
	}

	.row-body-admin {
		margin: 0 0 0 290px;
	}
}

@media only screen and (max-device-width: 1366),
only screen and (device-width: 1366px) and (device-height: 1024px),
only screen and (width: 1366px) and (orientation: landscape),
only screen and (device-width: 1366px),
only screen and (max-width: 1366px) {
	.logo-bg a .logo {
		height: 65px;
		width: 65px;
		background: url("../images/logo1.png") no-repeat;
		background-size: 65px 65px;
	}

	.logo-bg {
		height: 65px;
		width: 65px;
		float: left;
		background: none;
	}

	.admin-panel-menu {
		width: 100%;
		left: -100%;
		transition: all 300ms cubic-bezier(.25, .8, .25, 1);
		overflow-x: hidden;
		position: fixed;
		height: calc(100vh - 65px);
		z-index: 1000;
		top: 0;
	}

	.close-admin {
		width: 30px;
		height: 30px;
		top: 25px;
		right: 20px;
		position: absolute;
		background: url("../images/icons/return-hover.png") no-repeat center center;
		z-index: 1;
	}

	.close-admin:hover,
	.close-admi:active {
		background: url("../images/icons/return.png") no-repeat center center;
	}

	.mobile-on {
		float: right;
	}

	.open-admin {
		width: 30px;
		height: 30px;
		top: 25px;
		right: 18px;
		position: absolute;
		background: url("../images/icons/open-hover.png") no-repeat center center;
		z-index: 1;
	}

	.open-admin:hover,
	.open-admin:active {
		background: url("../images/icons/open.png") no-repeat center center;
	}

	.slinky-menu {
		margin-top: 240px;
	}

	.nav-menu-container, .nav-fold, .slinky-menu {
		display: none;
	}

	.header {
		margin: 0px;
	}

	.search-container, .search-list-container {
		margin-left: 70px;
	}

	#panelmenu .nav-fold,
	#panelmenu .slinky-menu {
		display: block !important;
	}

	#content-news {
		margin: 40px 0px 80px 0px;
	}

	.row-body,
	.row-body-full,
	.row-page,
	.row-body-admin {
		padding: 0;
		margin: 0;
	}

	.menu-image {
		display: block;
	}

	.content-group .mobile-header,
	.content-group .page-header-1,
	#main-content .page-header-1,
	#main-content .mobile-header {
		display: block;
		z-index: 1;
		position: relative;
	}

	.content-sample .song-timeago {
		top: 30px;
		left: 20px;
	}

	.content-sample .song-tag {
		position: relative;
	}

	.content-sample .song-art img {
		width: 300px;
		height: 300px;
		margin-bottom: 15px;
	}

	.content-sample .song-art, .content-sample .song-art a {
		width: 300px !important;
		height: 300px;
		left: calc(50% - 150px);
		top: calc(50% - 185px);
	}

	.content-sample .song-top {
		bottom: 17%;
	}

	footer > ul {
		margin: 0px;
	}
}

@media only screen and (max-device-width: 1010px),
only screen and (device-width: 1010px) and (device-height: 1010px),
only screen and (width: 1010px) and (orientation: landscape),
only screen and (device-width: 1010px),
only screen and (max-width: 1010px) {
	.logo-bg a b {
		display: none;
	}

	.stat-upload-33,
	.stat-upload-25,
	.stat-upload-50 {
		width: 50%;
	}
}

@media only screen and (max-device-width: 768px),
only screen and (device-width: 768px) and (device-height: 1024px),
only screen and (width: 768px) and (orientation: landscape),
only screen and (device-width: 768px),
only screen and (max-width: 768px) {
	.modal-container-welcome-tour {
		display: grid;
		height: 100%;
		align-items: center;
		border-radius: 0;
	}

	.info-render {
		margin: 0;
		border-radius: 0;
	}

	.feature-container {
		display: grid;
	}

	.manage-cont8 .comment-edit-admin-textarea {
		width: 100%;
		margin-right: 0 !important;
		max-width: 100% !important;
	}

	.manage-cont8 > *:not(:first-child) .comment-edit-admin-textarea,
	.manage-cont8 > .custom-select,
	.manage-cont8 > .comment-edit-admin-textarea:not(:first-child),
	.manage-contact-container .custom-select {
		margin-top: 10px !important;
		max-width: 100%;
	}

	.module-last, .module-first, .page-module, .module-middle {
		margin: 0px 0px 20px 0px;
	}

	.page-module-container,
	.page-module-container-25,
	.page-module-container-33,
	.page-module-container-50 {
		width: 100%;
	}

	.column-stat {
		float: left;
		min-height: 1px;
		margin-left: -1px;
		width: 50%;
		margin-bottom: 10px;
		border-left: solid 1px #ffffff10;
		border-bottom: solid 1px #ffffff10;
	}

	.stat-upload-33,
	.stat-upload-25,
	.stat-upload-50 {
		width: 100%;
	}

	#job-list-newsletter li .newsletter-header-extra,
	#job-list-newsletter0 li .newsletter-header-extra,
	#job-list-newsletter3 li .newsletter-header-extra,
	#job-list-newsletter1 li .item-selector .newsletter-header-extra,
	#job-list-newsletter2 li .newsletter-header-extra {
		bottom: 15px;
	}

	.menu-image {
		display: block;
		position: relative;
	}

	.body-content,
	.page-container,
	.page-settings-container {
		border: 0;
	}

	.header {
		max-width: 1080px;
	}

	.row-body .two,
	.row-body .six {
		width: 100%;
	}

	.row-body .ten {
		width: 100%;
	}

	.row-body .twenty {
		width: 100%;
	}

	.row .three,
	.welcome-box {
		width: 100%;
	}

	.row-body .threeads {
		width: 100%;
	}

	.row-body .threeads img {
		width: auto;
		height: auto;
	}

	.row-body .nine,
	.row-body-full .nine,
	.row-body-admin .nine {
		width: 100%;
		transition: all .4s cubic-bezier(.25, .8, .25, 1);
		float: left;
	}

	.row-body .twelve {
		transition: all .4s cubic-bezier(.25, .8, .25, 1);
		margin-bottom: 80px;
	}

	.row-body-admin .twelve,
	.row-body-full .twelve {
		transition: all .4s cubic-bezier(.25, .8, .25, 1);
	}

	.content-job .nine,
	.content-sample .nine,
	.content-group .nine {
		position: fixed;
		height: 100%;
	}

	.row-body .three,
	.row-body-full .three,
	.row-body-admin .three {
		background: var(--foregroud-color-2);
		width: 100%;
		left: -100%;
		transition: all 300ms cubic-bezier(.25, .8, .25, 1);
		overflow-x: hidden;
		position: fixed;
		height: 100%;
		z-index: 1000;
		top: 0;
	}

	.row .four {
		width: 100%;
	}

	.row .eight {
		width: 100%;
	}

	.row .six {
		width: 100%;
	}

	.row .seven {
		width: 100%;
	}

	.row-page .three {
		width: 100%;
	}

	.row-page .nine {
		width: 100%;
	}

	.body {
		border: 0;
	}

	.plan-history-container {
		padding: 10px 0px;
	}

	.mobile-side {
		display: block;
	}

	#mobile-header {
		box-shadow: 0 0 60px #00000070;
		z-index: 200;
		position: relative;
		text-align: center;
	}

	.page-header, .page-header-1 {
		padding: 20px 60px !important;
	}

	#topbar-artwork {
		top: 0;
		width: 80px;
		right: 0;
		height: 80px;
		position: absolute;
	}

	#topbar-artwork img {
		width: 80px;
		height: 80px;
	}

	.menu-button {
		display: none;
	}

	.search-container,
	.search-list-container,
	.notification-container {
		padding: 0;
	}

	.inputs-container {
		padding: 30px 10px 30px 20px;
	}

	.row-body .five {
		width: 100%;
	}

	.row-one {
		float: left;
		width: 100%;
		padding: 3px 0;
	}

	.row-two {
		float: left;
		width: 100%;
		padding: 3px 0;
	}

	.row-three {
		float: left;
		width: 100%;
		padding: 3px 0;
		text-align: left;
	}

	.row-four {
		float: left;
		width: 100%;
		padding: 3px 0;
		text-align: left;
	}

	.cover-container {
		height: auto;
		overflow: hidden;
	}

	.cover-text-container {
		font-size: 18px;
		margin: 0;
		left: 200px;
		top: 30%;
		overflow: hidden;
	}

	.cover-text-container img {
		width: 15px;
		height: 15px;
	}

	#values {
		width: 230px;
	}

	#contact-list-email .manage-cont1, #contact-list-email .manage-header-cont1 {
		width: 25%;
	}

	.page-input-title {
		width: 100%;
		text-align: left;
		padding: 3px 0;
	}

	.page-input-sub {
		padding: 3px 0;
		width: 100%;
		min-width: 100%;
	}

	.page-input-content {
		width: 100%;
		padding-left: 0;
	}

	.admin-rows {
		border-bottom: 1px solid #ccc;
	}

	.row-page .table-id,
	.row-page .table-user,
	.row-page .table-mail,
	.row-page .table-edit,
	.row-page .table-delete {
		width: 100%;
	}

	.row-page .table-report-id,
	.row-page .table-report-type,
	.row-page .table-user,
	.row-page .table-category-name,
	.row-page .table-report-message,
	.row-page .table-report-safe {
		width: 100%;
	}

	.subslist {
		right: 20px;
	}

	.subslist_message {
		right: 53px;
	}

	.notification-container {
		position: absolute;
	}

	.search-container {
		position: absolute;
		width: -webkit-fill-available;
		margin: 10px 20px;
	}

	.notification-content {
		max-width: none;
	}

	.menu-dd-container {
		right: 0;
		width: 100%;
		padding: 0;
	}

	.menu-dd-content {
		width: -webkit-fill-available;
	}

	.search-content {
		margin-left: 0;
	}

	.search-content .notification-inner,
	.search-content .job-inner,
	.hashtag-inner {
		margin: 0;
	}

	.cover-description-content {
		margin-left: 20px;
	}

	.cover-avatar {
		width: 120px;
	}

	.cover-avatar a {
		float: left;
		overflow: hidden;
		height: 100px;
	}

	.dash-stats {
		width: 100%;
	}

	.dash-content,
	.dash-content-right {
		margin: 0 0 12px;
	}

	.page-input-title-left-preview,
	.page-input-content-preview {
		width: 100%;
		padding-right: 0px;
	}

	.group-button-add .action-text {
		display: block;
	}

	.message-reply-container .delete_btn,
	.message-reply-container .report_btn {
		display: block;
	}

	.message-reply-avatar {
		z-index: 0;
	}

	.admin-stats-image,
	.license-box-desc {
		display: none;
	}

	.upload-btn-text {
		font-size: 12px;
	}

	.license-box-container {
		width: 100%;
		padding-right: 0;
	}

	li a.cover-button {
		padding: 15px 20px;
		text-align: center;
	}

	.welcome-box-section,
	.welcome-box-title {
		font-size: var(--font-main-title);
	}

	.welcome-box-title {
		font-size: var(--font-body);
	}

	.topbar {
		position: relative;
	}

	#content {
		padding-top: 0;
	}

	.blocked-button {
		left: 10px;
		position: absolute;
	}

	.go-pro-container {
		text-align: left;
		margin: 10px;
		padding: 20px;
	}

	.go-pro-desc {
		max-width: 100%;
		margin: 0;
	}

	#topbar-artwork {
		float: right;
	}

	#topbar-job-info {
		padding-right: 0;
	}

	a.jp-play,
	a.jp-pause {
		margin-right: 16px;
	}

	.sidebar-online-users img {
		width: 60%;
	}

	.verified-profile {
		margin-top: 3px;
	}

	.verified-profile:hover span {
		top: 3px;
	}

	::-webkit-scrollbar {
		display: none;
	}

	.open {
		width: 30px;
		height: 30px;
		top: 22px;
		right: 18px;
		position: absolute;
		background: url("../images/icons/open-hover.png") no-repeat center center;
		z-index: 1;
	}

	.open:hover,
	.open:active {
		background: url("../images/icons/open.png") no-repeat center center;
	}

	.close {
		width: 30px;
		height: 30px;
		top: 22px;
		right: 18px;
		position: absolute;
		background: url("../images/icons/return-hover.png") no-repeat center center;
		z-index: 1;
	}

	.close:hover,
	.close:active {
		background: url("../images/icons/return.png") no-repeat center center;
	}

	.return {
		width: 30px;
		height: 30px;
		top: 22px;
		left: 18px;
		position: absolute;
		background: url("../images/icons/back-hover.png") no-repeat center center;
		z-index: 1;
	}

	.return:hover,
	.return:active {
		background: url("../images/icons/back.png") no-repeat center center;
	}


	.page-header-fixed-50 {
		position: fixed !important;
		width: 100% !important;
		top: 0;
		left: 0;
		height: 75px;
		align-items: center;
		align-content: center;
		border-bottom: 1px solid #ffffff10;
		transition: all 1s cubic-bezier(.25, .8, .25, 1);
		z-index: 5;
		background: var(--foregroud-color-1);
		box-shadow: 0 11px 15px -7px rgba(0, 0, 0, .2), 0 24px 38px 3px rgba(0, 0, 0, .2), 0 9px 46px 8px rgba(0, 0, 0, .2);
	}

	.page-header-fixed-100 {
		position: fixed !important;
		width: 100% !important;
		top: 76px;
		left: 0;
		transition: all 1s cubic-bezier(.25, .8, .25, 1);
		z-index: 5;
		background: var(--foregroud-color-1);
		box-shadow: 0 11px 15px -7px rgba(0, 0, 0, .2), 0 24px 38px 3px rgba(0, 0, 0, .2), 0 9px 46px 8px rgba(0, 0, 0, .2);
	}

	.page-header-fixed-150 {
		position: fixed !important;
		width: 100% !important;
		top: 134px !important;
		left: 0;
		z-index: 5;
		box-shadow: 0 11px 15px -7px rgba(0, 0, 0, .2), 0 24px 38px 3px rgba(0, 0, 0, .2), 0 9px 46px 8px rgba(0, 0, 0, .2);
	}
	
	.manage-jobs-container {
		gap: 0px;
	}

	/* PROCESS — RESPONSIVE */
	.process {
		display: inline-block !important;
		padding: 5rem 1rem;
	}

	/* Inlcude process tabs and FAQ tabs */
	.tabs-left, .tabs-right, .tab-content {
		width: 100% !important;
	}

	.tabs-left>li a, .tabs-right>li a, .tab-pane {
		padding: 0rem !important;
	}

	.tabs-left>li, .tabs-right>li {
		margin: 0 !important;
	}
	/* Dashboard mobile : actions uniquement */
	.dashboard-mobile-actions {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 10px;
		width: calc(100% - 40px);
        margin: 20px 20px 0 20px;
		box-sizing: border-box;
	}

	.dashboard-mobile-actions .top-button-container,
	.dashboard-mobile-actions #filter-home {
		grid-column: 1 / -1;
	}

	.dashboard-mobile-actions .top-button-container {
		position: relative;
		right: auto;
		top: auto;
		display: block;
		width: 100%;
		min-width: 0;
		margin: 0;
		padding: 0;
		float: none;
	}

	.dashboard-mobile-actions #filter-home,
	.dashboard-mobile-actions #list-group {
		display: block;
		width: 100%;
		min-width: 0;
		margin: 0;
	}

	.dashboard-mobile-actions #filter-manage {
		width: 100%;
		min-width: 0;
		margin: 0;
		padding: 0;
		float: none;
	}

	.dashboard-mobile-actions .top-button-container button,
	.dashboard-mobile-actions #filter-manage .edit-menu-item {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		max-width: none;
		min-width: 0;
		height: 42px;
		margin: 0;
		padding: 0 8px !important;
		box-sizing: border-box;
		float: none;
		white-space: nowrap;
		font-size: 13px;
	}

	.dashboard-mobile-actions .sidebar-buttons {
		grid-column: 1 / -1;
		width: 100%;
		min-width: 0;
		margin: 0;
		overflow-x: auto;
	}

	/* Pages internes mobiles : bouton principal et filtres */
	.nine.columns > .top-button-container {
		position: relative;
		right: auto;
		top: auto;
		display: flex;
		width: calc(100% - 40px);
		margin: 20px 20px 0;
		padding: 0;
		gap: 10px;
		box-sizing: border-box;
		justify-content: center;
	}

	.nine.columns > .top-button-container button,
	.nine.columns > .top-button-container a {
		width: 100%;
		max-width: none;
		margin: 0;
		box-sizing: border-box;
	}

	.nine.columns > #filter-home {
		width: calc(100% - 40px);
		margin: 10px 20px 0;
		box-sizing: border-box;
	}

	.nine.columns > #filter-home .sidebar-buttons {
		width: 100%;
		margin: 0;
		gap: 10px;
		box-sizing: border-box;
	}

	.nine.columns > .job-info-container {
		padding: 20px;
	}
}

@media only screen and (max-device-width: 450px),
only screen and (device-width: 450px) and (device-height: 450px),
only screen and (width: 450px) and (orientation: landscape),
only screen and (device-width: 450px),
only screen and (max-width: 450px) {
	.modal-input-container {
		display: block;
	}

	.group-click-edit .manage-cont8 input {
		margin-right: 0px !important;
	}

	.group-click-edit input[type="text"] {
		max-width: -webkit-fill-available !important;
	}

	.article-container .article-view {
		margin: 30px 20px 140px 20px;
	}

	.row-body,
	.row-body-full,
	.row-body-admin {
		margin: 0;
		min-height: 100vh;
	}

	.page-inner,
	.page-inner-login {
		padding: 10px;
	}

	.head-login {
		top: calc(50vh - 330px);
	}

	.head {
		width: 90%;
	}

	.notification-content {
		margin: 10px 20px;
	}

	#panelmenu .nav-fold, #panelmenu .slinky-menu {
		width: 100%;
		box-sizing: border-box;
	}

	#header-list-email .hide {
		display: none !important;
	}

	#email_search {
		width: auto;
	}

	.page-input-content-2 {
		padding-left: 0;
	}

	.page-input-title-left {
		width: 100%;
		margin-right: 0;
		margin-bottom: 10px;
	}

	.newsletter-landing-flex {
		display: block;
	}

	.newsletter-landing-flex .newsletter-landing-50 {
		width: 100%;
		margin-bottom: 10px;
	}

	.section-upload {
		width: 100%;
	}
	
	.job-input-container {
		gap: 0px;
	}

	.job-info-input input[type="radio"] {
		margin: 0 auto !important;
		display: inline-block;
	}

	.job-info-input input[type="checkbox"] {
		margin: 0 auto;
		float: none !important;
		display: inline-block;
	}

	.search-input input {
		margin: 0;
		max-height: 65px;
		height: 100%;
		border: none;
		box-sizing: border-box;
		background-position: 5px 24px;
	}

	.search-input input:hover,
	.search-input input:focus,
	.search-input input:hover::-webkit-input-placeholder,
	.search-input input:focus::-webkit-input-placeholder {
		width: -webkit-fill-available;
		border-radius: 0;
		border-bottom: 1px solid #292633;
		background: var(--foregroud-color-3);
		background-position: -20px 24px;
		z-index: 1;
		color: #fff;
		position: absolute;
		text-align: center;
		max-height: 65px;
		height: 100%;
		left: 0px;
		padding: 0;
	}

	.search-input input::-webkit-input-placeholder,
	.search-input input::-webkit-input-placeholder:hover {
		color: #fff;
	}

	.menu-btn-1 {
		padding: 6px 10px;
		margin: 15px 10px 0 0;
		border-radius: var(--border-radius-small);
		font-size: var(--font-size-main);
	}

	.sidebar-links {
		margin-bottom: 80px;
	}

	.page-input-container,
	.page-input-title,
	.page-input-title-img {
		padding: 0;
		color: #fff;
	}

	.page-input-title-img-wall img {
		height: 150px;
	}

	.stats-content #history-list-newsletter .manage-cont1 {
		width: 100%;
	}

	.stats-content #header-list-email .manage-header-extra {
		width: 50%;
	}

	.job-info-art {
		float: left;
		width: 100%;
		margin-bottom: 20px;
	}

	.job-info-inputs {
		padding: 0;
		text-align: center;
	}

	.group-actions-container {
		padding: 5px 0 0 90px;
	}

	.group-content-info {
		padding-left: 90px;
	}

	.job-info-container #list-group,
	.job-info-container #list-group-title,
	.job-info-container #list-article {
		display: block !important;
	}

	.content-group #list-group,
	.content-group #list-group-title {
		display: none;
	}

	#topbar-job-details {
		margin-left: 0px;
		margin-right: 80px;
		text-align: right;
	}

	/* job page & group & sample */

	.content-sample .song-art img {
		width: 250px;
		height: 250px;
	}

	.content-sample .song-art, .content-sample .song-art a {
		width: 250px !important;
		height: 250px;
		left: calc(50% - 125px);
		top: calc(50% - 160px);
	}

	.song-timeago {
		right: 10px;
		position: relative;
	}

	.job-cover {
		top: 47px;
		height: 305px;
	}

	select {
		max-width: 100%;
		outline: 0;
	}

	.select-explorer {
		width: 100%;
	}

	#filter-explorer {
		margin: 0;
		text-align: center;
		padding: 30px 0;
	}

	.job-info-input select,
	.job-info-input .timer-job-padding,
	.job-info-input .timer-job-padding-right,
	.job-info-input .timer-job,
	.job-info-input .timer-job-right {
		width: 100%;
	}

	.job-info-input .timer-job {
		border-radius: 5px 5px 0px 0px;
	}

	.job-info-input .timer-job-right {
		border-radius: 0px 0px 5px 5px;
	}

	.job-info-art img {
		width: 100%;
		height: 250px;
		max-width: 250px;
		margin: 0 auto;
		display: block;
		object-fit: cover;
		border-radius: 50%;
	}

	.modal-container,
	.modal-container-large {
		width: 100%;
		background: none;
		border: none;
		box-shadow: 0 0 0 0;
	}

	#share,
	#group,
	#delete,
	#block-ip,
	#team,
	#member,
	#invit,
	#resume,
	#connect,
	#categorieuser,
	#admin-connect {
		box-sizing: border-box;
		background: var(--foregroud-color-2);
	}
	
	.modal-menu {
		max-width: 100%;
	}

	.sidebar-container-go-pro {
		padding: 20px;
	}

	.sidebar-stats-container .scroll-overflow {
		padding-right: 0px;
	}

	.cover-avatar-content {
		margin: 0;
	}

	.cover-avatar img {
		width: 200px;
		margin-bottom: -3px;
		text-align: center;
		border-radius: 50%;
	}

	.cover-avatar {
		float: none;
		position: absolute;
		width: 100%;
		text-align: center;
	}

	.cover-text-container {
		float: left;
		font-size: 22px;
		left: 20px;
		top: 63%;
		position: absolute;
	}

	.cover-text-container a {
		font-size: 25px;
		line-height: 32px;
	}

	.cover-location {
		font-size: var(--font-size-main);
	}

	.welcome-bar {
		max-height: 227px;
	}

	.allinone_carousel.sweet .elementTitle {
		top: 15px !important;
		font: lighter 25px/30px "Open Sans", Tahoma, Arial, sans-serif !important;
	}

	#job-list-newsletter li .sub-title, #job-list-newsletter0 li .sub-title,
	#job-list-newsletter1 li .item-selector .sub-title, #job-list-newsletter2 li .item-selector .sub-title,
	#job-list-newsletter3 li .sub-title {
		margin-right: 30%;
	}

	.right-mob-front {
		right: 65%;
	}

	.left-mob-front {
		left: 65%;
	}

	.col-rd-6 {
		width: 230px;
		float: left;
		left: 15px;
		font-size: var(--font-size-main);
	}

	.col-ld-6 {
		width: 230px;
		float: right;
		right: 15px;
	}

	.manage-cont-hide {
		display: none !important;
	}

	.go-pro-container-welcome {
		margin: 20px;
	}

	.go-pro-desc-welcome {
		font-size: 20px;
	}

	.left-mob-back,
	.right-mob-back {
		display: none;
	}

	.left-mob-front {
		left: 220px;
	}

	.right-mob-front {
		right: 220px;
	}

	.section-welcome {
		padding: 0 0 150px;
	}

	#content {
		border-bottom: 0;
	}

	.verified-profile:hover span {
		top: 7px;
	}

	.page-input-container input:not([type="checkbox"]):not([type="radio"]),
	.page-input-container select,
	.page-input-container textarea,
	input.group-input:not([type="checkbox"]):not([type="radio"]) {
		width: 100%;
		box-sizing: border-box;
		z-index: 0;
		position: relative;
	}

	.group-stats-text {
		display: none;
	}

	.group-stats {
		margin-top: -17px;
		z-index: 0;
	}

	#uploader-message {
		overflow: hidden;
		padding: 25px 0 50px;
	}

	#upload-success {
		border-radius: var(--border-radius-small);
		background: black;
	}

	#upload-success-file {
		border-radius: var(--border-radius-small);
		background: black;
	}

	#uploader {
		float: none;
		width: 100%;
	}

	#uploader-message-wait .upload-title {
		font-size: 20px;
		text-align: center;
		padding-top: 50px;
		padding-bottom: 50px;
	}

	.song-art-upload img,
	.song-art-upload {
		float: none;
		width: 130px !important;
		height: 130px !important;
		margin: 0 auto;
	}

	.upload-title {
		font-size: 30px;
		text-align: center;
		margin-bottom: 25px;
	}

	.upload-desc #uploader-job {
		max-width: 100%;
	}

	.pro-normal {
		background-size: 15px;
		width: 15px;
		position: relative;
		height: 15px;
		display: inline-block;
	}

	select.plan-options-user {
		padding: 10px;
		margin: 0 0px 20px 0;
		width: 100%;
	}

	.sidebar-header-extra {
		float: left;
		display: block;
	}

	.sidebar-buttons li {
		padding: 0;
	}

	.sidebar-container
	.group-actions .job-buttons {
		padding: 20px 0 0;
		left: initial;
		top: initial;
	}

	.group-actions .job-buttons-fixed {
		left: 10px;
		top: 13px;
		padding: 0;
	}

	.right-play {
		right: 5%;
		margin-right: 0px !important;
	}

	.left-play {
		left: 5%;
	}

	.content-group .artwork,
	.content-job .artwork,
	.content-sample .artwork {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.manage-user-promoter-row .manage-user-left {
		width: 100%;
		display: inline-block;
	}

	.manage-user-promoter-row {
		flex-direction: column;
		gap: 0px;
		align-items: flex-start;
	}

	.manage-user-promoter-row .manage-user-right {
		width: 100%;
		justify-content: flex-start;
	}

	.manage-user-promoter-row .manage-user-right form {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		gap: 8px;
	}

	.manage-user-promoter-row .manage-cont {
		width: 100%;
		max-width: 100%;
		text-align: center;
	}

	.manage-user-promoter-row .manage-cont .manage-padding {
		display: contents;
	}

	.manage-user-promoter-row .manage-users-image {
		position: relative;
		margin: 0 auto;
		width: fit-content;
		float: inherit;
	}

	.manage-user-promoter-row .manage-users-image img {
		width: 100px;
		height: 100px;
	}

	.manage-padding img {
		width: 15px;
		height: 15px;
		margin: 0 auto;
		top: 3px;
		float: initial;
	}

	.manage-users-container,
	.manage-categories-container {
		white-space: initial;
		overflow: initial;
		text-overflow: initial;
		max-height: initial;
	}

	.manage-content-edit {
		padding-bottom: 0px;
		width: 100%;
	}

	.group-click-edit .palette-color-group {
		width: 100%;
		margin-top: 10px;
	}

	.manage-content-edit .select-tag,
	.manage-content-edit .select-group {
		margin-top: 10px;
	}

	.manage-cont8 {
		display: inline-table;
	}

	#pdf-content .mobile-invoice {
		width: 33%;
	}

	#pdf-content .invoice-50 {
		width: 100%;
	}

	#pdf-content .payment-row-invoice,
	#pdf-content .payment-row-invoice-1 {
		min-height: 30px;
	}

	.plan-history-status {
		width: 0%;
		float: right;
	}

	.feature-container-history .plan-history,
	.feature-container-history .plan-history-status {
		justify-content: center;
		display: flex;
		align-items: center;
		word-wrap: break-word;
		padding: 0 10px;
		text-align: center;
		box-sizing: border-box;
	}

	.sidebar-header-extra-history .sidebar-icon-mobile,
	.sidebar-header-extra3 .sidebar-icon-mobile,
	.sidebar-header-edit-extra .sidebar-icon-mobile {
		float: right;
	}

	.button-full-mobile {
		width: 100% !important;
	}

	.page-button {
		float: initial !important;
		margin: 10px 0px 0 0 !important;
		display: flex;
	}

	.email-demo {
		float: initial;
	}

	.report-content-demo {
		padding: 25px 0;
	}

	.page-module-paypal, .page-module-company {
		padding: 15px 15px 0px 15px;
	}
}

/* ==========================================================================
   END COOKIE BANNER
   ========================================================================== */

/* ==========================================================================
   START INVOICE
   ========================================================================== */

#pdf-content {
	width: 100%;
}

#pdf-content .row-1 {
	background: #ffffff04;
}

#pdf-content .row-2 {
	background: #ffffff02;
}

#pdf-content .payment-row-invoice {
	padding: 15px;
	margin: 0px;
	min-height: 15px;
	border-radius: var(--radius-main) 0px 0px var(--radius-main);
	word-break: break-all;
}

#pdf-content .invoice-number {
	position: absolute;
	right: 30px;
	color: #818183;
	text-transform: math-auto;
	font-size: 13px;
}

#pdf-content .payment-row-invoice-1 {
	padding: 15px;
	margin: 0px;
	min-height: 15px;
	border-radius: 0px var(--radius-main) var(--radius-main) 0px;
	word-break: break-all;
}

#pdf-content td {
	height: 30px;
}

#pdf-content table {
	width: 100%;
	padding: 20px;
	margin-top: 30px;
	position: relative;
	display: inline-table;
	border-collapse: collapse;
}

#pdf-content .invoice-50 {
	width: 50%;
	float: left;
	position: relative;
}

#pdf-content .invoice-padding {
	margin-bottom: 60px;
	padding: 10px;
	position: relative;
	float: left;
	width: 100%;
	box-sizing: border-box;
}

#pdf-content .invoice-padding-1 {
	padding: 10px;
	position: relative;
	float: left;
	width: 100%;
	box-sizing: border-box;
}

#pdf-content .truncated-url {
	display: inline-block;
	max-width: -webkit-fill-available;
	/* ou ce qui convient */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: bottom;
    text-transform: initial;
}

#pdf-content .truncated-url .timeago {
	color: unset;
}

.invoice-info-container {
	opacity: 0;
	height: 0;
	background: #ffffff05;
	box-sizing: border-box;
	width: 100%;
	border-radius: var(--radius-main);
	transition: all .3s ease-in-out;
	position: relative;
	display: flex;
	overflow: hidden;
}

.opennedstats .invoice-info-container {
	opacity: 100;
	height: -webkit-fill-available;
	margin-top: 13px;
	display: inline-block;
	transition: all .6s ease-in-out;
}

/* ==========================================================================
   END INVOICE
   ========================================================================== */

/* ==========================================================================
   START EASYEDITOR CODE LINE
   ========================================================================== */

pre.diffcode {
	position: relative;
	background: #191e24;
	padding: 1em 0 1em 0;
	color: #eee;
	overflow: auto;
	border-radius: var(--border-radius);
}

pre.diffcode code {
	display: block;
	padding-left: 0;
	color: #ccc;
}

pre.diffcode .line {
	display: block;
	position: relative;
	padding-left: 2.3em;
	white-space: pre;
	min-height: 1.4em;
	font-size: 14px;
	line-height: 1.45em;
	font-family: inherit;
	border-left: 2px solid transparent;
}

pre.diffcode .line:hover {
	background: #ff5b2a50 !important;
}

pre.diffcode .line:before {
	counter-increment: line;
	content: counter(line);
	position: absolute;
	left: 0;
	width: 2em;
	text-align: right;
	color: #4d5662;
	user-select: none;
	opacity: 0.6;
	font-size: 13px;
	font-family: inherit;
}

pre.diffcode code {
	counter-reset: line;
}

pre.diffcode .line:nth-child(even) {
	background: rgba(255,255,255,0.03);
}

pre.diffcode .line:nth-child(odd) {
	background: transparent;
}

/* ==========================================================================
   END EASYEDITOR CODE LINE
   ========================================================================== */

/* ==========================================================================
   START CUSTOM SELECT INPUT
   ========================================================================== */

.custom-select {
	position: relative;
	display: inline-block;
	max-width: 300px;
	width: 100%;
}

.modal-input .custom-select {
	max-width: 100%;
}

#upload-job .job-info-input .custom-select,
#upload-software .job-info-input .custom-select {
	float: left;
	max-width: 100%;
	width: 100%;
}

.job-info-input .custom-select {
	width: calc(100% / 3);
	float: left;
}

.help-panel-contact .job-info-input .custom-select {
	width: 100%;
    max-width: 100%;
    margin: 5px 0;
}

.custom-select select {
	display: none;
}

.select-items-inside div:hover,
.custom-select .select-optgroup,
.custom-select .select-optgroup:hover {
	background: #ffffff08;
	border-radius: var(--border-radius-small);
	color: #ffffff !important;
}

.custom-select .select-optgroup {
	cursor: context-menu;
}

#upload-job .job-info-input .select-selected,
#upload-software .job-info-input .select-selected {
	max-width: 100%;
	min-width: auto;
}

.select-selected {
	cursor: pointer;
	user-select: none;
	position: relative;
	display: flex;
	align-items: center;
	min-width: 250px;
	padding: 0px 15px;
	border-radius: var(--border-radius-small);
	border: 1px solid #ffffff08;
	background: var(--foregroud-color-2);
	color: #fff;
	outline: none;
	box-sizing: border-box;
	height: 45px;
	transition: all .3s ease-in-out;
}

.content-form-grid .select-selected {
	min-width: 200px;
}

.select-tag,
.select-member,
.select-team,
.select-group {
	cursor: pointer;
	user-select: none;
	position: relative;
	display: flex;
	align-items: center;
	outline: none;
	width: 100%;
	max-width: none;
	float: left;
	box-sizing: border-box;
	transition: all .3s ease-in-out;
}

#gopro-form .select-selected,
.search-input1 .select-selected {
	background: #ffffff;
	color: #5d6168;
}

.manage-contact-container .manage-cont8 .comment-edit-admin-textarea,
.manage-contact-container .select-selected {
	background: #4a4a4a05;
	border: 1px solid #4a4a4a30;
	border-radius: var(--border-radius-large);
	color: #818183;
}

#gopro-form .select-selected::after,
.search-input1 .select-selected::after {
	border-top-color: #5d6168;
	/* couleur de la flèche */
}

.manage-contact-container .select-selected::after {
	border-top-color: #818183;
	/* couleur de la flèche */
}

.fake-tag-input {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	cursor: pointer;
	overflow: auto;
}

.selected-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.selected-tag {
	height: 28px;
	padding: 0 10px;
	border-radius: var(--radius-main);
	background: #999999;
	display: flex;
	align-items: center;
	gap: 4px;
	color: #fff;
}

.selected-tag-remove {
	cursor: pointer;
	position: relative;
	background: url("../images/icons/close_b.png") no-repeat center left;
	background-size: 17px;
	width: 17px;
	height: 17px;
	opacity: .75;
}

.selected-tag-remove:hover {
	opacity: 1;
}

.fake-placeholder {
	color: #5d6168;
}

.tag-search-results {
	max-height: 340px;
	padding-right: 4px;
	overflow-x: hidden;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Petite flèche ▼ */

.select-selected::after {
	content: "";
	position: absolute;
	right: 10px;
	top: 50%;
	margin-top: -3px;
	border: 6px solid transparent;
	border-top-color: #fff;
	pointer-events: none;
}

#tag-list,
#member-list,
.select-team-list,
#group-list,
.select-items {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	padding: 10px;
	backdrop-filter: blur(10px);
	border-radius: var(--radius-main);
	background: var(--foregroud-color-4-transp);
	box-shadow: 0px 5px 10px 5px rgb(0 0 0 / 20%);
	display: block;
	visibility: hidden;
	pointer-events: none;
	opacity: 0;
	transform: scale(0.95) translateY(-10px);
	transition: all 0.35s ease-in-out;
	z-index: 99;
}

.team-container {
	max-height: 280px;
	padding: 4px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	overflow-x: hidden;
	overflow-y: auto;
}

#tag-list {
	padding: 12px;
	overflow: hidden;
}

#tag-search-input {
	width: 100%;
	max-width: none;
	min-width: 0;
	height: 42px;
	margin: 0;
	padding: 0 13px;
	border: 1px solid #ffffff10;
	border-radius: calc(var(--radius-main) - 6px);
	background: #ffffff05;
	color: #ffffff;
	box-sizing: border-box;
}

#tag-search-input:focus {
	border-color: var(--main-color-transp);
	background: #ffffff08;
}

.tag-search-results .cat-group {
	margin: 0;
	padding: 7px;
}

.tag-search-results .cat-group-title {
	min-height: 42px;
	padding-left: 12px;
	font-size: 12px;
}

.tag-search-results .cat-group-action {
	width: 28px;
	height: 28px;
	right: 8px;
	line-height: 28px;
	background: transparent;
	transform: none;
}

.tag-search-results .cat-group-action:empty {
	display: none;
}

.tag-search-results .cat-group-action img {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	object-fit: cover;
	transform: none;
}

.tag-search-results .sidebar-tag {
	display: inline-flex;
	margin: 6px 6px 0 0;
}

.tag-search-results .sidebar-tag a {
	max-width: 100%;
	margin: 0;
	padding: 6px 10px;
	float: none;
	display: block;
	border: 1px solid #ffffff12;
	border-radius: var(--border-radius-large);
	font-size: 11px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	box-shadow: inset 0 0 0 1px #00000010;
}

.tag-search-results .sidebar-tag a:hover {
	filter: brightness(1.12);
	transform: translateY(-1px);
}

.select-team-list .team-container .sidebar-tag {
	width: 100%;
	display: block;
}

.select-team-list .team-container .sidebar-tag a {
	width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 8px 12px;
	float: none;
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1px solid transparent;
	border-radius: calc(var(--radius-main) - 6px);
	background: #ffffff05;
	color: #ffffff;
	box-sizing: border-box;
	transition: all .2s ease-in-out;
}

.select-team-list .team-container .sidebar-tag a:hover {
	border-color: var(--main-color-transp);
	background: linear-gradient(90deg, var(--main-color-transp-1), #ffffff06 70%);
	transform: translateX(2px);
}

.select-team-list .team-container .sidebar-tag a .team-img-20 {
	flex: 0 0 20px;
    min-width: 20px;
    min-height: 20px;
    background: url(../images/icons/team.webp) no-repeat center center;
    background-size: 20px 20px;
    float: left;
    position: relative;
}

.select-team-list .team-container .sidebar-tag span {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#group-list {
	padding: 10px;
	overflow: hidden;
}

#group-list .new-group-btn {
	width: calc(100% - 40px);
	max-width: fit-content;
	min-width: 0;
	height: 40px;
	margin: 0 auto 10px;
	padding: 0 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	box-sizing: border-box;
	white-space: nowrap;
	transform: none !important;
	transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out !important;
}

#group-list .new-group-btn:hover,
#group-list .new-group-btn:focus,
#group-list .new-group-btn:active {
	border: 1px solid var(--main-color);
	background: var(--main-color);
	box-shadow: none;
	transform: none !important;
}

#group-list .new-group-btn span {
	min-width: 0;
	max-width: 100%;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#group-list .new-group-btn .folder-20 {
	flex: 0 0 20px;
	float: none;
}

#tag-list.show,
#member-list.show,
.select-team-list.show,
.select-items.show,
#group-list.show {
	visibility: visible;
	pointer-events: auto;
	opacity: 1;
	transform: scale(1) translateY(0px);
}

@media screen and (max-width: 768px) {
	.cat-group {
		padding: 6px;
	}

	.cat-group-title {
		min-height: 44px;
		padding-left: 12px;
	}

	.manage-categories-container {
		min-height: 52px;
		padding: 7px 6px 7px 9px;
		white-space: nowrap;
		overflow: visible;
	}

	.manage-cont1 .manage-cat-color {
		flex-basis: 28px;
		width: 28px;
		height: 28px;
	}

	#tag-list,
	.select-team-list,
	#group-list {
		padding: 8px;
	}

	.tag-search-results,
	.team-container,
	#group-list-row {
		max-height: 280px;
	}

	.select-team-list .team-container .sidebar-tag a,
	#group-list-row li {
		min-height: 48px;
	}
}

.select-items-inside {
	min-width: 240px;
	max-height: 340px;
	overflow-y: auto;
	font-weight: 400;
	color: #818183;
}

.content-form-grid .select-items-inside {
	min-width: 190px;
}

.select-items-inside div {
	padding: 10px;
	height: 20px;
	cursor: pointer;
	text-align: left;
}

.select-items-inside div:hover {
	background: -moz-linear-gradient(-45deg, rgba(254,97,55,0.3) 0%, rgba(254,97,55,0.05) 40%, rgba(254,97,55,0) 80%);
	background: -webkit-linear-gradient(-45deg, rgba(254, 97, 55, 0.3) 0%, rgba(254, 97, 55, 0.05) 40%, rgba(254, 97, 55, 0) 80%);
	background: linear-gradient(135deg, rgba(254, 97, 55, 0.3) 0%, rgba(254, 97, 55, 0.05) 40%, rgba(254, 97, 55, 0) 80%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#33fe6137", endColorstr="#00fe6137",GradientType=1 );
	color: var(--main-color) !important;
}

.select-items.show {
	display: block;
}

.select-items.above {
	bottom: 100%;
	top: auto;
}

/* ==========================================================================
   END CUSTOM SELECT INPUT
   ========================================================================== */

/* ==========================================================================
   START CUSTOM PHONE INPUT
   ========================================================================== */

.phone-input-wrapper {
	position: relative;
	width: 300px;
	height: 45px;
	display: inline-block;
	margin: 0 auto;
}

.phone-flag-inside {
	position: absolute;
	height: 100%;
	padding: 0 5px;
	font-size: var(--font-size-main);
	border-radius: var(--border-radius-small) 0 0 var(--border-radius-small);
	display: inline-block;
	align-items: center;
	cursor: pointer;
	background: transparent;
	border: 1px solid #ffffff08;
	color: #a5a5a5;
	box-shadow: inset 0 0 15px 0 #0c0d0fa8;
	transition: all .3s ease-in-out;
	min-width: 80px;
	width: 80px;
}

.phone-flag-inside:hover {
	background: linear-gradient(135deg, var(--main-color) 0%, var(--second-color) 100%);
	border: 1px solid var(--main-color);
	color: #fff;
	transition: all .3s ease-in-out;
}

.phone-input-inside {
	width: 100%;
	box-sizing: border-box;
	padding-left: 105px !important;
	height: 46px;
	font-size: 1.13em;
	font-family: inherit;
	transition: all .4s ease-in-out;
}

.country-list-container {
	position: absolute;
	left: 0;
	top: 48px;
	border-radius: var(--radius-main);
	background: var(--foregroud-color-1);
	box-shadow: 0 3px 15px rgba(0, 0, 0, .4);
	z-index: 10;
}

/* Dropdown des pays/indics */

.country-list-inside {
	display: none;
	min-width: 240px;
	max-height: 340px;
	overflow-y: auto;
	margin: 10px;
}

.country-option-inside {
	padding: 10px;
	height: 20px;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 10px;
	transition: all .4s ease-in-out;
}

.country-option-inside:hover {
	background: -moz-linear-gradient(-45deg, rgba(254,97,55,0.3) 0%, rgba(254,97,55,0.05) 40%, rgba(254,97,55,0) 80%);
	background: -webkit-linear-gradient(-45deg, rgba(254, 97, 55, 0.3) 0%, rgba(254, 97, 55, 0.05) 40%, rgba(254, 97, 55, 0) 80%);
	background: linear-gradient(135deg, rgba(254, 97, 55, 0.3) 0%, rgba(254, 97, 55, 0.05) 40%, rgba(254, 97, 55, 0) 80%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#33fe6137", endColorstr="#00fe6137",GradientType=1 );
	color: var(--main-color) !important;
}

/* ==========================================================================
   END CUSTOM PHONE INPUT
   ========================================================================== */

/* ==========================================================================
   START CUSTOM COLOR INPUT
   ========================================================================== */

.palette-color-encart {
	display: flex;
	background: #ffffff05;
	border-radius: 10px;
	padding: 10px;
	margin-top: 10px;
	float: left;
	gap: 14px;
	border: 1px solid #ffffff08;
	width: 100%;
	box-sizing: border-box;
}

.palette-color-encart input {
	padding: 0px !important;
}

.palette-color-group {
	display: flex;
	align-items: center;
	position: relative;
	float: left;
	gap: 10px;
	box-sizing: border-box;
}

.dropdown-color {
	vertical-align: middle;
	position: relative;
}

.palette-color-cat {
	align-items: center;
	position: relative;
	float: left;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	overflow: hidden;
	display: flex;
	margin-right: 10px;
}

.palette-color-label {
	margin-right: 8px;
	letter-spacing: .8px;
}

.palette-color-input {
	-webkit-appearance: none;
	width: 45px !important;
	aspect-ratio: 1 / 1;
	cursor: pointer;
	transition: box-shadow .15s;
}

.palette-color-input::-webkit-color-swatch-wrapper {
	padding: 0;
	border-radius: var(--border-radius-small);
}

.palette-color-input::-webkit-color-swatch {
	border-radius: var(--border-radius-small);
	border: 2px solid #222;
}

.palette-color-input:focus,
.palette-color-cat:hover,
.dropdown-color:hover .palette-color-input,
.dropdown-color:focus .palette-color-input,
.dropdown-color:hover .palette-color-cat,
.dropdown-color:focus .palette-color-cat {
	box-shadow: 0 0 0 2px var(--main-color), 0 1px 3px #0004;
}

.palette-color-hex {
	letter-spacing: 1px;
	background: #ffffff05 !important;
	text-align: center;
	min-width: auto !important;
}

.color-presets {
	display: none;
	width: 200px;
	height: 135px;
	border-radius: var(--radius-main);
	background: var(--foregroud-color-1);
	position: absolute;
	padding: 10px;
	box-shadow: 0 3px 15px rgba(0, 0, 0, .4);
	pointer-events: all;
	z-index: 3;
}

.color-presets-scroll {
	overflow-y: auto;
	height: 100%;
	padding-right: 10px;
}

.color-presets-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}

.color-preset {
	aspect-ratio: 1 / 1;
	border-radius: 8px;
	cursor: pointer;
	border: 2px solid transparent;
	transition: all 0.2s ease-in-out;
}

.color-preset:hover {
	border: 2px solid var(--main-color);
	transition: all 0.2s ease-in-out;
}
/* ==========================================================================
   END CUSTOM COLOR INPUT
   ========================================================================== */

/* ==========================================================================
   START VIDEO PLAYER
   ========================================================================== */
.video-responsive {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16/9;
	height: 100%;
	width: 100%;
	border-radius: var(--radius-main);
}

#process .tab-pane .video-responsive,
.process-app .tab-pane .video-responsive {
	border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
}

.video-js .vjs-big-play-button:before,
.video-js .vjs-control:before,
.video-js .vjs-modal-dialog,
.vjs-modal-dialog .vjs-modal-dialog-content {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	font-family: "FontAwesome";
	cursor: pointer;
}

.video-js .vjs-big-play-button:before,
.video-js .vjs-control:before {
	text-align: center;
}

.vjs-icon-play:before,
.video-js .vjs-big-play-button:before,
.video-js .vjs-play-control:before {
	content: "\f04b";
}

.vjs-icon-play-circle:before {
	content: "\f04b";
}

.vjs-icon-play,
.video-js .vjs-big-play-button,
.video-js .vjs-play-control {
	scale: 1.0;
	transition: all 0.2s ease-in-out;
}

.vjs-icon-play:hover,
.video-js .vjs-big-play-button:hover,
.video-js .vjs-play-control:hover {
	scale: 1.05;
	opacity: 0.9;
	box-shadow: 0 0 50px 5px var(--main-color-transp);
	transition: all 0.2s ease-in-out;
}

.vjs-icon-pause:before,
.video-js .vjs-play-control.vjs-playing:before {
	content: "\f04c";
}

.vjs-icon-volume-mute:before,
.video-js .vjs-mute-control.vjs-vol-0:before,
.video-js .vjs-volume-menu-button.vjs-vol-0:before {
	content: "\f026";
}

.vjs-icon-volume-low:before,
.video-js .vjs-mute-control.vjs-vol-1:before,
.video-js .vjs-volume-menu-button.vjs-vol-1:before {
	content: "\f027";
}

.vjs-icon-volume-mid:before,
.video-js .vjs-mute-control.vjs-vol-2:before,
.video-js .vjs-volume-menu-button.vjs-vol-2:before {
	content: "\f027";
}

.vjs-icon-volume-high:before,
.video-js .vjs-mute-control:before,
.video-js .vjs-volume-menu-button:before {
	content: "\f028";
}

.vjs-icon-fullscreen-enter:before,
.video-js .vjs-fullscreen-control:before {
	content: "\f065";
}

.vjs-icon-fullscreen-exit:before,
.video-js.vjs-fullscreen .vjs-fullscreen-control:before {
	content: "\f066";
}

.vjs-icon-square:before {
	content: "";
}

.vjs-icon-spinner:before {
	content: "";
}

.vjs-icon-subtitles:before,
.video-js .vjs-subtitles-button:before {
	content: "";
}

.vjs-icon-captions:before,
.video-js .vjs-captions-button:before {
	content: "";
}

.vjs-icon-chapters:before,
.video-js .vjs-chapters-button:before {
	content: "";
}

.vjs-icon-share:before {
	content: "";
}

.vjs-icon-cog:before {
	content: "";
}

.vjs-icon-circle:before,
.video-js .vjs-mouse-display:before,
.video-js .vjs-play-progress:before,
.video-js .vjs-volume-level:before {
	content: "";
}

.vjs-icon-circle-outline:before {
	content: "";
}

.vjs-icon-circle-inner-circle:before {
	content: "";
}

.vjs-icon-hd:before {
	content: "";
}

.vjs-icon-cancel:before,
.video-js .vjs-control.vjs-close-button:before {
	content: "";
}

.vjs-icon-replay:before {
	content: "";
}

.vjs-icon-facebook:before {
	content: "";
}

.vjs-icon-linkedin:before {
	content: "";
}

.vjs-icon-x:before {
	content: "";
}

.vjs-icon-tumblr:before {
	content: "";
}

.vjs-icon-pinterest:before {
	content: "";
}

.vjs-icon-audio-description:before {
	content: "";
}

.video-js {
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 9;
	top: -2px;
	left: 0px;
	vertical-align: top;
	box-sizing: border-box;
	color: #fff;
	position: absolute;
	padding: 0;
	font-size: 10px;
	line-height: 1;
	font-weight: normal;
	font-style: normal;
	font-family: "FontAwesome";
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	overflow: hidden;
}

.video-js:-moz-full-screen {
	position: absolute;
}

.video-js:-webkit-full-screen {
	width: 100% !important;
	height: 100% !important;
}

.video-js *,
.video-js *:before,
.video-js *:after {
	box-sizing: inherit;
}

.video-js ul {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	list-style-position: outside;
	margin-left: 0;
	margin-right: 0;
	margin-top: 0;
	margin-bottom: 0;
}

.video-js.vjs-fluid,
.video-js.vjs-16-9,
.video-js.vjs-4-3 {
	width: 100%;
	max-width: 100%;
	height: 0;
}

.video-js.vjs-16-9 {
	padding-top: 56.25%;
}

.video-js.vjs-4-3 {
	padding-top: 75%;
}

.video-js.vjs-fill {
	width: 100%;
	height: 100%;
}

.video-js .vjs-tech {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

body.vjs-full-window {
	padding: 0;
	margin: 0;
	height: 100%;
	overflow-y: auto;
}

.vjs-full-window .video-js.vjs-fullscreen {
	position: fixed;
	overflow: hidden;
	z-index: 1000;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
}

.video-js.vjs-fullscreen {
	width: 100% !important;
	height: 100% !important;
	padding-top: 0 !important;
}

.video-js.vjs-fullscreen.vjs-user-inactive, .vjs-user-inactive {
	cursor: none;
}

.vjs-hidden {
	display: none !important;
}

.video-js .vjs-offscreen {
	height: 1px;
	left: -9999px;
	position: absolute;
	top: 0;
	width: 1px;
}

.vjs-lock-showing {
	display: block !important;
	opacity: 1;
	visibility: visible;
}

.vjs-no-js {
	padding: 20px;
	color: #fff;
	background-color: #000;
	font-size: 18px;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	width: 300px;
	height: 150px;
	margin: 0px auto;
}

.vjs-no-js a,
.vjs-no-js a:visited {
	color: #66A8CC;
}

.video-js .vjs-big-play-button {
	font-size: 450%;
	line-height: 80px;
	height: 80px;
	width: 80px;
	display: block;
	position: absolute;
	text-indent: 5px;
	top: calc(50% - 40px);
	left: calc(50% - 40px);
	padding: 0;
	text-align: center;
	cursor: pointer;
	background: var(--main-color);
	color: #fff;
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	border-radius: 100%;
	outline: none;
}

/* .video-js .vjs-big-play-button:after {
content: 'Interstellar';
font-family: 'Questrial';
font-size: 35%;
line-height: 38px;
height: auto;
width: auto;
position: absolute;
top: 5px;
left: 100px;
padding: 0 15px;
text-align: center;
background: #111;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.1),0 2px 10px 0 rgba(0,0,0,0.1);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
} */

.vjs-controls-disabled .vjs-big-play-button,
.vjs-has-started .vjs-big-play-button,
.vjs-using-native-controls .vjs-big-play-button,
.vjs-error .vjs-big-play-button {
	display: none;
}

.vjs-has-started .vjs-big-play-button {
	display: none !important;
}

.video-js button {
	background: none;
	border: none;
	color: inherit;
	display: inline-block;
	overflow: hidden;
	font-size: inherit;
	line-height: inherit;
	text-transform: none;
	text-decoration: none;
	transition: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/* Empêcher les styles globaux des boutons de déformer les contrôles Video.js */
.video-js .vjs-big-play-button {
	padding: 0 !important;
	transform: none;
}

.video-js .vjs-control-bar button[type="button"],
.video-js .vjs-control-bar .vjs-button {
	margin: 0;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: inherit !important;
	opacity: 1;
	scale: 1 !important;
	transform: none !important;
	transition: opacity .2s ease-in-out;
}

.video-js .vjs-control-bar button[type="button"]:hover,
.video-js .vjs-control-bar button[type="button"]:focus,
.video-js .vjs-control-bar button[type="button"]:active,
.video-js .vjs-control-bar .vjs-button:hover,
.video-js .vjs-control-bar .vjs-button:focus,
.video-js .vjs-control-bar .vjs-button:active {
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: #fff !important;
	opacity: .7;
	scale: 1 !important;
	transform: none !important;
	outline: none;
}

.video-js .vjs-control.vjs-close-button {
	cursor: pointer;
	height: 3em;
	position: absolute;
	right: 0;
	top: 0.5em;
	z-index: 2;
}

.vjs-menu-button {
	cursor: pointer;
}

.vjs-menu .vjs-menu-content {
	display: block;
	padding: 0;
	margin: 0;
	overflow: auto;
}

.vjs-scrubbing .vjs-menu-button:hover .vjs-menu {
	display: none;
}

.vjs-menu li {
	list-style: none;
	margin: 2px 0px;
	padding: 8px 15px;
	font-size: 14px;
	text-align: center;
	text-transform: lowercase;
	color: rgba(255,255,255,.6);
	border-radius: 3px;
	transition: all .15s ease;
	outline: none;
}

.vjs-menu li:hover {
	color: rgba(255,255,255,.85);
	text-shadow: 0 0 3px rgba(255,255,255,.5);
}

.vjs-menu li:active {
	transform: scale(.9);
}

.vjs-menu li.vjs-selected,
.vjs-menu li.vjs-selected:focus,
.vjs-menu li.vjs-selected:hover {
	color: rgba(255,255,255,1);
	text-shadow: 0 0 15px rgba(0,0,0,.5);
	/* background: -webkit-linear-gradient(to top, #FF7539 0%, #FFAB00 100%);
	background: linear-gradient(to top, #FF7539 0%, #FFAB00 100%); */
}

.vjs-menu li.vjs-menu-title {
	text-align: center;
	text-transform: uppercase;
	font-size: 1em;
	line-height: 2em;
	padding: 0;
	margin: 0 0 0.3em 0;
	font-weight: bold;
	cursor: default;
}

.vjs-menu-button-popup .vjs-menu {
	display: none;
	position: absolute;
	bottom: 0;
	width: 50px;
	left: -3em;
	height: 0em;
	margin-bottom: 1.5em;
	border-top-color: rgba(43, 51, 63, 0.7);
}

.vjs-menu-button-popup .vjs-menu .vjs-menu-content {
	display: block;
	padding: 5px;
	/* background: -webkit-linear-gradient(top, rgba(30,30,30,.9), rgba(10,10,10,.9));
	background: linear-gradient(to bottom , rgba(30,30,30,.9), rgba(10,10,10,.9));
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 0 10px rgba(0,0,0,.3); */
	border-radius: 3px;
	color: #fff;
	font-size: 100%;
	margin-bottom: 8px;
	-webkit-transition: all .15s;
	transition: all .15s;
	position: absolute;
	bottom: 15px;
	float: left;
}

.vjs-menu-button-popup:hover .vjs-menu,
.vjs-menu-button-popup .vjs-menu.vjs-lock-showing {
	display: block;
}

.video-js .vjs-menu-button-inline {
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
	overflow: hidden;
}

.video-js .vjs-menu-button-inline:before {
	width: 2.222222222em;
}

.video-js .vjs-menu-button-inline:hover,
.video-js .vjs-menu-button-inline:focus,
.video-js .vjs-menu-button-inline.vjs-slider-active,
.video-js.vjs-no-flex .vjs-menu-button-inline {
	width: 10em;
}

.video-js .vjs-menu-button-inline.vjs-slider-active {
	-webkit-transition: none;
	-moz-transition: none;
	-o-transition: none;
	transition: none;
}

.vjs-menu-button-inline .vjs-menu {
	opacity: 0;
	height: 100%;
	width: auto;
	position: absolute;
	left: 4em;
	top: 0;
	padding: 0;
	margin: 0;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}

.vjs-menu-button-inline:hover .vjs-menu,
.vjs-menu-button-inline:focus .vjs-menu,
.vjs-menu-button-inline.vjs-slider-active .vjs-menu {
	display: block;
	opacity: 1;
}

.vjs-no-flex .vjs-menu-button-inline .vjs-menu {
	display: block;
	opacity: 1;
	position: relative;
	width: auto;
}

.vjs-no-flex .vjs-menu-button-inline:hover .vjs-menu,
.vjs-no-flex .vjs-menu-button-inline:focus .vjs-menu,
.vjs-no-flex .vjs-menu-button-inline.vjs-slider-active .vjs-menu {
	width: auto;
}

.vjs-menu-button-inline .vjs-menu-content {
	width: auto;
	height: 100%;
	margin: 0;
	overflow: hidden;
}

.video-js .vjs-control-bar {
	display: none;
	max-width: 70%;
	width: 100%;
	position: absolute;
	bottom: 20px;
	left: calc( 50% - 35% );
	height: 50px;
	border-radius: 5px;
	background: rgba(0,0,0,.6);
	-webkit-backdrop-filter: blur(20px) saturate(1.5) brightness(1.2);
	backdrop-filter: blur(20px) saturate(1.5) brightness(1.2);
}

.vjs-has-started .vjs-control-bar {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	visibility: visible;
	opacity: 1;
	transform-origin: center bottom;
	transition: all .15s cubic-bezier(.44,.14,.34,.97), width 0s, left 0s;
}

.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
	visibility: hidden;
	opacity: 0;
	bottom: 5px;
	transition: .15s cubic-bezier(.44,.14,.34,.97);
}

.vjs-controls-disabled .vjs-control-bar,
.vjs-using-native-controls .vjs-control-bar,
.vjs-error .vjs-control-bar {
	display: none !important;
}

.vjs-audio.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
	opacity: 1;
	visibility: visible;
}

@media screen {
	.vjs-user-inactive.vjs-playing .vjs-control-bar:before {
		content: "";
	}
}

.vjs-has-started.vjs-no-flex .vjs-control-bar {
	display: table;
}

.video-js .vjs-control {
	outline: none;
	position: relative;
	text-align: center;
	margin: 0;
	padding: 0;
	height: 100%;
	width: 50px;
	font-size: 120%;
	-webkit-box-flex: none;
	-moz-box-flex: none;
	-webkit-flex: none;
	-ms-flex: none;
	flex: none;
}

.video-js .vjs-control:before {
	font-size: 200%;
	line-height: 50px;
	color: #fff;
}

.video-js .vjs-control-text {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	visibility: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

.vjs-no-flex .vjs-control {
	display: table-cell;
	vertical-align: middle;
}

.video-js .vjs-custom-control-spacer {
	display: none;
}

.video-js .vjs-progress-control {
	-webkit-box-flex: auto;
	-moz-box-flex: auto;
	-webkit-flex: auto;
	-ms-flex: auto;
	flex: auto;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}

.vjs-live .vjs-progress-control {
	display: none;
}

.video-js .vjs-progress-holder {
	-webkit-box-flex: auto;
	-moz-box-flex: auto;
	-webkit-flex: auto;
	-ms-flex: auto;
	flex: auto;
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-o-transition: all 0.2s;
	transition: all 0.2s;
	height: 5px;
	border-radius: 5px;
}

.video-js .vjs-progress-control:hover .vjs-mouse-display:after,
.video-js .vjs-progress-control:hover .vjs-play-progress:after {
	display: block;
	font-size: 120%;
}

.video-js .vjs-progress-holder .vjs-play-progress,
.video-js .vjs-progress-holder .vjs-load-progress,
.video-js .vjs-progress-holder .vjs-load-progress div {
	position: absolute;
	display: block;
	height: 5px;
	margin: 0;
	padding: 0;
	width: 0;
	left: 0;
	top: 0;
	border-radius: 5px;
}

.video-js .vjs-mouse-display:before {
	display: none;
}

.video-js .vjs-play-progress {
	background: #FFF;
	border-radius: 10px;
	transition: all .25s linear;
}

.video-js .vjs-mouse-display:after,
.video-js .vjs-play-progress:after {
	display: none;
	position: absolute;
	top: -28px;
	right: 0;
	font-size: 12px !important;
	color: transparent;
	content: attr(data-current-time);
	padding: 8px;
	pointer-events: none;
	transition: .2s ease;
}

.video-js .vjs-play-progress:before,
.video-js .vjs-play-progress:after {
	z-index: 10;
}

.video-js .vjs-load-progress {
	background: rgba(255,255,255,.3);
	transition: width .25s linear;
}

.video-js .vjs-load-progress div {
	background: rgba(0,0,0,.2);
}

.video-js.vjs-no-flex .vjs-progress-control {
	width: auto;
}

.video-js .vjs-progress-control .vjs-mouse-display {
	position: absolute;
}

.vjs-no-flex .vjs-progress-control .vjs-mouse-display {
	z-index: 0;
}

.video-js .vjs-progress-control:hover .vjs-mouse-display {
	display: block;
}

.video-js.vjs-user-inactive .vjs-progress-control .vjs-mouse-display,
.video-js.vjs-user-inactive .vjs-progress-control .vjs-mouse-display:after {
	visibility: hidden;
	opacity: 0;
	-webkit-transition: visibility 1s, opacity 1s;
	-moz-transition: visibility 1s, opacity 1s;
	-o-transition: visibility 1s, opacity 1s;
	transition: visibility 1s, opacity 1s;
}

.video-js.vjs-user-inactive.vjs-no-flex .vjs-progress-control .vjs-mouse-display,
.video-js.vjs-user-inactive.vjs-no-flex .vjs-progress-control .vjs-mouse-display:after {
	display: none;
}

.video-js .vjs-progress-control .vjs-mouse-display:after {
	color: #999;
	background: #222;
	border-radius: 5px 5px 0px 5px;
	visibility: visible;
}

.video-js .vjs-slider {
	outline: 0;
	position: relative;
	cursor: pointer;
	padding: 0;
	margin: 0 0.45em 0 0.45em;
	background: rgba(255,255,255,.15);
}

.video-js .vjs-mute-control, .video-js .vjs-volume-menu-button {
	cursor: pointer;
	-webkit-box-flex: none;
	-moz-box-flex: none;
	-webkit-flex: none;
	-ms-flex: none;
	flex: none;
}

.video-js .vjs-volume-control {
	width: 5em;
	-webkit-box-flex: none;
	-moz-box-flex: none;
	-webkit-flex: none;
	-ms-flex: none;
	flex: none;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}

.video-js .vjs-volume-bar {
	margin: 1.35em 0.45em;
	top: 9px;
	border-radius: 5px;
}

.vjs-volume-bar.vjs-slider-horizontal {
	width: 50px;
	height: 5px;
	border-radius: 5px;
}

.vjs-volume-bar.vjs-slider-vertical {
	width: 5px;
	height: 50px;
	margin: 1.35em auto;
	border-radius: 5px;
}

.video-js .vjs-volume-level {
	position: absolute;
	bottom: 0;
	left: 0;
	background: #FFF;
	border-radius: 5px;
	transition: all 0s;
}

/* .video-js .vjs-volume-level:before {
content: '';
position: absolute;
width: 9px;
height: 9px;
bottom: -2px;
right: -6px;
background: #fff;
border-radius: 50px;
} */

.vjs-slider-vertical .vjs-volume-level {
	width: 5px;
}

.vjs-slider-vertical .vjs-volume-level:before {
	top: -0.5em;
	left: -0.3em;
}

.vjs-slider-horizontal .vjs-volume-level {
	height: 5px;
}

.vjs-slider-horizontal .vjs-volume-level:before {
	top: -2px;
	right: -0.5em;
}

.vjs-volume-bar.vjs-slider-vertical .vjs-volume-level {
	height: 100%;
}

.vjs-volume-bar.vjs-slider-horizontal .vjs-volume-level {
	width: 100%;
}

.vjs-menu-button-popup.vjs-volume-menu-button .vjs-menu {
	display: block;
	width: 0;
	height: 0;
	border-top-color: transparent;
}

.vjs-menu-button-popup.vjs-volume-menu-button-vertical .vjs-menu {
	left: 0.5em;
	height: 8em;
}

.vjs-menu-button-popup.vjs-volume-menu-button-horizontal .vjs-menu {
	left: -2em;
}

.vjs-menu-button-popup.vjs-volume-menu-button .vjs-menu-content {
	height: 0;
	width: 0;
	overflow-x: hidden;
	overflow-y: hidden;
}

.vjs-volume-menu-button-vertical:hover .vjs-menu-content,
.vjs-volume-menu-button-vertical .vjs-lock-showing .vjs-menu-content {
	height: 50px;
	width: 85px;
}

.vjs-volume-menu-button-horizontal:hover .vjs-menu-content,
.vjs-volume-menu-button-horizontal .vjs-lock-showing .vjs-menu-content {
	height: 50px;
	width: 60px;
}

.vjs-volume-menu-button.vjs-menu-button-inline .vjs-menu-content {
	background-color: transparent !important;
}

.vjs-poster {
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: contain;
	cursor: pointer;
	height: 100%;
	margin: 0;
	padding: 0;
	position: relative;
	width: 100%;
}

.vjs-poster img {
	display: block;
	margin: 0 auto;
	max-height: 100%;
	padding: 0;
	width: 100%;
}

.vjs-has-started .vjs-poster {
	visibility: hidden;
	opacity: 0;
}

.vjs-audio.vjs-has-started .vjs-poster {
	visibility: visible;
}

.vjs-controls-disabled .vjs-poster {
	visibility: hidden;
	display: none;
}

.vjs-using-native-controls .vjs-poster {
	visibility: hidden;
	display: none;
}

.video-js .vjs-live-control {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: flex-start;
	-webkit-align-items: flex-start;
	-ms-flex-align: flex-start;
	align-items: flex-start;
	-webkit-box-flex: auto;
	-moz-box-flex: auto;
	-webkit-flex: auto;
	-ms-flex: auto;
	flex: auto;
	font-size: 1em;
	line-height: 3em;
}

.vjs-no-flex .vjs-live-control {
	display: table-cell;
	width: auto;
	text-align: left;
}

.video-js .vjs-time-control {
	-webkit-box-flex: none;
	-moz-box-flex: none;
	-webkit-flex: none;
	-ms-flex: none;
	flex: none;
	font-size: 100%;
	line-height: 50px;
	color: rgba(255,255,255,.8);
}

.vjs-live .vjs-time-control {
	display: none;
}

.video-js .vjs-current-time,
.vjs-no-flex .vjs-current-time {
	display: block;
}

.video-js .vjs-duration,
.vjs-no-flex .vjs-duration {
	display: block;
}

.vjs-duration.vjs-control, .vjs-current-time.vjs-control {
	width: auto !important;
	padding: 0 10px;
}

.vjs-time-divider {
	line-height: 50px;
	width: 2px;
	transform: translateX(-2px);
}

.vjs-time-divider div span {
	font-size: 150%;
	color: rgba(255,255,255,.8);
}

.vjs-live .vjs-time-divider {
	display: none;
}

.video-js .vjs-play-control {
	cursor: pointer;
	-webkit-box-flex: none;
	-moz-box-flex: none;
	-webkit-flex: none;
	-ms-flex: none;
	flex: none;
}

.video-js .vjs-play-control:after {
	content: "Play/Pause";
	position: absolute;
	top: -40px;
	left: 0px;
	width: auto;
	height: auto;
	background: #111;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.1),0 2px 10px 0 rgba(0,0,0,0.1);
	border-radius: 5px;
	color: #ddd;
	text-align: center;
	letter-spacing: 1px;
	padding: 10px 15px;
	pointer-events: none;
	opacity: 0;
	transition: .2s ease;
	transition-delay: 0s;
}

.video-js .vjs-play-control:hover:after {
	opacity: 1;
	transition-delay: 1.3s;
}

.vjs-text-track-display {
	position: absolute;
	bottom: 3em;
	left: 0;
	right: 0;
	top: 0;
	pointer-events: none;
}

.video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display {
	bottom: 1em;
}

.video-js .vjs-text-track {
	font-size: 1.4em;
	text-align: center;
	margin-bottom: 0.1em;
	background-color: #000;
	background-color: rgba(0, 0, 0, 0.5);
}

.vjs-subtitles {
	color: #fff;
}

.vjs-captions {
	color: #fc6;
}

.vjs-tt-cue {
	display: block;
}

video::-webkit-media-text-track-display {
	-moz-transform: translateY(-3em);
	-ms-transform: translateY(-3em);
	-o-transform: translateY(-3em);
	-webkit-transform: translateY(-3em);
	transform: translateY(-3em);
}

.video-js.vjs-user-inactive.vjs-playing video::-webkit-media-text-track-display {
	-moz-transform: translateY(-1.5em);
	-ms-transform: translateY(-1.5em);
	-o-transform: translateY(-1.5em);
	-webkit-transform: translateY(-1.5em);
	transform: translateY(-1.5em);
}

.video-js .vjs-fullscreen-control {
	cursor: pointer;
	-webkit-box-flex: none;
	-moz-box-flex: none;
	-webkit-flex: none;
	-ms-flex: none;
	flex: none;
}

.video-js .vjs-fullscreen-control:after {
	content: "Fullscreen";
	position: absolute;
	top: -40px;
	right: 0px;
	width: auto;
	height: auto;
	background: #111;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.1),0 2px 10px 0 rgba(0,0,0,0.1);
	border-radius: 5px;
	color: #ddd;
	text-align: center;
	letter-spacing: 1px;
	padding: 10px 15px;
	pointer-events: none;
	opacity: 0;
	transition: .2s ease;
	transition-delay: 0s;
}

.video-js .vjs-fullscreen-control:hover:after {
	opacity: 1;
	transition-delay: 1.3s;
}

.vjs-playback-rate .vjs-playback-rate-value {
	font-size: 120%;
	line-height: 50px;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
}

.vjs-playback-rate .vjs-menu {
	transform: translateX(0%);
}

.vjs-error .vjs-error-display .vjs-modal-dialog-content {
	font-size: 1.4em;
	text-align: center;
}

.vjs-error .vjs-error-display:before {
	color: #fff;
	content: "X";
	font-family: Arial, Helvetica, sans-serif;
	font-size: 4em;
	left: 0;
	line-height: 1;
	margin-top: -0.5em;
	position: absolute;
	text-shadow: 0.05em 0.05em 0.1em #000;
	text-align: center;
	top: 50%;
	vertical-align: middle;
	width: 100%;
}

.vjs-loading-spinner {
	position: absolute;
	top: 5px;
	left: calc( 50% - 65px );
	width: 130px;
	height: 40px;
	border-radius: 5px;
	background: #111;
	overflow: hidden;
	visibility: hidden;
	opacity: 0;
	transition: all .25s ease;
	font-family: Montserrat,sans-serif;
}

.vjs-loading-spinner:before {
	content: "";
	position: absolute;
	top: 10px;
	left: 10px;
	width: 20px;
	height: 20px;
	border-radius: 100%;
	border: solid transparent 2px;
	border-top-color: #fff;
	-webkit-animation: rotate 1s infinite linear;
	animation: rotate 1s infinite linear;
}

.vjs-loading-spinner:after {
	content: "Loading";
	position: absolute;
	top: 0px;
	right: 5px;
	width: 90px;
	height: 40px;
	line-height: 40px;
	font-size: 150%;
	text-align: center;
}

.vjs-seeking .vjs-loading-spinner,
.vjs-waiting .vjs-loading-spinner {
	visibility: visible;
	opacity: 1;
	top: 20px;
}

@keyframes rotate {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.vjs-chapters-button .vjs-menu {
	left: -10em;
	width: 0;
}

.vjs-chapters-button .vjs-menu ul {
	width: 24em;
}

.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-custom-control-spacer {
	-webkit-box-flex: auto;
	-moz-box-flex: auto;
	-webkit-flex: auto;
	-ms-flex: auto;
	flex: auto;
}

.video-js.vjs-layout-tiny:not(.vjs-fullscreen).vjs-no-flex .vjs-custom-control-spacer {
	width: auto;
}

.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-current-time,
.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-captions-button,
.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-time-divider,
.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-progress-control,
.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-duration,
.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-remaining-time,
.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-playback-rate,
.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-mute-control,
.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-volume-control,
.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-chapters-button,
.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-captions-button,
.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-subtitles-button,
.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-volume-menu-button {
	display: none;
}

.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-current-time,
.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-captions-button,
.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-time-divider,
.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-duration,
.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-remaining-time,
.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-playback-rate,
.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-captions-button,
.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-mute-control,
.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-volume-control,
.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-chapters-button,
.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-subtitles-button,
.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-volume-button,
.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-fullscreen-control {
	display: none;
}

.video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-current-time,
.video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-captions-button,
.video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-time-divider,
.video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-duration,
.video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-remaining-time,
.video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-playback-rate,
.video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-mute-control,
.video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-volume-control,
.video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-chapters-button,
.video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-subtitles-button {
	display: none;
}

.vjs-remaining-time {
	display: none;
}

.vjs-caption-settings {
	position: relative;
	top: 1em;
	/* background-color: #2B333F;
	background-color: rgba(43, 51, 63, 0.75); */
	color: #fff;
	margin: 0 auto;
	padding: 0.5em;
	height: 15em;
	font-size: 12px;
	width: 40em;
}

.vjs-caption-settings .vjs-tracksettings {
	top: 0;
	bottom: 2em;
	left: 0;
	right: 0;
	position: absolute;
	overflow: auto;
}

.vjs-caption-settings .vjs-tracksettings-colors,
.vjs-caption-settings .vjs-tracksettings-font {
	float: left;
}

.vjs-caption-settings .vjs-tracksettings-colors:after,
.vjs-caption-settings .vjs-tracksettings-font:after,
.vjs-caption-settings .vjs-tracksettings-controls:after {
	clear: both;
}

.vjs-caption-settings .vjs-tracksettings-controls {
	position: absolute;
	bottom: 1em;
	right: 1em;
}

.vjs-caption-settings .vjs-tracksetting {
	margin: 5px;
	padding: 3px;
	min-height: 40px;
}

.vjs-caption-settings .vjs-tracksetting label {
	display: block;
	width: 100px;
	margin-bottom: 5px;
}

.vjs-caption-settings .vjs-tracksetting span {
	display: inline;
	margin-left: 5px;
}

.vjs-caption-settings .vjs-tracksetting > div {
	margin-bottom: 5px;
	min-height: 20px;
}

.vjs-caption-settings .vjs-tracksetting > div:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	min-height: 0;
}

.vjs-caption-settings label > input {
	margin-right: 10px;
}

.vjs-caption-settings input[type="button"] {
	width: 40px;
	height: 40px;
}

/* .video-js .vjs-modal-dialog {
	background: rgba(0, 0, 0, 0.8);
	background: -webkit-linear-gradient(-90deg, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0));
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0));
} */

.vjs-modal-dialog .vjs-modal-dialog-content {
	font-size: 1.2em;
	line-height: 1.5;
	padding: 20px 24px;
	z-index: 1;
}
/* ==========================================================================
   END VIDEO PLAYER
   ========================================================================== */

/* ==========================================================================
   START FOOTER RESPONSIVE
   ========================================================================== */
@media only screen and (max-width: 1010px) {
	footer { display: block; height: auto; min-height: 0; padding: 35px 20px 25px; box-sizing: border-box; clear: both; }
	footer > ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 25px 20px; width: 100%; margin: 0; padding: 0; box-sizing: border-box; }
	footer > ul > li { width: 100%; float: none; min-width: 0; }
	footer > ul > li ul li { margin-left: 0; line-height: 2.2; }
	footer li.logo-footer-container { grid-column: 1 / -1; margin-top: 10px; }
	footer p { margin: 20px 0 10px; padding: 12px 15px; border-radius: var(--border-radius-small); }
}

@media only screen and (max-width: 600px) {
	footer { padding: 30px 15px 20px; }
	footer > ul { grid-template-columns: 1fr; gap: 20px; }
	footer > ul > li, footer > ul > li ul, footer > ul > li ul li { width: 100%; text-align: center; }
	footer > ul > li ul li { margin: 0; line-height: 2; }
	footer p { margin: 15px 0 8px; padding: 10px 12px; font-size: 14px; text-align: center; border-radius: var(--border-radius-small); }
	footer a.logo { width: 100%; max-width: 200px; }
}
/* ==========================================================================
   END FOOTER RESPONSIVE
   ========================================================================== */

/* === GLOBAL MODAL SHOW TRANSFORM START === */
:is(#connect, #categorieuser, #delete, #block-ip, #team, #member, #invit, #resume, #welcome-tour),
:is(#connect, #categorieuser, #delete, #block-ip, #team, #member, #invit, #resume, #welcome-tour) .opacityShow {
	-webkit-animation: none !important;
	-moz-animation: none !important;
	-o-animation: none !important;
	animation: none !important;
}

:is(#connect, #categorieuser, #delete, #block-ip, #team, #member, #invit, #resume, #welcome-tour) > :is(.modal-container, .modal-container-large, .modal-container-welcome-tour) {
	opacity: 0;
	transform: scale(.95) translateY(-10px);
	transform-origin: center top;
	transition: opacity .35s ease, transform .35s ease;
}

:is(#connect, #categorieuser, #delete, #block-ip, #team, #member, #invit, #resume, #welcome-tour).show > :is(.modal-container, .modal-container-large, .modal-container-welcome-tour) {
	opacity: 1;
	transform: scale(1) translateY(0);
}

:is(#connect, #categorieuser, #delete, #block-ip, #team, #member, #invit, #resume) > .modal-background {
	opacity: 0;
	transition: opacity .35s ease;
}

:is(#connect, #categorieuser, #delete, #block-ip, #team, #member, #invit, #resume).show > .modal-background {
	opacity: 1;
}

.modal-background-welcome-tour {
	opacity: 0;
	transition: opacity .35s ease;
}

.modal-background-welcome-tour.show {
	opacity: 1;
}

@media only screen and (max-width: 768px) {
	:is(#connect, #categorieuser, #delete, #block-ip, #team, #member, #invit, #resume, #welcome-tour) > :is(.modal-container, .modal-container-large, .modal-container-welcome-tour) {
		transform: scale(.98) translateY(12px);
	}

	:is(#connect, #categorieuser, #delete, #block-ip, #team, #member, #invit, #resume, #welcome-tour).show > :is(.modal-container, .modal-container-large, .modal-container-welcome-tour) {
		transform: scale(1) translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	:is(#connect, #categorieuser, #delete, #block-ip, #team, #member, #invit, #resume, #welcome-tour) > :is(.modal-container, .modal-container-large, .modal-container-welcome-tour),
	:is(#connect, #categorieuser, #delete, #block-ip, #team, #member, #invit, #resume) > .modal-background,
	.modal-background-welcome-tour {
		transition-duration: .01ms !important;
	}
}
/* === GLOBAL MODAL SHOW TRANSFORM END === */

/* === TRASH START === */
#trash-list > li.trash-list-item {
	display: block;
	position: relative;
	width: auto;
	max-width: none;
	margin: 6px 12px;
	padding: 0;
	box-sizing: border-box;
	line-height: normal;
	overflow: visible;
}

#trash-list .trash-list-item:hover {
	z-index: 700;
}

#trash-list > li.trash-list-item > .trash-list-row {
	--trash-accent: var(--main-color);
	display: flex;
	width: 100%;
	max-width: 100%;
	align-items: center;
	gap: 7px;
	min-height: 52px;
	padding: 7px 6px 7px 9px;
	box-sizing: border-box;
	position: relative;
	overflow: visible;
	background: #ffffff03;
	border: 1px solid #ffffff08;
	border-left: 4px solid var(--trash-accent);
	border-radius: var(--border-radius-small);
    transition: all .3s ease-in-out;
}

#trash-list > li.trash-list-item > .trash-list-row:hover {
	border-left: 1px solid #ffffff08;    
	transition: all .3s ease-in-out;
}

#trash-list .trash-list-row:hover {
	background: #ffffff06;
	border-top-color: #ffffff10;
	border-right-color: #ffffff10;
	border-bottom-color: #ffffff10;
}

#trash-list a.trash-list-link,
#trash-list .trash-list-static {
	display: flex;
	align-items: center;
	gap: 9px;
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	padding: 0;
	border: 0;
	line-height: normal;
	letter-spacing: 0;
	text-transform: none;
	color: #818183;
	background: transparent;
	overflow: visible;
	transition: color .2s ease;
}

#trash-list a.trash-list-link:hover,
#trash-list a.trash-list-link.slinky-menu-active {
	color: #ffffff;
	background: transparent;
	border-left: 0;
}

#trash-list .trash-list-icon {
	flex: 0 0 30px;
	width: 30px;
	height: 30px;
	min-width: 30px;
	min-height: 30px;
	margin: 0 !important;
	float: none;
	position: relative;
	box-sizing: border-box;
	border-radius: var(--border-radius-small);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 30px 30px;
}

#trash-list .trash-list-icon-group {
	background-color: var(--trash-accent);
	background-image: url("../images/icons/folder.webp");
}

#trash-list .trash-list-icon-collection {
	background-color: var(--trash-accent);
	background-image: url("../images/icons/category.png");
}

#trash-list .trash-list-icon-team {
	background-image: url("../images/icons/team.webp");
	background-size: 28px 28px;
}

#trash-list .trash-list-copy {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: center;
	gap: 1px;
	min-width: 0;
	overflow: hidden;
}

#trash-list .trash-list-type {
	display: block;
	color: #5d6168;
	font-size: 9px;
	font-weight: 500;
	line-height: 12px;
	letter-spacing: .45px;
	text-transform: uppercase;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#trash-list .trash-list-copy p,
#trash-list li a .trash-list-copy p {
	display: block;
	position: static;
	max-width: none;
	margin: 0;
	color: #a5a6aa;
	font-size: 12px;
	font-weight: 400;
	line-height: 17px;
	text-align: left;
	text-transform: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#trash-list .trash-list-row:hover .trash-list-copy p {
	color: #ffffff;
}

#trash-list .trash-list-row > .days-left {
	flex: 0 0 auto;
	float: none;
	margin: 0;
	padding: 0 6px;
	font-size: 9px;
	line-height: 18px;
	white-space: nowrap;
}

#trash-list .trash-list-actions {
	flex: 0 0 30px;
	width: 30px;
	min-width: 30px;
	height: 30px;
	justify-content: center;
	z-index: 710;
}

#trash-list .trash-list-actions > a.sidebar-icon-mobile,
#trash-list .trash-list-actions > a.sidebar-icon-mobile:hover,
#trash-list .trash-list-actions > a.sidebar-icon-mobile:focus,
#trash-list .trash-list-actions:hover > a.sidebar-icon-mobile {
	display: block;
	flex: 0 0 30px;
	width: 30px;
	height: 30px;
	min-width: 30px;
	max-width: 30px;
	margin: 0;
	padding: 0 !important;
	box-sizing: border-box;
	border: 0 !important;
	border-left: 0 !important;
	border-radius: 0;
	line-height: 30px;
	color: inherit;
	background: transparent url("../images/icons/point1.png") center center / 20px 20px no-repeat !important;
	box-shadow: none !important;
	text-shadow: none !important;
	text-transform: none;
	overflow: visible;
	filter: none !important;
	transform: none !important;
}

#trash-list .trash-list-actions .sidebar-buttons-container {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	line-height: normal;
	text-transform: none;
	white-space: nowrap;
	overflow: hidden;
	z-index: 900;
	transform-origin: top right;
}

#trash-list .trash-list-actions .restore-button {
	float: none;
	box-sizing: border-box;
	white-space: nowrap;
}

#trash-list > li.trash-list-item a.trash-list-link,
#trash-list > li.trash-list-item a.trash-list-link:hover,
#trash-list > li.trash-list-item a.trash-list-link:focus {
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	border: 0 !important;
	border-left: 0 !important;
	border-radius: 0;
	line-height: normal;
	background: transparent !important;
	box-shadow: none;
	text-shadow: none;
}


#trash-list .trash-list-item.trash-entity-restoring .trash-list-row,
#trash-list .trash-list-item[data-restoring="1"] .trash-list-row {
	opacity: .55;
	pointer-events: none;
}

@media screen and (max-width: 450px) {
	#trash-list .trash-list-item {
		margin-left: 8px;
		margin-right: 8px;
	}

	#trash-list .trash-list-row {
		gap: 5px;
		padding-left: 7px;
	}

	#trash-list .trash-list-row > .days-left {
		font-size: 8px;
		padding: 0 5px;
	}
}
/* === TRASH END === */
/* === HELP CENTER / SUPPORT REPORTS === */
#help_btn {
	position: relative;
	width: 16px;
	cursor: pointer;
}

.content-help > #main-content,
.content-help > #three,
.help-panel,
.support-ticket-detail,
.support-thread {
	min-width: 0;
	box-sizing: border-box;
}

.content-help > #three > .sidebar-container {
	width: 100%;
	margin: 0;
	box-sizing: border-box;
}

.help-panel[hidden] {
	display: none !important;
}

.content-help .acordeon-content .faq-list,
.content-help .acordeon-content .faq-list ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.content-help .acordeon-content .faq-list > li {
	display: none;
	border-top: 1px solid #ffffff0d;
}

.content-help .acordeon-content .faq-list > li:last-child {
	border-bottom: 1px solid #ffffff0d;
}

.content-help .acordeon-content .faq-list > li.opacityShow {
	display: block;
}

.content-help .acordeon-content .faq-list > li > div {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	min-height: 56px;
	padding: 0 10px;
	color: #fff;
	cursor: pointer;
	box-sizing: border-box;
}

.content-help .acordeon-content .faq-list > li > div i {
	font-size: 25px;
	flex: 0 0 auto;
}

.content-help .acordeon-content .faq-list > li > div .bx-minus,
.content-help .acordeon-content .faq-list > li > ul {
	display: none;
}

.content-help .acordeon-content .faq-list > li.active > div .bx-plus {
	display: none;
}

.content-help .acordeon-content .faq-list > li.active > div .bx-minus {
	display: block;
}

.content-help .acordeon-content .faq-list > li > ul li {
	padding: 0 10px 18px;
}

.content-help .acordeon-content .faq-list p {
	margin: 0;
	color: #8b8e94;
	line-height: 1.65;
}

.content-help > #three .sidebar-box,
.row-body.content-admin:has(.support-ticket-detail) #three .sidebar-box {
	width: 100%;
	max-width: 100%;
	margin-bottom: 15px;
	box-sizing: border-box;
}

.support-ticket-list {
	margin: 0;
	max-height: 190px;
	overflow-y: auto;
	overflow-x: hidden;
}

.support-ticket-list > li > a.sidebar-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 58px;
	padding: 8px 12px;
	border: 1px solid #ffffff0d;
	border-left: 4px solid var(--main-color);
	border-radius: var(--border-radius-small);
	line-height: normal;
	text-transform: none;
	box-sizing: border-box;
}

.support-ticket-list > li + li {
	margin-top: 8px;
}

.support-ticket-list > li > a.sidebar-link:hover {
	border-left-color: var(--main-color);
	background: var(--main-color-transp-2);
}

.support-ticket-list > li > a.sidebar-link > span:first-child {
	min-width: 0;
}

.support-ticket-list > li > a.sidebar-link strong,
.support-ticket-list > li > a.sidebar-link small {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.support-ticket-list > li > a.sidebar-link strong {
	color: #fff;
	font-size: 12px;
}

.support-ticket-list > li > a.sidebar-link small {
	margin-top: 5px;
	color: #777a80;
	font-size: 10px;
}

.support-status {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 28px;
	padding: 0 11px;
	border-radius: 18px;
	font-size: 12px;
	white-space: nowrap;
	box-sizing: border-box;
}

.support-status-0 {
	color: #e1a94a;
	background: #e1a94a18;
	border: 1px solid #e1a94a25;
}

.support-status-1 {
	color: #70bd7d;
	background: #70bd7d18;
	border: 1px solid #70bd7d25;
}

.support-status-2 {
	color: #8b8e94;
	background: #ffffff08;
	border: 1px solid #ffffff0d;
}

/* HELP / REPORT : comportement identique aux autres sidebars */
@media screen and (min-width: 768px) {
	.row-body.content-help.help-overview > #three {
		height: auto !important;
		max-height: calc(100vh - 65px) !important;
	}

	.row-body.content-help.help-overview > #three > .sidebar-container {
		height: auto !important;
		overflow: visible !important;
	}

	body.support-chat-open .content-help,
	.row-body.content-admin:has(.support-ticket-detail) {
		height: calc(100vh - 65px) !important;
	}
}

html.support-chat-open,
body.support-chat-open {
	height: 100%;
	overflow: hidden !important;
}

body.support-chat-open .content-help,
.row-body.content-admin:has(.support-ticket-detail) {
	height: calc(100vh - 65px);
	min-height: 0;
	overflow: hidden;
}

body.support-chat-open .content-help > #main-content,
body.support-chat-open .content-help > #three,
.row-body.content-admin:has(.support-ticket-detail) #main-content,
.row-body.content-admin:has(.support-ticket-detail) #three {
	height: 100%;
	min-height: 0;
}

body.support-chat-open .content-help > #main-content {
	display: flex;
	flex-direction: column;
}

body.support-chat-open .content-help > #three > .sidebar-container,
body.support-chat-open .content-help > #three .sidebar-content,
.row-body.content-admin:has(.support-ticket-detail) #three > .sidebar-container,
.row-body.content-admin:has(.support-ticket-detail) #three .sidebar-content {
	height: 100%;
	min-height: 0;
	box-sizing: border-box;
}

body.support-chat-open .content-help > #three .sidebar-content,
.row-body.content-admin:has(.support-ticket-detail) #three .sidebar-content {
	overflow: visible;
}

.support-ticket-detail {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	width: 100%;
	min-height: 0;
	margin: 0;
	padding: 18px;
	overflow: hidden;
}

.support-ticket-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 15px;
	flex: 0 0 auto;
	padding-bottom: 15px;
	border-bottom: 1px solid #ffffff0d;
}

.support-ticket-header h2 {
	margin: 7px 0 0;
	font-size: 20px;
	font-weight: 600;
	color: #fff;
}

.support-ticket-header p {
	margin: 5px 0 0;
}

.support-ticket-header-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	flex: 0 0 auto;
}

.support-ticket-header > .support-ticket-header-actions:only-child {
	margin-left: auto;
}

.support-ticket-header-actions > .sidebar-header-edit-extra {
	flex: 0 0 auto;
	width: auto;
	min-width: 30px;
	height: 30px;
}

.support-ticket-header-actions > .sidebar-header-edit-extra .sidebar-buttons-container {
	top: 50%;
	transform: translateY(-50%) scale(.9);
	transform-origin: right center;
}

.support-ticket-header-actions > .sidebar-header-edit-extra:hover .sidebar-buttons-container {
	transform: translateY(-50%) scale(1);
}

.support-thread {
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-gutter: stable;
}

#support-action-message {
	flex: 0 0 auto;
	width: 100%;
	box-sizing: border-box;
}

#support-action-message .notification-box {
	margin: 10px 0 0;
}

.support-thread > .message-reply-container {
	display: flex !important;
	align-items: flex-start;
	justify-content: flex-start;
	clear: both;
}

.support-thread > .message-reply-container > .comment-reply-avatar {
	order: 1;
	flex: 0 0 73px;
	float: none;
}

.support-thread > .message-reply-container > .comment-reply-message {
	order: 2;
	flex: 0 1 60%;
	min-width: 0;
	max-width: 60%;
	margin-left: 0;
}

.support-thread > .message-reply-container > .action-comment {
	order: 3;
	flex: 0 0 auto;
	align-self: center;
	margin-left: 6px;
}

.support-thread > .support-message-own {
	justify-content: flex-end;
}

.support-thread > .support-message-own > .action-comment {
	order: 1;
	margin: 0 6px 0 0;
}

.support-thread > .support-message-own > .comment-reply-message {
	order: 2;
}

.support-thread > .support-message-own > .comment-reply-avatar {
	order: 3;
	padding-right: 0;
	padding-left: 10px;
}

.support-thread > .support-message-admin > .comment-reply-message {
	border: 1px solid var(--main-color);
	background: #ffffff03;
}

.support-thread > .support-message-admin > .comment-reply-avatar > img {
	border-color: var(--main-color);
	background: var(--main-color-transp-2);
}

.support-thread .message-reply-content {
	max-width: 100%;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	word-wrap: break-word;
	word-break: break-word;
}

.support-thread .message-message {
	max-width: 100%;
	box-sizing: border-box;
	overflow: visible;
}

/* Éditeur du message */
.support-thread .support-message-editor {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	margin: 0;
	padding: 0;
	overflow: visible;
	box-sizing: border-box;
}

/* Le contenteditable se comporte comme une textarea */
.support-thread .support-message-editor .comment-edit-textarea {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    line-height: 1.5;
    tab-size: 4;
    outline: none;
    cursor: text;
}

/* Corrige les balises éventuellement créées par le navigateur */
.support-thread .support-message-editor .comment-edit-textarea div,
.support-thread .support-message-editor .comment-edit-textarea p {
	display: block;
	width: auto;
	min-width: 0;
	max-width: 100%;
	margin: 0;
	padding: 0;
	white-space: pre-wrap !important;
	overflow-wrap: anywhere !important;
	word-wrap: break-word !important;
	word-break: break-word !important;
}

/* Les liens et chaînes très longues ne dépassent jamais */
.support-thread .support-message-editor .comment-edit-textarea a,
.support-thread .support-message-editor .comment-edit-textarea span {
	max-width: 100%;
	white-space: pre-wrap !important;
	overflow-wrap: anywhere !important;
	word-break: break-word !important;
}

/* Placeholder du contenteditable */
.support-thread .support-message-editor .comment-edit-textarea:empty::before {
	content: attr(data-placeholder);
	color: #777a80;
	pointer-events: none;
}

/* Smileys à l'intérieur de l'éditeur */
.support-thread .support-message-editor .comment-edit-textarea img.emoticon {
	display: inline-block;
	max-width: 20px;
	max-height: 20px;
	vertical-align: middle;
	user-select: none;
	pointer-events: none;
}

/* Les boutons sont sous le texte et non par-dessus */
.support-thread .support-message-editor .support-message-edit-actions {
	position: static !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	display: flex !important;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	width: 100%;
	min-width: 0;
	height: auto !important;
	margin: 8px 0 0 !important;
	padding: 0;
	transform: none !important;
	box-sizing: border-box;
	z-index: 3;
}

/* Le bouton Save/Edit ne doit pas être absolu */
.support-thread .support-message-editor .support-message-edit-actions .post-comment {
	position: static !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	flex: 0 0 auto;
	width: auto;
	margin: 0 !important;
	transform: none !important;
}

/* Annule les anciennes règles globales de comment-edit-btn */
.support-thread .support-message-editor .comment-edit-btn {
	position: static !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	margin-top: 8px !important;
}

.support-thread > .support-message-saving > .comment-reply-message {
	opacity: .72;
}

.support-thread > .support-message-saving > .action-comment,
.support-thread > .support-message-deleting > .action-comment,
.support-thread > .support-message-deleting {
	pointer-events: none;
}

.support-ticket-detail > .message-comment-box-container {
	flex: 0 0 auto;
	padding-top: 12px;
	border-top: 1px solid #ffffff0d;
	background: var(--foregroud-color-1);
}

.support-ticket-detail > .message-comment-box-container .page-input-container {
	margin: 0;
}

.support-ticket-detail > .message-comment-box-container textarea {
	min-height: 78px;
	max-height: 150px;
	resize: vertical;
}

.support-ticket-detail #support-reply + .job-input-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.support-ticket-detail #support-reply-send {
	flex: 0 0 auto;
	min-width: 96px;
	margin: 8px 0 0;
	justify-content: center;
}

.support-ticket-detail button {
	float: right;
	width: fit-content !important;
}

.row-body.content-admin:has(.support-ticket-detail) > .twelve.columns,
.row-body.content-admin:has(.support-ticket-detail) .page-settings-container,
.row-body.content-admin:has(.support-ticket-detail) .page-content {
	width: 100%;
	height: 100%;
	min-height: 0;
	box-sizing: border-box;
}

.row-body.content-admin:has(.support-ticket-detail) .page-settings-container {
	padding: 0;
	overflow: hidden;
}

.row-body.content-admin:has(.support-ticket-detail) .page-content {
	display: grid;
	grid-template-columns: minmax(0, 65%) minmax(0, 35%);
	grid-template-rows: auto minmax(0, 1fr);
	padding: 0;
	overflow: hidden;
}

.row-body.content-admin:has(.support-ticket-detail) .page-content > #mobile-header {
	grid-column: 1 / -1;
	grid-row: 1;
	min-width: 0;
}

.row-body.content-admin:has(.support-ticket-detail) .page-content > #main-content {
	display: flex;
	flex-direction: column;
	grid-column: 1;
	grid-row: 2;
	width: 100% !important;
	height: 100%;
	min-height: 0;
	padding: 0;
	float: none;
	overflow: hidden;
}

.row-body.content-admin:has(.support-ticket-detail) .page-content > #main-content > .support-ticket-detail {
	flex: 1 1 auto;
	height: 100%;
	min-height: 0;
}

.row-body.content-admin:has(.support-ticket-detail) .page-content > #three {
	grid-column: 2;
	grid-row: 2;
	width: 100% !important;
	height: 100%;
	min-height: 0;
	float: none;
	overflow: hidden;
}

.row-body.content-admin:has(.support-ticket-detail) #three #mobile-header {
	display: none;
}

.row-body.content-admin:has(.support-ticket-detail) #three .sidebar-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.row-body.content-admin:has(.support-ticket-detail) #three .sidebar-header .panel-btn {
	flex: 0 0 auto;
	margin: 0;
	font-size: 11px;
	text-transform: none;
}

.row-body.content-admin:has(.support-ticket-detail) #three .sidebar-box > .page-input-sub {
	padding: 0 20px 12px;
}

.report-template-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0 10px 10px;
	max-height: 210px;
	overflow-x: auto;
}

.report-template-tile {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr);
	align-items: center;
	gap: 0 10px;
	width: 100%;
	min-height: 66px;
	padding: 10px;
	border: 1px solid #ffffff0d;
	border-left: 4px solid var(--report-template-color, var(--main-color));
	border-radius: var(--border-radius-small);
	background: #ffffff03;
	cursor: pointer;
	box-sizing: border-box;
	transition: all .2s ease-in-out;
}

.report-template-tile:hover,
.report-template-tile:focus {
	border-color: var(--report-template-color, var(--main-color));
	background: #ffffff08;
	outline: none;
}

.report-template-tile > i {
	grid-row: 1 / 3;
	font-size: 22px;
	color: var(--report-template-color, var(--main-color));
	text-align: center;
}

.report-template-tile > strong,
.report-template-tile > span {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.report-template-tile > strong {
	color: #fff;
	font-size: 12px;
	white-space: nowrap;
}

.report-template-tile > span {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	margin-top: 3px;
	color: #85888e;
	font-size: 10px;
	line-height: 1.4;
}

#job-list-newsletter1 li .item-selector {
	border-left: 5px solid var(--report-template-color, var(--main-color));
}

#job-list-newsletter1 li .item-selector:hover {
	border-left-color: var(--report-template-color, var(--main-color));
}

#job-list-newsletter1 .report-template-list-icon {
	position: absolute;
	top: 10px;
	left: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 78px;
	height: 78px;
	border: 1px solid var(--report-template-color, var(--main-color));
	border-radius: var(--border-radius-small);
	color: var(--report-template-color, var(--main-color));
	box-sizing: border-box;
}

#job-list-newsletter1 .report-template-list-icon i {
	font-size: 28px;
}

#job-list-newsletter1 .sub-title small {
	display: block;
	margin-top: 4px;
}

#job-list-newsletter1 .sidebar-header-edit-extra {
	position: absolute;
	top: 34px;
	right: 10px;
	height: 30px !important;
}

#report-template-editor-form {
	width: 100%;
	box-sizing: border-box;
}

#report-template-editor-form .job-info-input input,
#report-template-editor-form .job-info-input textarea {
	max-width: none;
}

.report-template-language-tabs {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 10px;
	padding: 4px;
	border: 1px solid #ffffff0d;
	border-radius: var(--border-radius-small);
	background: #ffffff03;
}

.report-template-language-tab {
	min-width: 105px;
	padding: 9px 14px;
	border: 0;
	border-radius: calc(var(--border-radius-small) - 2px);
	background: transparent;
	color: #85888e;
	font: inherit;
	font-size: 12px;
	cursor: pointer;
	transition: all .2s ease-in-out;
}

.report-template-language-tab:hover {
	color: #fff;
	background: #ffffff08;
}

.report-template-language-tab-active {
	color: #fff;
	background: var(--main-color-transp-2);
	box-shadow: inset 0 0 0 1px var(--main-color-transp);
}

.report-template-language-help {
	margin: 8px 0 0;
}

.report-template-language-panel {
	margin-top: 16px;
}

.report-template-language-title {
	margin-bottom: 8px;
}

.report-template-client-language {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0 10px 10px;
	padding: 9px 10px;
	border: 1px solid #ffffff0d;
	border-radius: var(--border-radius-small);
	background: #ffffff03;
	font-size: 11px;
}

.report-template-client-language > span {
	color: #85888e;
}

.report-template-client-language > strong {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: #fff;
}

.report-template-client-language i {
	color: var(--main-color);
	font-size: 14px;
}

#job-list-newsletter1 .report-template-row .title {
	display: flex;
	align-items: center;
	gap: 8px;
}

#job-list-newsletter1 .report-template-row .title > a {
	min-width: 0;
	overflow: hidden;
}

.report-template-language-badges {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-left: 8px;
}

.report-template-language-badges em {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 18px;
	padding: 0 5px;
	border: 1px solid #ffffff12;
	border-radius: 20px;
	background: #ffffff05;
	color: #8b8e94;
	font-size: 9px;
	font-style: normal;
	box-sizing: border-box;
}

#report-template-variable-list {
	margin-top: 10px;
	align-items: stretch;
}

#report-template-variable-list a {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 8px 10px;
	border: 1px solid #ffffff0d;
	border-radius: var(--border-radius-small);
	background: #ffffff03;
	box-sizing: border-box;
	transition: all .2s ease-in-out;
}

#report-template-variable-list a strong {
	flex: 0 0 auto;
	color: var(--main-color);
	font-size: 11px;
}

#report-template-variable-list a span {
	min-width: 0;
	color: #8b8e94;
	font-size: 11px;
	line-height: 1.35;
}

#report-template-variable-list a:hover {
	border-color: var(--main-color-transp);
	background: var(--main-color-transp-2);
}

#report-template-variable-list a:hover span {
	color: #fff;
}

#report-template-action-message .notification-box,
#support-action-message .notification-box {
	margin-bottom: 12px;
}

@media only screen and (max-width: 768px) {
	.row-body.content-admin:has(.support-ticket-detail) .page-content {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto minmax(0, 1fr);
	}

	.row-body.content-admin:has(.support-ticket-detail) .page-content > #main-content {
		grid-column: 1;
		grid-row: 2;
		width: 100% !important;
	}

	.row-body.content-admin:has(.support-ticket-detail) .page-content > #three {
		grid-column: 1;
		grid-row: 1 / -1;
	}

	.row-body.content-admin:has(.support-ticket-detail) #three > .sidebar-container {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100% !important;
		overflow: hidden !important;
	}

	.row-body.content-admin:has(.support-ticket-detail) #three .sidebar-content {
		flex: 1 1 auto;
		height: auto !important;
		overflow-y: auto !important;
	}

	.row-body.content-admin:has(.support-ticket-detail) #three #mobile-header {
		display: block;
		flex: 0 0 auto;
	}
}

@media only screen and (max-width: 768px) {
	.support-ticket-detail {
		padding: 14px;
	}

	.support-ticket-header {
		align-items: stretch;
		flex-direction: column;
	}

	.support-ticket-header-actions {
		width: 100%;
		justify-content: space-between;
	}

	.support-thread > .message-reply-container > .comment-reply-message {
		max-width: calc(100% - 82px);
	}

	#job-list-newsletter1 .report-template-list-icon {
		width: 70px;
		height: 70px;
	}

	#job-list-newsletter1 .item-selector {
		height: 92px;
	}

	#job-list-newsletter1 .title,
	#job-list-newsletter1 .sub-title {
		margin-left: 80px !important;
		margin-right: 42px !important;
	}

	#job-list-newsletter1 .sub-title small {
		display: none;
	}
}

@media only screen and (max-width: 450px) {
	.support-thread > .message-reply-container > .comment-reply-avatar {
		flex-basis: 50px;
		width: 50px;
	}

	.support-thread > .message-reply-container > .comment-reply-avatar img {
		width: 35px;
		height: 35px;
		padding: 4px;
	}

	.support-thread > .message-reply-container > .comment-reply-message {
		max-width: calc(100% - 70px);
	}

	.support-ticket-list .support-status {
		display: none;
	}
}

/* === HELP CENTER / SUPPORT REPORTS END === */


/* License page tabs: hidden on desktop, restored on mobile. */
.license-mobile-tabs {
	display: none;
}

@media only screen and (max-width: 767px) {
	.license-mobile-tabs {
		display: block;
		width: calc(100% - 40px);
		margin: 10px 20px 20px;
		box-sizing: border-box;
	}

	.license-mobile-tabs #list-group,
	.license-mobile-tabs .pro-buttons {
		width: 100%;
		box-sizing: border-box;
	}

	.license-mobile-tabs .pro-buttons {
		display: flex;
		overflow-x: auto;
	}

	.license-mobile-tabs .pro-button {
		flex: 1 0 auto;
		justify-content: center;
	}

	.license-key-section {
		display: none;
	}
}