/* --- Estils presonalitzats pel client de north3 --- */

@import url('../../NORTH3/fonts/Inter/font-inter.css');
/* @import url('../../NORTH3/fonts/Material\ Icons/material-symbols.css'); */

:root {
	/*V2 */

	--color-fons: #151515;
	--color-principal: #E73933;

	--color-mix: #ffffff;
	--color-extra: #ffffff;
	
	--color-principal-light: color-mix(in srgb, var(--color-mix), var(--color-principal) 50%);

	--color-secundari: #D5C5E2;
	--color-secundari-light: color-mix(in srgb, var(--color-mix), var(--color-secundari) 50%);


	--border-menu: 	color-mix(in srgb, var(--color-textos), transparent 70%);
	--bg-body-color: color-mix(in srgb, var(--color-fons), var(--color-extra) 5%);
	--bg-panels: color-mix(in srgb, var(--color-fons), var(--color-extra) 15%);

	--s-active: palegreen;
	--s-unsync: orange;
	--s-disabled: red;

	/* texts */

	--color-textos: #ffffff;
	--color-textos-hover: #E73933;


	/* buttons */

	--btn-principal-fons: #E73933;
	--btn-principal-text: #ffffff;
	--btn-principal-fons-hover: transparent;
	--btn-principal-text-hover: #E73933;

	--btn-secundari-fons: #ffffff;
	--btn-secundari-text: #E73933;
	--btn-secundari-fons-hover: transparent;
	--btn-secundari-text-hover: #ffffff;

	/* inputs */
	--checkbox-marker: #E73933;

    --badge-eqipments: lightblue;
    --badge-types: lightcoral;
    --badge-grups-musculars: aquamarine;

	/* old */
	--color-fons-caixes-desglos: color-mix(in srgb, var(--color-fons), var(--color-extra) 35%);


	/* Modal Boostrap */

	--bs-modal-zindex: ;
    --bs-modal-width: ;
    --bs-modal-padding: ;
    --bs-modal-margin: ;
    --bs-modal-color: ;
    --bs-modal-bg: ;
    --bs-modal-border-color: ;
    --bs-modal-border-width: ;
    --bs-modal-border-radius: ;
    --bs-modal-box-shadow: ;
    --bs-modal-inner-border-radius: ;
    --bs-modal-header-padding-x: ;
    --bs-modal-header-padding-y: ;
    --bs-modal-header-padding: ;
    --bs-modal-header-border-color: ;
    --bs-modal-header-border-width: ;
    --bs-modal-title-line-height: ;
    --bs-modal-footer-gap: ;
    --bs-modal-footer-bg: ;
    --bs-modal-footer-border-color: ;
    --bs-modal-footer-border-width: ;

	--ancho-virtual: 1920;
	--alto-virtual: 1080;
} 

input,
select,
textarea {
	--bs-form-select-bg-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 2.5'><path fill='white' d='M3 1 L3.5 1.5 L4 1 Z'/></svg>");
	--bs-form-select-bg-img: none !important;
	position: relative !important;
	color: var(--color-textos) !important;
	line-height: normal !important;
	border-radius: 5px !important;
	border: 1px solid var(--color-textos) !important;
	background-color: transparent !important;
	transition: 0.2s all !important;
	background-size: 50px 40px !important;
}

select, select.form-control {
	background-image: var(--bs-form-select-bg-icon) !important;
	background-repeat: no-repeat !important;
	background-position-x: calc(100% - 10px) !important;
	background-position-y: center !important;
	cursor: pointer !important;
	appearance: none !important;
	width: auto;
	min-width: 80px;
	padding-right: 30px;
}

#auth select {
	width: 100%;
}

input::placeholder {
	color: var(--color-textos) !important;
	opacity: 0.5 !important;
	
}

input[type="date"], input[type="datetime-local"], input[type="time"] {
	color-scheme: dark;
}

select {
	background-image: var(--bs-form-select-bg-img);
	background-repeat: no-repeat;
	background-position-x: calc(100% - 10px);
	background-position-y: 0px;
	cursor: pointer;
}

.btn-close {
	filter: var(--bs-btn-close-white-filter);
}

.align-baseline {
	vertical-align: baseline !important;
	align-items: baseline !important;
}

.no_results {
	opacity: 0.5;
}

.mida_auto {
	width: auto;
}

.caixa_general_contingut {
	overflow-x: hidden;
}

.caixa_interna_bloc_v2.mida_meitat {
	width: 48.5%;
}

.caixa_boto_desple_filtre .caixa_filtre_basic input {
	border-radius: 100px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
	border-width: 0px !important;
	background-color: var(--color-extra) !important;
	color: var(--color-fons) !important;
}

.caixa_interna_bloc_v2 .caixa_titols_interior_pnl .titol_pnl {
	color: var(--color-textos);
}
.caixa_interna_bloc_v2 .caixa_contingut_interior_pnl {
	color: var(--color-textos);
}

.modal-content {
	--bs-modal-header-border-color: color-mix(in srgb, var(--color-fons), white 30%);
	--bs-modal-bg: var(--color-fons);
	--bs-modal-border-color: var(--bs-modal-header-border-color);
	--bs-modal-footer-border-color: var(--bs-modal-header-border-color);
}

.form-group.double {
	display: flex;
	margin-top: 20px;
	/* gap: 10px; */
	/* width: 100%; */
	justify-content: space-between;
	flex-wrap: wrap;
	row-gap: 15px;
}
.form-group.double > div {
	display: flex;
	width: 49%;
	flex-direction: column;
	gap: 10px;
	background-color: #ffffff0f;
	border-radius: 10px;
	padding: 20px;
}

.form-control.workout {
	width: auto !important;
}

.form-control.workout + .btn {
	width: 10% !important;
	max-width: 35px;
}

#form_recurs video {
	height: 100%;
}

#top {
	box-shadow: unset;
}

#message
{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    padding: 14px 22px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .15);
    z-index: 9999;
}



/* --- Inici estils nous login --- */
.caixa_general_login {
	color: var(--color-textos);
	background-color: transparent;
}

.caixa_general_login #caixa_auth {
	padding: 50px;
	gap: 30px;
}

.caixa_general_login #caixa_auth #caixa_centrat {
	padding: 0px;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 30px;
}

#logo_auth {
	padding: 0;
}
#logo_empresa {
	border-bottom-color: var(--border-menu);
}
.collapsed #logo_empresa {
	padding: 10px;
}
#content_auth form, #remember, #remember form {
    display: flex;
}

.bloc_esquerra_copyright strong {
	color: var(--color-textos);
}
.bloc_dreta_copyright {
	display: none;
}

/* .btn-primary.custom {
	width: auto;
	text-align: center;
	display: flex;
	justify-content: center;
	line-height: 1;
} */



.caixa_general_login a {
	color: var(--color-principal);
}

form .form-group.grup-titol-mes-camp {
	flex-direction: column;
	gap: 10px;
}

form .form-group.grup-titol-mes-camp .titol-interior {
	width: 100%;
	padding: 0px;
}

form .form-group.grup-titol-mes-camp .camp-interior {
	width: 100%;
}
/* --- Fi estils nous login --- */

/* --- Inici estils generics --- */
body {
    color: var(--color-textos);
    font-family: 'Inter', sans-serif;
}
#menu {
    background-color: var(--color-fons);
    border-right: 1px solid var(--border-menu);
    transition: 0.5s width;
}

#menu * {
	border-color: var(--border-menu);
	line-height: 1;
	margin: 0px !important;
	row-gap: 20px !important;
}

body a.list-group-item .inline {
	display: block;
	opacity: 1;
	width: auto;
	text-wrap-mode: nowrap;
	transition-delay: 0.3s !important;
	transition: 0.5s width;
	transition: 0.5s opacity;
}
body.collapsed a.list-group-item .inline {
	display: flex;
	opacity: 0;
	width: 0px;
	transition: 0s all;
	transition-delay: 0s !important;
}

body.collapsed #menu .caixa_interna_menu .caixa_punts_menu .card .list-group-item.submenu1 {
	padding-left: 0px !important	;
}

.caixa_submenu {
	display: flex;
	flex-direction: column;
	row-gap: 15px !important;
}

.btn {
    padding: 0.5em 1em;
    border-radius: 100px;
    font-size: inherit;
    border: 1px solid var(--btn-principal-fons);
    background-color: var(--btn-principal-fons);
    color: var(--btn-principal-text);
    display: flex;
    gap: 0.5em;
    transition: 0.2s all;
    justify-content: center;
    align-items: center;
	line-height: normal;
}

.btn-primary.custom, #frm_password_recovery input[type="submit"] {
    padding: 0.5em 1em;
    border-radius: 100px;
    font-size: inherit;
    border: 1px solid var(--btn-principal-fons);
    background-color: var(--btn-principal-fons);
    color: var(--btn-principal-text);
    display: flex;
    gap: 0.5em;
    align-items: center;
    transition: 0.2s all;
    justify-content: center;
}

.btn > span {
	line-height: normal;
}


.btn.invert {
    background-color: var(--btn-secundari-fons);
    color: var(--btn-secundari-text);
	border-color: var(--btn-secundari-fons);
}

.btn.square {
    padding: 0.5rem;
    aspect-ratio: 1 / 1;
    justify-content: center;
    align-items: center;
    min-width: 35px;
}

.btn.square i {
	line-height: normal;
}

.btn:hover,.btn:active {
    color: var(--btn-principal-text-hover) !important;
    border-color: var(--btn-principal-text-hover) !important;
    background-color: var(--btn-principal-fons-hover) !important;
}

.btn.invert:hover {
    color: var(--btn-secundari-text-hover) !important;
    border-color: var(--btn-secundari-text-hover) !important;
    background-color: var(--btn-secundari-fons-hover) !important;
}

.badge {
	min-width: auto;
}

.badge.equipments {
	background-color: var(--badge-eqipments) !important;
	color: black !important;
	border-color: var(--badge-eqipments) !important;
}

.badge.types {
	background-color: var(--badge-types) !important;
	color: black !important;
	border-color: var(--badge-types) !important;
}

.badge.grups_musculars {
	background-color: var(--badge-grups-musculars) !important;
	color: black !important;
	border-color: var(--badge-grups-musculars) !important;
}

.container_general {
    background-color: var(--bg-body-color);
}


.caixa_contingut_interior_pnl {
    width: 100%;
}

.pnl-grup-title {
    position: relative;
}

.pnl-column {
    flex-direction: column;
    justify-content: flex-start;
}
.pnl-row {
    flex-direction: row;
    row-gap: 3vh;
}

.caixa_botons_titol {
    display: flex;
    gap: 10px;
    width: auto;
    /* position: absolute; */
    right: 0;
    top: 0%;
    flex-direction: row;
    align-items: flex-end;
}

.pnl-title {
    color: var(--color-textos);
    font-weight: 700;
    gap: 10px;
	align-items: baseline;
}
.pnl-title b {
	font-weight: 700;
}
.pnl-title span {
	font-weight: 400;
}
.pnl-title .badge {
	font-size: 15px;
}
.pnl-subtitle {
	color: var(--color-textos);
}

.pnl-grup-body {
	background-color: transparent;
	padding: 0px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	/* align-content: flex-end; */
	box-shadow: unset;
}

.pnl-grup-body .caixa_titols_interior_pnl {
    align-items: center;
    border: 0px;
    padding: 0px;
}

.caixa_general_contingut #top {
    background-color: var(--color-fons);
    border-bottom: 1px solid var(--border-menu);
}

#caixa_menu_footer button {
    background-color: var(--color-fons);
    color: var(--color-textos);
	border-color: var(--border-menu);
}

.caixa_botons_footer.caixa_fixe {
	background-color: var(--color-fons);
}

.caixa_interna_dreta {
    width: 100%;
}

.caixa_boto_desple_filtre {
    width: 100%;
}

.caixa_generica_filtres {
    background-color: var(--color-complementari-titol);
    padding: 20px;
    flex-direction: column;
    gap: 10px;
    position: absolute;
    top: calc(100% + 20px);
    width: 100%;
    z-index: 1;
}

.caixa_generica_filtres .caixa_single_filtre {
	min-width: 200px;
}

.caixa_single_filtre select {
		color: white;
		line-height: 1;
		border-radius: 5px;
		border: 1px solid white;
		background-color: transparent;
		transition: 0.2s all;
		cursor: pointer;
		--bs-form-select-bg-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>");
}

.caixa_generica_filtres .caixa_interna_esquerra {
    flex-direction: column;
    background-color: transparent;
    gap: 10px;
}

.caixa_generica_filtres .caixa_single_filtre.inline {
    flex-direction: row;
    align-items: center;
    gap: 5px;
}

.caixa_generica_filtres .caixa_single_filtre label {
	text-transform: initial;
}

.align-start {
	align-items: flex-start;
}

.usuari > a i {
	font-size: 20px;
}

#pnl_legales .taula_intra_generica .tb_intra_fila {
	position: relative;
}

label.checkbox {
	display: flex;
	cursor: pointer;
	font-size: 16px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	gap: 10px;
	align-items: center;
}
label.checkbox input, .cfg_checkbox input[type="checkbox"] {
	position: absolute !important;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}
label.checkbox::before {
	font-family: 'Font Awesome 6 Pro';
	content: "";
	color: var(--checkbox-marker);
	border: 1px solid white;
	line-height: 0;
	display: flex;
	align-items: center;
	aspect-ratio: 1;
	width: 20px;
	justify-content: center;
	font-size: 12px;
	border-radius: 5px;
}
label.checkbox:has(input:checked)::before, .cfg_checkbox input[type="checkbox"]:checked + label::before {
	font-family: 'Font Awesome 6 Pro';
	content: "\f00c";
	font-weight: 600;
	color: var(--color-textos-hover);
}

.group:has(.cfg_checkbox) {
	flex-direction: column;
	align-items: flex-start !important;
}

.cfg_checkbox label.checkbox > div {
	display: flex;
	flex-direction: column;
}

.cfg_checkbox label.checkbox .red {
	font-size: 0.8em;
	color: var(--color-textos-hover);
}

/* --- Fi estils generics --- */

/* HOME */

#home_content .pnl-title {
    font-size: 40px;
    gap: 0.5ex;
}

#home_content #cname {
    color: var(--color-textos-hover)
}

#home_content .subtitle {
    font-size: 16px;
}


#home_gadgets {gap: 6.5%;margin-top: 40px;}
#home_gadgets > div {width: 29%;}
#home_gadgets > div .caixa_titols_interior_pnl {
	margin-bottom: 20px;
	align-items: center;
}
#home_gadgets > div .titol_pnl {
	width: 100%;
}

#home_gadgets #home_calendar_container {
	margin-bottom: 20px;
}

#home_workouts_container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 1%;
    row-gap: 1em;
}

#home_workouts_container .tb_intra_fila {
    width: 100%;
    flex-direction: column;
    background-color: color-mix(in srgb, var(--color-fons), var(--color-extra) 35%);
    border-radius: 25px;
    padding: 20px;
    /* aspect-ratio: 16 / 9; */
    justify-content: space-between;
    overflow: hidden;
    position: relative;
    /* transition: 0.4s all; */
    border: 0px;
    scale:1;
    gap: 10px;
    display: flex;
}

#home_workouts_container .tb_intra_fila > * {
	z-index: 1;
	position: relative;
}

#home_workouts_container .tb_intra_fila .buttons {
    width: 100%;
    padding: 0px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#home_workouts_container .tb_intra_fila .icons {
    background-color: transparent;
    border: 0px;
    padding: 0px;
    font-size: 20px;
    opacity: 0;
    transition: 0.4s all;
}

#home_workouts_container .tb_intra_fila .icons.personal {
	opacity: 1;
}

#home_workouts_container .tb_intra_fila .content {
    width: 100%;
}

#home_workouts_container .tb_intra_fila .content .title {
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 10px;
	line-height: normal;
	text-wrap-style: balance;
}



#home_workouts_container .tb_intra_fila .desc {
	display: flex;
	gap: 0.5rem;
	color: var(--color-principal);
	border-left: 2px solid var(--color-principal);
	line-height: 1;
	padding-left: 5px;
}

#home_workouts_container .tb_intra_fila:hover {
	cursor: pointer;
}

#home_workouts_container .tb_intra_fila:hover .icons {
	opacity: 1;
}

#modal_home_sessio .form-group {
	display: flex;
	flex-direction: column;
}
#modal_home_sessio form {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
#modal_home_sessio .form-group label {font-weight: bold;}
#modal_home_sessio .form-group > span {display: flex;align-items: center;gap: 0.7em;}

/* MENU */

#menu {
    --ico-size: 20px;
}

#menu .caixa_interna_menu .caixa_punts_menu .card {
    background-color: transparent;
}

#menu .caixa_interna_menu .caixa_punts_menu .card .list-group-item {align-items: center;padding: 0px;font-size: 14px;}

.punt_actiu, #menu .caixa_interna_menu .caixa_punts_menu .card .list-group-item:hover {
    background-color: transparent;
    color: var(--color-textos-hover);
}



.caixa_interna_bloc_v2 {
    padding: 30px;
    background-color: var(--bg-panels);
    border-radius: 20px;
    /* overflow: hidden; */
}

.caixa_interna_bloc_v2 .caixa_contingut_interior_pnl .caixa_dades_info {
    gap: 5px;
}

.caixa_general_dades_v2 .inputs {
    display: flex;
    gap: 10px;
    align-items: center;
}

.caixa_general_dades_v2 .inputs:has(select) {
    margin: 5px 0;
}

.caixa_general_dades_v2 .inputs:has(select) span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.caixa_general_dades_v2 .list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	position: relative;
}

.caixa_general_dades_v2 input::placeholder {
	color: grey;
}
.caixa_general_dades_v2 .val-errors-content {
	width: 100%;
}

.caixa_general_dades_v2 select:hover {
cursor: pointer;
}

 .form-control:focus {
	background-color: var(--bg-panels) !important;
	color: var(--color-textos);
}

.custom-loader {
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	display: none;
	justify-content: center;
	align-items: center;
	left: 0px;
	top: 0;
	background-color: #00000080;
	margin: 0;
	border-radius: 0;
}

.custom-loader::before {
	content: '';
	width:50px;
	height:50px;
	border-radius:50%;
	background:conic-gradient(#0000 10%,var(--color-principal));
	-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 8px),#000 0);
	animation:s3 1s infinite linear;
	display: block;
}
@keyframes s3 {to{transform: rotate(1turn)}}
.custom-loader {
	display: flex;
}

.no_file_text {
	width: 100%;
	padding-bottom: 20px;
	font-size: 30px;
	opacity: 0.15;
	text-transform: uppercase;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}


/* ---- */

#pnl_temas input {
	cursor: pointer;
}

#pnl_temas .caixa_dades_info:has(input[type="color"]) {
	display: flex;
	flex-direction: row;
	align-items: center;
}
#pnl_temas .caixa_dades_info .inputs {
	width: 25px;
	aspect-ratio: 1/1;
}
#pnl_temas .caixa_dades_info .descs {
	display: flex;
	flex-direction: column;
}
#pnl_temas .caixa_dades_info .descs .d {
	font-size: 10px;
	font-style: italic;
}
#pnl_temas .caixa_dades_info .inputs input[type="color"] {
	width: 100%;
	height: 100%;
	border: 0px solid transparent !important;
}
#pnl_temas .caixa_contingut_interior_pnl h4 {
	font-size: 16px;
	line-height: normal;
	margin: 0px;
}
#pnl_temas .caixa_contingut_interior_pnl h4 + .desc {
	font-style: italic;
	font-size: 12px;
}

.tb_intra_fila:before {
	background: transparent;
	background: linear-gradient(0deg, rgb(0 0 0 / 60%) 0%, rgb(0 0 0 / 20%) 40%);
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

/* EJERCICIOS */

#ejercicios {
    width: 100%;
}

#filtre_ejercicios,
#filtre_biblioteca{
	width: auto;
	min-width: 350px;
	position: relative;
}

.caixes_container.end{
	justify-content: flex-end;
}

#ejercicios_result {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1%;
    row-gap: 1em;
}

#ejercicios_result .tb_intra_fila {
    width: 19.2%;
    flex-direction: column;
    background-color: color-mix(in srgb, var(--color-fons), var(--color-extra) 35%);
    border-radius: 25px;
    padding: 20px;
    aspect-ratio: 3 / 4;
    justify-content: space-between;
    overflow: hidden;
    position: relative;
    /* transition: 0.4s all; */
    border: 0px;
    scale:1;
    background-position-x: center;
}

#ejercicios_result .tb_intra_fila > * {
	z-index: 2;
	position: relative;
}

#ejercicios_result .tb_intra_fila > video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

#ejercicios_result .tb_intra_fila .buttons {
    width: 100%;
    padding: 0px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: transparent;
}

#ejercicios_result .tb_intra_fila .icons {
    background-color: transparent;
    border: 0px;
    padding: 0px;
    font-size: 25px;
    opacity: 0;
    transition: 0.4s all;
}

#ejercicios_result .tb_intra_fila .icons.personal {
	opacity: 1;
}

#ejercicios_result .tb_intra_fila .content {
    width: 100%;
}

#ejercicios_result .tb_intra_fila .content .title {
	font-size: 30px;
	font-weight: bold;
	margin-bottom: 10px;
	line-height: normal;
	text-wrap-style: balance;
}

#ejercicios_result .tb_intra_fila .content .tags {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

#ejercicios_result .tb_intra_fila .content .tags > div {
	width: 100%;
	justify-content: flex-start;
	padding: 0px;
	flex-wrap: wrap;
	gap: 5px;
	background-color: transparent;
}

#ejercicios_result .tb_intra_fila:hover {
	cursor: pointer;
}

#ejercicios_result .tb_intra_fila:hover .icons {
	opacity: 1;
}

#imatge_portada, #video, #imatge_logo_tema {
    padding: 0px;
    gap: 0px;
    position: relative;
    flex-direction: column;
    flex-wrap: nowrap;
    overflow: clip;
}

#imatge_portada .caixa_titols_interior_pnl, #video .caixa_titols_interior_pnl, #imatge_logo_tema .caixa_titols_interior_pnl {
	padding: 30px;
	z-index: 1;
	background-color: var(--bg-panels);
	position: relative;
}

#imatge_portada .inputs, #video .inputs, #imatge_logo_tema .inputs {
	padding: 30px;
	/* position: absolute; */
	width: 100%;
	left: 0px;
	background-color: var(--bg-panels);
	padding-top: 0px;
	/* transform: translateY(-100%); */
	transition: 0.5s height;
	display: flex !important;
	justify-content: flex-end;
	overflow: clip;
	height: 0;
	padding: 0px;
}

#imatge_portada .inputs.visible, #video .inputs.visible {
	display: block;
	transform: translateY(0);
	z-index: 1;
	height: auto;
	padding: 30px;
	padding-top: 0px;
}

#imatge_portada .inputs.new, #video .inputs.new, #imatge_logo_tema .inputs.new {
	display: block;
	top: auto !important;
	position: relative;
	transform: translateY(0);
}

#imatge_logo_tema img {
	padding: 30px;
	/* padding-top: 0px; */
}

.list .badge {
	position: relative;
	line-height: normal;
}
.list .delete {
	position: absolute;
	right: -10%;
	top: -20%;
	font-size: 10px;
	aspect-ratio: 1 / 1;
	padding: 3px;
	display: none;
}
.list .delete:hover {
	background-color: var(--color-principal);
	border-color: var(--color-principal);
}
.list .badge:hover .delete {
	display: flex;
}


/* ---------- */

/* ENTRENAMIENTIOS */

#workouts {
    width: 100%;
}

#filtre_workouts {
	width: auto;
	min-width: 350px;
	position: relative;
}

#workouts_result {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1%;
    row-gap: 1em;
}

#workouts_result .tb_intra_fila {
    width: 19.2%;
    flex-direction: column;
    background-color: color-mix(in srgb, var(--color-fons), var(--color-extra) 35%);
    border-radius: 25px;
    padding: 20px;
    /* aspect-ratio: 16 / 9; */
    justify-content: space-between;
    overflow: hidden;
    position: relative;
    /* transition: 0.4s all; */
    border: 0px;
    scale:1;
    gap: 10px;
}

#workouts_result .tb_intra_fila > * {
	z-index: 1;
	position: relative;
}

#workouts_result .tb_intra_fila .buttons {
    width: 100% !important;
	order: 0;
    padding: 0px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: transparent;
}

#workouts_result .tb_intra_fila .icons {
    background-color: transparent;
    border: 0px;
    padding: 0px;
    font-size: 20px;
    opacity: 0;
    transition: 0.4s all;
}

#workouts_result .tb_intra_fila .icons.personal {
	opacity: 1;
}

#workouts_result .tb_intra_fila .content {
    width: 100%;
}

#workouts_result .tb_intra_fila .content .title {
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 10px;
	line-height: normal;
	text-wrap-style: balance;
}



#workouts_result .tb_intra_fila .desc {
	display: flex;
	gap: 0.5rem;
	color: var(--color-principal);
	border-left: 2px solid var(--color-principal);
	line-height: 1;
	padding-left: 5px;
}

#workouts_result .tb_intra_fila:hover {
	cursor: pointer;
}

#workouts_result .tb_intra_fila:hover .icons {
	opacity: 1;
}

#workouts .list .badge {
	position: relative;
	line-height: normal;
}
#workouts .list .delete {
	position: absolute;
	right: -10%;
	top: -20%;
	font-size: 10px;
	aspect-ratio: 1 / 1;
	padding: 3px;
	display: none;
}
#workouts .list .delete:hover {
	background-color: var(--color-principal);
	border-color: var(--color-principal);
}
#workouts .list .badge:hover .delete {
	display: flex;
}


/* ---------- */

/* DEVICES */

#devices {
    width: 100%;
}

#filtre_devices {
	width: auto;
	min-width: 350px;
	position: relative;
}

#devices_result {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1%;
    row-gap: 1em;
}

#devices_result .tb_intra_fila {
    width: 19.2%;
    flex-direction: column;
    background-color: color-mix(in srgb, var(--color-fons), var(--color-extra) 35%);
    border-radius: 25px;
    padding: 20px;
    aspect-ratio: auto;
    justify-content: space-between;
    overflow: hidden;
    position: relative;
    /* transition: 0.4s all; */
    border: 0px;
    scale:1;
    gap: 20px;
}

#devices_result .tb_intra_fila > * {
	z-index: 1;
	position: relative;
}

#devices_result .tb_intra_fila .buttons {
    width: 100% !important;
    padding: 0px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    order: 0;
    background-color: transparent;
}

#devices_result .tb_intra_fila .icons {
    background-color: transparent;
    border: 0px;
    padding: 0px;
    font-size: 20px;
    opacity: 0;
    transition: 0.4s all;
}

#devices_result .tb_intra_fila .icons.personal {
	opacity: 1;
}

#devices_result .tb_intra_fila .content {
    width: 100%;
}

#devices_result .tb_intra_fila .content .title {
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 10px;
	line-height: normal;
	text-wrap-style: balance;
}



#devices_result .tb_intra_fila .desc {
	display: flex;
	gap: 0.5rem;
	color: var(--color-principal);
	border-left: 2px solid var(--color-principal);
	line-height: 1;
	padding-left: 5px;
}

#devices_result .tb_intra_fila:hover {
	cursor: pointer;
}

#devices_result .tb_intra_fila:hover .icons {
	opacity: 1;
}

#devices .list .badge {
	position: relative;
	line-height: normal;
}
#devices .list .delete {
	position: absolute;
	right: -10%;
	top: -20%;
	font-size: 10px;
	aspect-ratio: 1 / 1;
	padding: 3px;
	display: none;
}
#devices .list .delete:hover {
	background-color: var(--color-principal);
	border-color: var(--color-principal);
}
#devices .list .badge:hover .delete {
	display: flex;
}


/* ---------- */

/* -- BIBLIOTECA -- */

#biblioteca_result {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1%;
    row-gap: 1em;
}

#biblioteca_result .tb_intra_fila {
    width: 19.2%;
    flex-direction: column;
    background-color: color-mix(in srgb, var(--color-fons), var(--color-extra) 35%);
    border-radius: 25px;
    padding: 20px;
    aspect-ratio: 1 / 1;
    justify-content: space-between;
    overflow: hidden;
    position: relative;
    /* transition: 0.4s all; */
    border: 0px;
    scale:1;
    background-position-x: center;
}

#biblioteca_result .tb_intra_fila > * {
	z-index: 2;
	position: relative;
}

#biblioteca_result .tb_intra_fila > .media_viewer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

#biblioteca_result .tb_intra_fila .buttons {
    width: 100%;
    padding: 0px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#biblioteca_result .tb_intra_fila .icons {
    background-color: transparent;
    border: 0px;
    padding: 0px;
    font-size: 20px;
    opacity: 0;
    transition: 0.4s all;
}

#biblioteca_result .tb_intra_fila .icons.personal {
	opacity: 1;
}

#biblioteca_result .tb_intra_fila .content {
    width: 100%;
}

#biblioteca_result .tb_intra_fila .content .title {
	font-size: 30px;
	font-weight: bold;
	margin-bottom: 10px;
	line-height: normal;
	text-wrap-style: balance;
}

#biblioteca_result .tb_intra_fila .content .tags {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

#biblioteca_result .tb_intra_fila .content .tags > div {
	width: 100%;
	justify-content: flex-start;
	padding: 0px;
	flex-wrap: wrap;
	gap: 5px;
}

#biblioteca_result .tb_intra_fila:hover {
	cursor: pointer;
}
#biblioteca_result .tb_intra_fila:hover .icons {
	opacity: 1;
}

/* ---------------- */

/* ----- CALENDAR ------ */

.calendar {
	/* width: auto; */
	/* font-family: sans-serif; */
	color: var(--color-textos);
	/* width: 100%; */
	}
  
.calendar .calendar-header {
	display: grid;
	justify-content: space-between;
	margin-bottom: 10px;
	align-items: center;
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	/* font-weight: bold; */
	text-align: center;
	gap: 7px;
}

.calendar .calendar-header #prev-month {
	grid-column: 1 / span 1;
}
.calendar .calendar-header #next-month {
	grid-column: 7 / span 1;
}

.calendar #month-year {
	font-size: 18px;
	margin: 0px;
	grid-column: 2 / span 5;
}

.calendar .calendar-header button {
	border: 0px;
	background-color: transparent;
	color: var(--color-textos);
}
  
.calendar .calendar-weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
/* font-weight: bold; */
text-align: center;
margin-bottom: 4px;
gap: 7px;
}

.calendar .calendar-weekdays div:nth-last-child(-n + 2) {
	color: var(--color-textos-hover)
}
  
.calendar .calendar-days {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 7px;
justify-items: center;
}
  
.calendar .day {padding: 4px;text-align: center;/* cursor: pointer; */transition: background 0.2s;aspect-ratio: 1;/* margin: 5px; */border: 2px solid transparent;}

.calendar .day.session {
	background-color: var(--color-secundari);
	color: var(--color-fons);
	border-radius: 100px;
	cursor: pointer;
}

.calendar .day.today {
	border-radius: 100px;
	border: 2px solid var(--color-textos);
	opacity: 1;
}
.calendar .day.inactive {
/* color: #999; */
cursor: default;
opacity: 0.4;
}

.calendar .day.weekend {
	color: var(--color-textos-hover)
}

.calendar .day.active {
	border-color: var(--btn-principal-fons);
}
  
#calendar_list_container {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

#calendar_list_container .session {
	display: flex;
	justify-content: space-between;
	background-color: var(--color-secundari);
	color: var(--color-fons);
	border-radius: 20px;
	padding: 5px 1em;
	/* cursor: pointer; */
	align-items: center;
	padding-right: 0.5em;
	line-height: normal;
}

#calendar_list_container .session.inactive {
	opacity: 0.5;
	cursor: auto;
}
#calendar_list_container .session.grup {
}
#calendar_list_container .session.grup > div {
	display: flex;
	gap:5px;
}
#calendar_list_container .calendar_session_group {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
#calendar_list_container .calendar_session_group .session {
	margin-left: 20px;
}
#calendar_list_container .session button {
	font-size: 14px;;
}

#calendar_list_container #view_more {
	background-color: var(--color-principal);
	color: var(--color-textos);
	justify-content: center;
	cursor: pointer;
}

/* ----------------- */

/* PROGRAMACIONES */


#schedules {
    width: 100%;
}

#filtre_schedules {
	width: auto;
	min-width: 370px;
	position: relative;
}

#schedules_result {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1%;
    row-gap: 1em;
}

#schedules_result .tb_intra_fila {
    width: 19.2%;
    flex-direction: column;
    background-color: color-mix(in srgb, var(--color-fons), var(--color-extra) 35%);
    border-radius: 25px;
    padding: 20px;
    /* aspect-ratio: 16 / 9; */
    justify-content: space-between;
    overflow: hidden;
    position: relative;
    /* transition: 0.4s all; */
    border: 0px;
    scale:1;
}

#schedules_result .tb_intra_fila > * {
	z-index: 1;
	position: relative;
}

#schedules_result .tb_intra_fila .buttons {
    width: 100%;
    padding: 0px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: transparent;
}

#schedules_result .tb_intra_fila .icons {
    background-color: transparent;
    border: 0px;
    padding: 0px;
    font-size: 20px;
    opacity: 0;
    transition: 0.4s all;
}

#schedules_result .tb_intra_fila .icons.personal {
	opacity: 1;
}

#schedules_result .tb_intra_fila .content {
    width: 100%;
}

#schedules_result .tb_intra_fila .content .title {
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 10px;
	line-height: normal;
	text-wrap-style: balance;
}



#schedules_result .tb_intra_fila .desc {
	display: flex;
	color: var(--color-textos-hover);
	line-height: 1;
	justify-content: space-between;
}

#schedules_result .tb_intra_fila:hover {
	cursor: pointer;
}

#schedules_result .tb_intra_fila:hover .icons {
	opacity: 1;
}

#schedules .list .badge {
	position: relative;
	line-height: normal;
}
#schedules .list .delete {
	position: absolute;
	right: -10%;
	top: -20%;
	font-size: 10px;
	aspect-ratio: 1 / 1;
	padding: 3px;
	display: none;
}
#schedules .list .delete:hover {
	background-color: var(--color-principal);
	border-color: var(--color-principal);
}
#schedules .list .badge:hover .delete {
	display: flex;
}


#pnl_schedule {

}

#pnl_schedule #id_workout .value {
	display: flex;
	gap: 5px;
	align-items: center;
}

#pnl_schedule span.info_workout {
    color: var(--color-principal);
    /* font-size: 16px; */
}

#pnl_schedule #schel_devices .list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
#pnl_schedule #schel_devices .list .device {
	display: flex;
	justify-content: space-between;
	background-color: var(--color-secundari);
	color: var(--color-fons);
	border-radius: 20px;
	padding: 5px 1em;
	align-items: center;
	padding-right: 0.3rem;
}
#pnl_schedule #schel_recurr .list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
#pnl_schedule #schel_recurr .list .recurrencia {
	display: flex;
	justify-content: space-between;
	background-color: var(--color-secundari);
	color: var(--color-fons);
	border-radius: 20px;
	padding: 5px 1em;
	align-items: center;
}

/* ---------- */


/* --- WORKFLOW --- */

#pnl_workflow {

}

#pnl_workflow .title {
	margin: 0px;
}

#pnl_workflow .pnl-title .custom {
	color: var(--color-principal);
	font-size: 0.6em;
}

#pnl_workflow .fluxe {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: center;
	position: relative;
	min-height: 10vh;
	border-radius: 20px;
	transition: 0.5s padding;
	border: 5px dotted transparent
}

#pnl_workflow .fluxe.ondrag {
	padding: 10px;
	animation: customAni 3s ease 0s infinite normal none;
}

@keyframes customAni {
	0%,
	50%,
	100% {
	  border-color: var(--bg-panels);
	}
  
	25%,
	75% {
	  border-color: transparent;
	}
  }

#pnl_workflow .fluxe .add_module {
	position: absolute;
	left: 50%;
	top: calc(100% - 10px);
	transform: translate(-50%, 0%);
	z-index: 2;
}

#pnl_workflow .fluxe .add_module:hover {
	border-color: var(--color-extra) !important;
	background-color: var(--color-extra) !important;
}

#pnl_workflow .module.ui-draggable, #pnl_workflow .module.ui-sortable-handle {
	cursor: grab;
}
#pnl_workflow .module.ui-draggable-dragging, #pnl_workflow .module.ui-sortable-helper {
	cursor: grabbing;
}

#pnl_workflow .fluxe .module {
	display: flex;
	width: 100% !important;
	background-color: var(--color-secundari);
	border-radius: 25px;
	padding: 20px;
	position: relative;
	gap: 20px;
	color: var(--color-fons);
	position: relative;
	align-items: center;
	cursor: grab;
}

#pnl_workflow .fluxe .module .duration {
	color: var(--color-principal);
}
#pnl_workflow .fluxe .module .duration .info {
	color: darkgoldenrod;
}

#pnl_workflow .fluxe .module .info {width: 100%;}

#pnl_workflow .fluxe .module .tag {

}

#pnl_workflow .fluxe .module .buttons {
	position: relative;
	/* right: 0px; */
	/* position: relative; */
	/* top: 0; */
	/* width: 100%; */
	display: flex;
	/* flex-direction: column; */
	align-items: flex-end;
	gap: 5px;
	justify-content: flex-end;
}

#pnl_workflow .fluxe .module .title {
	transition: 0.3s all;
}



#pnl_workflow .fluxe .module .desc {

}

#pnl_workflow .configs {

}

#pnl_workflow .global_cfg {

}

#pnl_workflow .global_cfg .list {
	display: flex;
	/* gap: 2%; */
	row-gap: 10px;
	margin-top: 20px;
	justify-content: space-between;
	/* position: relative; */
	width: 100%;
}

#pnl_workflow .list .module .title {
	font-size: 16px;
	transition: 0.3s all;

}

#pnl_workflow .list .module {
	width: 49%;
	padding: 10px 15px;
	background-color: var(--color-secundari);
	border-radius: 20px;
	/* aspect-ratio: 2 / 1; */
	color: var(--color-fons);
	/* cursor: pointer; */
}

#pnl_workflow #modal_module_library .list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex-wrap: wrap;
}

#pnl_workflow #modal_module_library .list .module {
	width: 100%;
	cursor: pointer;
}

#pnl_workflow .list .module .buttons {
	display: none;
}

#pnl_workflow .module_cfg {

}
#pnl_workflow .module_cfg .params {
	display: flex;
	flex-direction: column;
}

#pnl_module .params,
#pnl_module_exercises .params {
    flex-direction: column;
    font-size: 16px;
}

#pnl_module .params .param,
#pnl_module_exercises .params .param {
    display: flex;
    flex-direction: row;
    align-content: start;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

#pnl_module .params .param > div,
#pnl_module_exercises .params .param > div {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    flex-wrap: wrap;
}

#pnl_module .params .param > div.label,
#pnl_module_exercises .params .param > div.label {
	width: 100%;
	margin-bottom: 5px;
}

#pnl_module .params .param input,
#pnl_module_exercises .params .param input {
    padding: 5px 10px;
}

#pnl_module .params .param input.quill,
#pnl_module_exercises .params .param input.quill {
	width: 100%;
}

#pnl_module .params .param:has(.checkbox),
#pnl_module_exercises .params .param:has(.checkbox) {
	/* flex-direction: row-reverse; */
	gap: 10px;
}
#pnl_module .params .param:has( > .checkbox) > div,
#pnl_module_exercises .params .param:has( > .checkbox) > div {
	width: auto;
	margin-bottom: 0px !important;
}

#pnl_module #modal_media_library {

}

#pnl_module #modal_media_library_msg, 
#pnl_module #modal_media_audios_msg,
#pnl_module_exercises #modal_exercises_list_helper_msg
{
	display: flex;
	gap: 10px;
}

#pnl_module #modal_media_library_msg .tb_intra_fila, 
#pnl_module #modal_media_audios_msg .tb_intra_fila 
{
    width: calc(25% - 10px);
    flex-direction: column;
    background-color: color-mix(in srgb, var(--color-fons), var(--color-extra) 35%);
    border-radius: 25px;
    padding: 15px;
    aspect-ratio: 1 / 1;
    justify-content: space-between;
    overflow: hidden;
    position: relative;
    border: 0px;
    scale:1;
    background-position-x: center;
}
#pnl_module #modal_media_audios_msg .tb_intra_fila {
	aspect-ratio: auto;
}

#pnl_module #modal_media_library_msg .tb_intra_fila > *,
#pnl_module #modal_media_audios_msg .tb_intra_fila > * 
{
	z-index: 2;
	position: relative;
}

#pnl_module #modal_media_library_msg .tb_intra_fila > .media_viewer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

#pnl_module #modal_media_library_msg .tb_intra_fila .buttons, 
#pnl_module #modal_media_audios_msg .tb_intra_fila .buttons {
    width: 100%;
    padding: 0px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#pnl_module #modal_media_library_msg .tb_intra_fila .icons, 
#pnl_module #modal_media_audios_msg .tb_intra_fila .icons {
    background-color: transparent;
    border: 0px;
    padding: 0px;
    font-size: 20px;
    opacity: 0;
    transition: 0.4s all;
}

#pnl_module #modal_media_library_msg .tb_intra_fila .icons.personal, 
#pnl_module #modal_media_audios_msg .tb_intra_fila .icons.personal {
	opacity: 1;
}

#pnl_module #modal_media_library_msg .tb_intra_fila .content, 
#pnl_module #modal_media_audios_msg .tb_intra_fila .content {
    width: 100%;
}

#pnl_module #modal_media_library_msg .tb_intra_fila .content .title, 
#pnl_module #modal_media_audios_msg .tb_intra_fila .content .title {
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 10px;
	line-height: normal;
	text-wrap-style: balance;
	margin-top: 10px;
}

#pnl_module #modal_media_library_msg .tb_intra_fila .content .tags, 
#pnl_module #modal_media_audios_msg .tb_intra_fila .content .tags {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

#pnl_module #modal_media_library_msg .tb_intra_fila .content .tags > div, 
#pnl_module #modal_media_audios_msg .tb_intra_fila .content .tags > div {
	width: 100%;
	justify-content: flex-start;
	padding: 0px;
	flex-wrap: wrap;
	gap: 5px;
}

#pnl_module #modal_media_library_msg .tb_intra_fila:hover, 
#pnl_module #modal_media_audios_msg .tb_intra_fila:hover {
	cursor: pointer;
}
#pnl_module #modal_media_library_msg .tb_intra_fila:hover .icons, 
#pnl_module #modal_media_audios_msg .tb_intra_fila:hover .icons {
	opacity: 1;
}

#modal_helper_params_msg,
#modal_exercises_list_helper_msg {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

#modal_helper_params_msg .title,
#modal_exercises_list_helper_msg .title {
	/* font-size: 24px; */
	font-weight: bold;
	border-bottom: 1px solid var(--border-menu);
	margin-bottom: 5px;
	padding-bottom: 5px;
}

/* --- -------- --- */

/* --- MODULE EJERCICIOS --- */

#modal_exercises_list .modal-lg {
	--bs-modal-width: 1100px;
}

#modal_exercises_list_msg {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1%;
    row-gap: 1em;
}

#modal_exercises_list_msg .tb_intra_fila {
    width: 24.2%;
    flex-direction: column;
    background-color: color-mix(in srgb, var(--color-fons), var(--color-extra) 35%);
    border-radius: 25px;
    padding: 20px;
    aspect-ratio: 3 / 4;
    justify-content: space-between;
    position: relative;
    border: 0px;
    scale:1;
    background-position-x: center;
    display: flex;
    overflow: hidden;
    gap: 20px;
}

#modal_exercises_list_msg .tb_intra_fila > * {
	z-index: 2;
	position: relative;
}

#modal_exercises_list_msg .tb_intra_fila > video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

#modal_exercises_list_msg .tb_intra_fila .buttons {
    width: 100%;
    padding: 0px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: transparent;
}

#modal_exercises_list_msg .tb_intra_fila .icons {
    opacity: 0;
}

#modal_exercises_list_msg .tb_intra_fila .content {
    width: 100%;
}

#modal_exercises_list_msg .tb_intra_fila .content .title {
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 10px;
	line-height: normal;
	text-wrap-style: balance;
}

#modal_exercises_list_msg .tb_intra_fila .content .tags {
	display: flex;
	flex-direction: column;
	gap: 5px;
	/* display: none; */
}

#modal_exercises_list_msg .tb_intra_fila .content .tags > div {
	width: 100%;
	justify-content: flex-start;
	padding: 0px;
	flex-wrap: wrap;
	gap: 5px;
	background-color: transparent;
	display: flex;
}

#modal_exercises_list_msg .tb_intra_fila:hover {
	cursor: pointer;
}

#modal_exercises_list_msg .tb_intra_fila:hover .icons {
	opacity: 1;
}

.module_exercises_ex {
    display: flex;
    border-radius: 20px;
    /* overflow: hidden; */
    background-color: var(--color-secundari);
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
    cursor: grab;
}

.module_exercises_ex.ui-sortable-helper {
	cursor: grabbing;
}

.module_exercises_ex > .texts {
    display: flex;
    margin: 10px 20px;
    flex-wrap: nowrap;
    color: var(--color-fons);
    margin-left: 30px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.module_exercises_ex > .texts .input {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 16px;
    line-height: normal;
    color: var(--color-textos);
    position: relative;
    max-width: 150px;
    border: 1px solid;
    border-radius: 5px;
    padding: 3px 10px;
}
.module_exercises_ex > .texts .input > i {/* position: absolute; *//* left: 8px; *//* z-index: 1; */}
.module_exercises_ex > .texts .input input {
    font-size: 14px;
    padding: 5px;
    /* border-color: var(--btn-principal-fons) !important; */
    /* color: var(--btn-secundari-text) !important; */
    padding-left: 25px;
    width: 100%;
}

.module_exercises_ex > .texts .station {
	/* font-size: 20px; */
	line-height: normal;
	font-weight: bold;
	position: absolute;
	left: 0;
	transform: translateX(-50%);
	z-index: 1;
	border-radius: 100px;
	pointer-events: none;
}
.module_exercises_ex > .buttons {
	display: flex;
	gap: 10px;
	margin: 20px;
	align-items: flex-start;
}

.module_exercises_ex > div .title {
    font-size: 20px;
    /* width: 100%; */
}

.module_exercises_ex > video {
	width: 100%;
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
}

.module_exercises_ex > img {
    max-height: 130px;
    aspect-ratio: 1;
    object-fit: cover;
}

/* --- ----------------- --- */

.preview {
    width: 100%;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    background-color: #000;
    --scale: 0.5;
}

.preview iframe {
    width: 1280px !important;
    height: 720px !important;
    max-width: none !important;
    max-height: none !important;
    border: 0;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: top left;
    transform: scale(var(--scale));
    pointer-events: none;
}

@media screen and (max-width: 1440px) {

	.caixa_general_login #caixa_auth {
		width: 100% !important;
		padding: 25px 0px;
		padding-bottom: 0px;
	}

	.usuari > a {
		font-size: 20px;
	}
	.caixa_tornar_endarrera, .caixa_tornar_endarrera a {
		font-size: 20px;
	}

	/* .pnl-grup-title {
		flex-direction: column;
		align-items: flex-start;
	} */

	#filtre_ejercicios {
		padding: 0px !important;
		width: 100%;
		min-width: auto;
		z-index: 1;
	}

	#filtre_ejercicios .caixa_titols_interior_pnl {
		border-radius: 100px;
		overflow: hidden;
	}
	
	#ejercicios_result {
		gap: 4%;
		row-gap: 2vh;
	}
	#ejercicios_result .tb_intra_fila {
		width: 100%;
		aspect-ratio: auto;
		/* justify-content: end; */
		flex-direction: column-reverse;
		gap: 100px;
		border-radius: 20px;
		padding: 20px;
	}
	#ejercicios_result .tb_intra_fila .buttons {
		width: 100% !important;
	}

	#ejercicios_result .tb_intra_fila .icons {
		opacity: 1;
		font-size: 20px;
		line-height: normal;
	}
	
	#ejercicios_result .tb_intra_fila .content .title {
		font-size: 20px;
	}
	#ejercicios_result .tb_intra_fila .content .tags > div {
		width: 100% !important;
		flex-direction: row;
	}
	.caixa_generica_filtres {
		border-radius: 20px;
	}
	.pnl-title {
		flex-direction: column;
		gap: 0px;
	}
	#home_content .pnl-title {
		flex-direction: row;
	}
	.pnl-grup-body {
		padding: 0px !important;
	}
	.caixa_interna_bloc_v2.mida_meitat {
		padding: 20px;
	}
	#treb_edit_form.caixa_interna_bloc_v2 .caixa_contingut_interior_pnl .caixa_dades_info {
		width: 100%;
	}
	#legals_container .caixa_interna_dades_personals {
		flex-direction: column;
		align-items: flex-start;
	}
	.caixa_general_contingut #top {
		padding-left: 1rem;
		padding-right: 1rem;
		z-index: 10;
	}
}

@media screen and (max-width: 1280px) {
	#menu .caixa_interna_menu {
		padding: 20px 15px;
	}
}

@media screen and (max-width: 1000px) {
	select, select.form-control {
		width: 100%;
	}
	#menu {
		transition: 0.5s left;
	}
	#content.active {
		padding-left: 15px;
		padding-right: 15px;
	}
	.caixa_punts_menu {
		padding-top: 0px;
	}
	.usuari > a {
		color: var(--color-textos);
	}

	#home_gadgets {
		flex-direction: column;
		row-gap: 50px;
	}
	.mida_gran, .mida_meitat, .mida_small {
		width: 100% !important;
	}

	.caixa_generica_filtres {
		position: relative;
		top: 0;
	}
	.pnl-grup-title {
		flex-direction: row;
		align-items: end;
		flex-wrap: wrap;
		gap: 10px;
	}

	.caixa_interna_bloc_v2 {
		padding: 20px;
	}

	.caixa_boto_desple_filtre .caixa_filtre_basic input {
		padding: 10px;
		padding-left: 15px;
	}

	#filtre_schedules, #filtre_workouts, #filtre_biblioteca, #filtre_devices {
		min-width: auto;
		width: 100%;
		z-index: 1;
	}

	.calendar .day {
		padding: 0px;
	}

	/* SCHEDULES */
	.caixa_boto_desple_filtre i {
		width: auto;
		height: auto;
	}
	#schedules_result {
		gap: 20px;
	}
	#schedules_result .tb_intra_fila {
		width: 100%;
	}
	#schedules_result .tb_intra_fila .buttons {
		order: 0;
		width: 100% !important;
	}
	#schedules_result .tb_intra_fila .buttons > * {
		opacity: 1;
		/* font-size: 20px; */
	}

	#pnl_schedule #dades {
		order: 0;
	}
	#pnl_schedule #schedule_calendar {
		order: 3;
	}
	#pnl_schedule #schel_devices {

	}
	#pnl_schedule #horaris_base {

	}
	/* END SCHEDULES */

	/* WORKOUT */
	#workouts_result .tb_intra_fila {
		width: 100%;
	}
	#workouts_result .tb_intra_fila .buttons > * {
		opacity: 1;
	}
	/* END WORKOUT */

	/* EJERCICIOS */
	#imatge_portada .caixa_titols_interior_pnl, #video .caixa_titols_interior_pnl, #imatge_logo_tema .caixa_titols_interior_pnl {
		padding: 20px;
	}
	#imatge_portada .inputs.visible, #video .inputs.visible {
		padding: 20px;
	}
	/* END EJERCICIOS */

	/* BIBLIOTECA */
	#biblioteca_result {
		gap: 2%;
		row-gap: 10px;
	}
	#biblioteca_result .tb_intra_fila {
		width: 49%;
	}
	.form-group.double > div {
		width: 100% !important;
	}
	/* END BIBLIOTECA */

	/* DEVICES */
	#devices_result .tb_intra_fila {
		width: 100%;
	}
	#devices_result .tb_intra_fila .icons {
		opacity: 1;
	}
	/* END DEVICES */
}