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

   Author: Hybrid Solutions
   Author URI: http://www.hybrid.com.pt
   Platform: eContent Manager
   Description: Base styles for eContent Manager framework UI.
   Version: 1.0.0

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

@charset "utf-8";

/* ==================================================================================
   eCM UI FONT IMPORTS
   ================================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;400;500;600;700&family=Varela+Round&display=swap');


/* ==================================================================================
   eCM UI LESS IMPORTS
   ================================================================================== */

/* skin-base-mixins.less is no longer imported here: this is now plain CSS, so the two
   mixins that were actually used below (.eCM-default-transition and .delay) have been
   inlined at their call sites instead. */


/* ==================================================================================
   eCM UI VARIABLES
   ================================================================================== */

/* Info: With LESS, MUST USE (--css-variable-number) for variables with number in the end! */

:root {
	/* eContent generic Colors */
	--ecm-light: #f8f9fa;
	--ecm-dark: #212529;
	/* Grays */
	--ecm-gray-100: #f4f6fa; /* input bg, generic light bg */
	--ecm-gray-200: #bfc3ca; /* disabled, secondary info */
	--ecm-gray-300: #959cb6; /* input placeholder text, muted text */
	--ecm-gray-400: #1e354d; /*#505A64; /* main text, labels, input text, toolbar buttons/icons, submenus */
	--ecm-gray-500: #041e39; /*#323544; /* generic dark bg */
	/* Base colors */
	--ecm-green: #8BC34A; /* Material Design Colors Light Green 500 */
	--ecm-green-light: #AED581; /* Material Design Colors Light Green 300 */
	--ecm-green-dark: #689F38; /* Material Design Colors Light Green 700 */
	--ecm-blue: #29B6F6; /* Material Design Colors Light Blue 400 */
	--ecm-blue-dark: #03A9F4; /* Material Design Colors Light Blue 500 */
	--ecm-blue-light: #ebf6fe;
	/* Accent colors */
	--ecm-primary: var(--ecm-blue);
	--ecm-primary-active: var(--ecm-blue-dark);
	--ecm-primary-light: var(--ecm-blue-light);
	--ecm-secondary: var(--ecm-green);
	--ecm-secondary-active: var(--ecm-green-dark);
	--ecm-secondary-light: var(--ecm-green-light);
	--ecm-success: var(--ecm-green);
	--ecm-info: var(--ecm-blue); /* #0dcaf0; */
	--ecm-warning: #FFA000;
	--ecm-warning-active: #de8b00;
	--ecm-danger: #fb5b7e; /* #f1416c; */
	--ecm-danger-active: #e03e5c;
	/* Borders & Shadows (https://getcssscan.com/css-box-shadow-examples) */
	--ecm-border-width: 1px;
	--ecm-border-style: solid;
	--ecm-border-color: #dee2e6;
	--ecm-border-radius: 0.375rem;
	--ecm-box-shadow: var(--ecm-box-shadow-28);
	--ecm-box-shadow-sm: 0 0.3px 0.4px hsla(0, 0, 0, 0.02), 0 0.9px 1.5px hsla(0, 0, 0, 0.045), 0 3.5px 6px hsla(0, 0, 0, 0.09);
	--ecm-box-shadow-md: var(--ecm-box-shadow-5);
	--ecm-box-shadow-5: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	--ecm-box-shadow-27: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
	--ecm-box-shadow-28: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
	--ecm-box-shadow-59: rgba(33, 35, 38, 0.1) 0px 5px 10px -5px;
	/* Links */
	--ecm-link-color: var(--ecm-primary);
	--ecm-link-hover-color: var(--ecm-primary-active);
	/* Button */
	--ecm-btn-color: white;
	--ecm-btn-bg: var(--ecm-primary);
	--ecm-btn-border-color: var(--ecm-primary);
	--ecm-btn-hover-color: white;
	--ecm-btn-hover-bg: var(--ecm-primary-active);
	--ecm-btn-hover-border-color: var(--ecm-primary-active);
	--ecm-btn-focus-shadow-rgb: 49,132,253;
	--ecm-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--ecm-btn-focus-shadow-rgb), .5);
	/* Input solid */
	--ecm-input-solid-bg: var(--ecm-gray-100);
	--ecm-input-solid-bg-focus: #fdfdfe; /*50% of ecm-gray-100*/ /*old value: #f4f6fa;*/
	--ecm-input-solid-color: var(--ecm-gray-400);
	--ecm-input-placeholder-solid-color: var(--ecm-gray-300);
	/* Navs */
	--ecm-nav-bg: var(--ecm-primary-light);
	--ecm-nav-color: var(--ecm-gray-400);
	--ecm-nav-bg-active: white;
	--ecm-nav-color-active: var(--ecm-primary-active);
	/* Alerts */
	--ecm-alert-color: white;
	--ecm-alert-border-radius: 0.475rem;
	/* UI Fonts */
	--ecm-font-sans-serif: 'Poppins', sans-serif;
	--ecm-font-family: var(--ecm-font-sans-serif);
	--ecm-font-size: .875rem; /* 14px */
	--ecm-font-weight: 400;
	--ecm-line-height: 1.5;
	/* Tooltips */
	--ecm-tooltip-opacity: 1;	
}


/* ==================================================================================
   eCM UI DEPRECATED STYLES
   ================================================================================== */

html, body {
	height: 100%;
	margin: 0px;
	padding: 0px;	
}
body {
	background-color: #FFFFFF;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeSpeed;
}

/* Area onde são colocados todos os modulos laterais*/
.LeftContainer {
	width: 161px;
	background-color: #cccdd0;
}

/* Container para os modulos laterais do eContent*/
.ModuleContainer {
	width: 140px;
	border-right: 1px solid #BFBFBF;
	border-bottom: 1px solid #BFBFBF;
	margin: 10px;
	margin-bottom: 5px;
}

/* Area onde são colocados os formulários do eContent */
.RightContainer {
	background-color: #cccdd0;
	width: 100%;
}

/* Container dos formularios do eContent*/
.RightContent {
	background-color: #FFFFFF;
	border-right: 1px solid #BFBFBF;
	border-bottom: 1px solid #BFBFBF;
	width: auto;
	margin-right: 10px;
	padding: 20px;
	padding-top: 30px;
	margin-bottom: 10px;
}

/* Barra de copyright do eContent*/
.footer {
	background-color: #999999;
	text-align: center;
	height: 35px;
	line-height: 35px;
}

/****************************/

.MolduraTemplateBiblioteca {
	border: 3px solid #ffffff;
	background-color: #FFFFFF;
}

.MolduraTemplateBibliotecaOver {
	cursor: hand;
	border: 3px solid #D7D7D7;
}

.DataListListagemFicheiros {
	background-color: #F7F7F7;
}

.DataListListagemFicheirosItem {
	border-bottom: 2px solid #ffffff;
	padding-bottom: 10px;
	padding-top: 10px;
}

.DataListListagemFicheirosSeparator {
	width: 10px;
	border-bottom: 2px solid #ffffff;
	padding-bottom: 10px;
	padding-top: 10px;
}

.ItemTextoStyle {
	font-family: var(--ecm-font-family);
	font-size: 0.6em;
	font-weight: bold;
	color: #777777;
	text-align: justify;
	line-height: 1.4em;

	/* Texto das descricoes com Bold*/
	& strong {
		font-weight: bold;
		color: #568700;
	}
}

/******************************/
/*****  Topo do eContent  *****/
/******************************/

.topLogo {
	background-image: url(../../eContentImages/azul/logo.gif);
	background-repeat: no-repeat;
	background-position: left;
	background-color: #368ebc;
}

.topBar {
	background-image: url(../../eContentImages/azul/bg_eContent.jpg);
	background-repeat: no-repeat;
	background-position: right;
	background-color: #368ebc;
}

.topBar2 {
	border-top: 4px solid #A2A2A2;
	background-color: #858585;
}

/*****************************************/
/*****	Data de entrada no topo    *****/
/*****************************************/

.labelTopInfo {
	font-family: var(--ecm-font-family);
	font-size: 10px;
	font-weight: bold;
	color: #FFFFFF;

	& a {
		color: #FFFFFF;
		text-decoration: underline;
	}

	& a:hover {
		text-decoration: none;
	}
}

/*****************************************/
/*****  Blocos Laterais do eContent  *****/
/*****************************************/

.TituloAreas {
	cursor: default;
	font-family: var(--ecm-font-family);
	font-size: 0.6em;
	font-weight: bold;
	letter-spacing: 0.2em;
	color: #fff;
	padding: 5px 0px 6px 0px;
	background-color: #858585;
	text-align: center;
	width: 140px;
	text-decoration: none;
}
.LabelInfoContainer {
	padding: 10px;
}
.LabelInfo {
	font-family: Arial, Verdana;
	font-size: 10px;
	font-weight: 100;
	color: #858585;

	& a {
		color: #858585;
		text-decoration: underline;
	}

	& a:hover {
		text-decoration: none;
	}
}

/**************************************/
/*****  Menus Principais do topo  *****/
/**************************************/

/* Menus Activos */

.left_tabON {
	float: right;
	display: block;
	padding-right: 3px; /* margin between tabs */;

	& a {
		color: #fff;
		font-family: var(--ecm-font-family);
		font-size: 12px;	
		text-decoration: none;
		background: url(../../eContentImages/azul/left_tab_over.gif) left top no-repeat;
		padding-left: 11px; /*Separa a imagem tab_left.gif do span, x pixels*/	
		display: inline-block;
		line-height: 21px;
		pointer-events: none;
		cursor: default;
	}

	& a:hover {
		background: url(../../eContentImages/azul/left_tab_over.gif) left top no-repeat;
		text-decoration: none;	
	}

	& span {
		background-color: #4e8dae;
		padding-left: 3px;
		padding-right: 10px;
		display: inline-block;
	}
}

/* Menus não Activos */

.left_tabOFF {
	float: right;
	display: block;
	padding-right: 3px; /* margin between tabs */;

	& a {
		color: #fff;
		font-family: var(--ecm-font-family);
		font-size: 12px;
		text-decoration: none;
		background: url(../../eContentImages/azul/left_tab.gif) left top no-repeat;
		padding-left: 11px; /*Separa a imagem tab_left.gif do span, x pixels*/	
		display: inline-block;
		line-height: 21px;
	}

	& a span {
		background-color: #00456d;
		padding-left: 3px;
		padding-right: 10px;
		display: inline-block;
	}

	& a:hover {
		background: url(../../eContentImages/azul/left_tab_over.gif) left top no-repeat;
		text-decoration: none;
	}

	& a:hover span {
		background-color: #4e8dae;
	}
}

/***************************************/
/*****  Menus Secundários do topo  *****/
/***************************************/

/* Menu Activo */

.right_tabON {
	float: left;
	display: block;
	background: url(../../eContentImages/common/right_tab.gif) right top no-repeat;
	background-color: #FFFFFF;
	padding: 3px 10px 3px 3px;
	margin-right: 2px;	/*margem entre tabs */;

	& span {
		font-family: var(--ecm-font-family);
		font-size: 12px;
		font-weight: bold;
		color: #5175AC;
		text-decoration: none;
		background-color: #FFF;
		padding-top: 3px;
		padding-bottom: 3px;
		padding-right: 3px;
		/* aumenta a distancia entre o texto e o limite direito do span*/
		padding-left: 10px;
		/* aumenta a distancia entre o texto e o limite esquerdo do span*/
	}
}

/* Menus não Activos */

.right_tabOFF {
	float: left;
	display: block;
	background: url(../../eContentImages/common/right_tab.gif) right top no-repeat;
	/*Tem que ter aqui o padding-bottom tambem por causa do IE*/
	padding-top: 3px;
	padding-bottom: 3px;
	background-color: #90b04f;
	margin-right: 2px; /*margem entre tabs */;

	& a {
		color: #fff;
		font-family: var(--ecm-font-family);
		font-size: 12px;
		font-weight: normal;
		text-decoration: none;
		padding-right: 11px;
		/*Separa a imagem tab_left.gif do span, x pixels*/
		padding-bottom: 3px;
	}

	& a span {
		padding-left: 10px;
		/* aumenta a distancia entre o texto e o limite esquerdo do span*/
		padding-right: 3px;
		/* aumenta a distancia entre o texto e o limite direito do span*/
		padding-top: 3px;
		padding-bottom: 3px;
	}

	&:hover {
		background: url(../../eContentImages/common/right_tab.gif) right top no-repeat;
		background-color: #FFFFFF;
		/*pinta o lado direito da tab*/
	}

	&:hover a span {
		background-color: #FFFFFF;
		/*pinta toda a tab menos o lado direito*/
		color: #5175AC;
	}
}

/****************************/
/*****     Efeitos      *****/
/****************************/

/* Linha cinza horizontal para fundo*/

.hdot_lineTop {
	padding-top: 1px;
	border-top: solid #EAEAEA 1px;
}

/* Linha cinza horizontal para fundo*/

.hdot_line {
	padding-bottom: 1px;
	border-bottom: solid #EAEAEA 1px;
}

/****************************/
/*****  Tipos de letra  *****/
/****************************/

/* Titulos da Administracao*/

.TitulosAdministracao a {
	display: block;
	width: 100%;
	height: 25px;
	border-bottom: 1px solid #e0e0e0;
	font-family: var(--ecm-font-family);
	font-size: 14pt;
	color: #5175AC;
	font-weight: normal;
	text-decoration: none;

	&:hover {
		color: #5175AC;
	}
}

/*Titulos das Areas das paginas */

.TituloPrincipal {
	display: block;
	width: 100%;
	border-bottom: 1px solid #e0e0e0;
	font-family: var(--ecm-font-family);
	font-size: 13pt;
	color: #858585;
	font-weight: normal;
}

/*Titulos das descricoes */

.TituloSecundario {
	height: 33px;

	& span {
		display: block;
		width: 95%;
		height: 33px;
		border-bottom: 1px solid #e0e0e0;
		font-family: var(--ecm-font-family);
		font-size: 11pt;
		color: #858585;
		font-weight: normal;
		padding-left: 5px;
		margin-left: 24px;
		margin-top: 30px;
		padding-top: 1px;
	}
}
.TituloSecundarioAJAX {
	width: 92%;
	height: 33px;
	border-bottom: 1px solid #e0e0e0;
	font-family: var(--ecm-font-family);
	font-size: 11pt;
	color: #858585;
	font-weight: normal;
	margin-top: 30px;
	margin-left: 12px;
}

/* Texto das descricoes */

.descricoes_text {
	font-family: var(--ecm-font-family);
	font-size: 13px;
	color: #888;
	text-align: justify;
	line-height: 1.6em;
}

/* Texto das descricoes com Bold*/

.descricoes_text b, .descricoes_text strong {
	font-weight: bold;
	color: #568700;
}

/* Texto dos Titulos dos campos */

.field_text {
	font-family: var(--ecm-font-family);
	font-size: 12px;
	color: #858585;	
}

/* Texto dos Titulos dos campos com Bold*/

.field_text b, .field_text strong {
	font-weight: bold;
	color: #568700;
}

/* Texto de aviso de erro ou de informação*/
/* Parametro width deve ser definido localmente*/

.warning_box {
	background-color: #fbefef;
	border: 1px solid #f7d7d7;
	line-height: 14px;
	font-family: var(--ecm-font-family);
	font-size: 0.7em;
	color: #d64b57;
	font-weight: 100;
	text-align: center;
	padding: 10px;
	margin: 15px;
}
.info_box {
	background-color: #f3f8f1;
	border: 1px solid #e4f0de;
	line-height: 14px;
	font-family: var(--ecm-font-family);
	font-size: 0.7em;
	color: #568700;
	font-weight: 100;
	text-align: center;
	padding: 10px;
	margin: 15px;
}
.Marca_vermelha {
	color: #ff0000;
	text-decoration: none;
	margin: 0 5px 0 5px;
	font-weight: bold;
}

/**************************/
/*****  Espaçamentos  *****/
/**************************/

.description_area1 {
	padding-top: 30px;
	padding-bottom: 30px;
	padding-left: 15px;
	padding-right: 15px;
}
.description_area2 {
	padding-top: 25px;
	padding-bottom: 0px;
	padding-left: 20px;
	padding-right: 30px;
}
.description_admin {
	padding-top: 25px;
	padding-bottom: 0px;
	padding-left: 25px;
	padding-right: 25px;
}
.form_area {
	padding-top: 55px;
	padding-bottom: 5px;
	padding-left: 15px;
	padding-right: 15px;
}
.icons_pequenos {
	margin-right: 5px;
}

/*******************/
/*****  Links  *****/
/*******************/

.Links_descricoes {
	font-family: var(--ecm-font-family);
	font-size: 1em;
	color: #5175ac;

	&:hover {
		text-decoration: none;
	}
}
.Links_botoes {
	font-family: var(--ecm-font-family);
	font-size: 10px;
	color: #5175ac;

	&:hover {
		font-family: "Verdana,Arial";
		font-size: 10px;
		color: #5175ac;
		text-decoration: none
	}
}

/* NAO Aplicar directamente nas tags A */

.xx_link {
	font-family: "Trebuchet MS";
	font-size: xx-small;
	font-weight: 100;
	color: #DDD;

	& a {
		font-family: "Trebuchet MS";
		font-size: xx-small;
		font-weight: 100;
		color: #FFFFFF;
		text-decoration: none
	}

	& a:hover {
		font-family: "Trebuchet MS";
		font-size: xx-small;
		font-weight: 100;
		text-decoration: underline
	}
}

/* Este estilo deixa de ser utilizado em links com imagem */

.Grid_itemLink {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #5175AC;
	border-bottom: 1px solid;
	text-decoration: none;

	&:hover {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 10px;
		font-style: normal;
		line-height: 18px;
		font-variant: normal;
		text-transform: none;
		color: #5175AC;
		border-bottom-style: dotted;
	}
}
.NormalLink {
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	color: #858585;
	text-decoration: none;

	&:hover {
		font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
		font-size: 12px;
		font-style: normal;
		font-weight: bold;
		font-variant: normal;
		color: #5175AC;
		text-decoration: none;
	}
}
.link_aceder {
	FONT-WEIGHT: bold;
	FONT-SIZE: 12px;
	COLOR: #858585;
	font-family: var(--ecm-font-family);
	TEXT-DECORATION: none;

	&:hover {
		TEXT-DECORATION: underline;
	}
}

/***********************/
/*****  Controlos ******/
/***********************/

.TextBox100 {
	width: 100px;
	height: 20px;
	padding-left: 6px;
	padding-top: 4px;
	margin-top: 2px;
	color: #666666;
	font-family: var(--ecm-font-family);
	font-size: 11px;
	vertical-align: middle;
	border: 1px solid #f0f5e3;
}
.TextBox198 {
	width: 198px;
	height: 20px;
	padding-left: 6px;
	padding-top: 4px;
	margin-top: 2px;
	color: #666666;
	font-family: var(--ecm-font-family);
	font-size: 11px;
	vertical-align: middle;
	border: 1px solid #f0f5e3;
}
.Campo_obrigatorio {
	border-right: 3px #FF0000 solid;
	padding-right: 2px;
	display: inline-block;
}
.TextBox250 {
	width: 250px;
	height: 20px;
	padding-left: 6px;
	padding-top: 4px;
	margin-top: 2px;
	color: #666666;
	font-family: var(--ecm-font-family);	
	vertical-align: middle;
	border: 1px solid #f0f5e3;
}
.TextBoxMultiline250 {
	width: 250px;
	height: 103px;
	padding-left: 6px;
	padding-top: 4px;
	margin-top: 2px;
	margin-right: 8px;
	color: #666666;
	font-family: var(--ecm-font-family);	
	vertical-align: middle;
	border: 1px solid #f0f5e3;
}
.TextBoxMultiline430 {
	width: 430px;
	height: 155px;
	padding-left: 6px;
	padding-top: 4px;
	margin-top: 2px;
	margin-right: 8px;
	color: #666666;
	font-family: var(--ecm-font-family);	
	vertical-align: middle;
	border: 1px solid #f0f5e3;
}
.TextBoxMultiline {
	padding-left: 6px;
	padding-top: 4px;
	color: #666666;
	font-family: var(--ecm-font-family);	
	vertical-align: middle;
	border: 1px solid #f0f5e3;
}
.ListBox {
	font-family: var(--ecm-font-family);
	font-size: 0.75em;
	color: #555555;
	vertical-align: middle;
	padding: 2px;
	border: 1px solid #f0f5e3;
}
.Botoes {
	cursor: pointer;
	border: 0px;
	background-color: #98BC49;
	font: normal 11px var(--ecm-font-family);
	color: #fff;
	vertical-align: middle;
	padding: 5px 12px;
	border-radius: 10px;

	&:hover {
		background-color: #81A238;
	}
}
.Botoes_medios {
	cursor: pointer;
	border: 0px;
	background-color: #98BC49;
	font: normal 11px var(--ecm-font-family);
	color: #fff;
	vertical-align: middle;
	padding: 5px 12px;
	border-radius: 10px;

	&:hover {
		background-color: #81A238;
	}
}
.Fotos {
	border: 1px solid #D5D5D5;
	border-bottom: 1px solid #C2C2C2;
	border-right: 1px solid #C2C2C2;
	font-family: Verdana, Arial;
	font-size: 10px;
	font-weight: normal;
	color: #666666;
	background-image: url(../../eContentImages/Common/BgBotao.gif);
	background-repeat: repeat-x;
	background-position: top;
	background-color: white;
	margin-right: 5px;
	vertical-align: middle;
}

/*********************************/
/*****  Grelhas de Listagem  *****/
/*********************************/

/* GRIDVIEWS - Styles while bootstrap is not introduced */

.ecm-table {
	font-family: "Montserrat","Roboto",Helvetica,Arial,sans-serif;
	font-size: 11px;
}
.ecm-table-header {
	background-color: #368ebc;
	color: #fff;

	& a {
		text-decoration: none;
		border-bottom: 1px solid;
		color: #fff;
	}

	& a:hover {
		border-bottom-style: dotted;
	}
}
.ecm-table-row,
.ecm-table-alternating-row {
	height: 80px;
	color: #666;
	/* ------------> MIXIN VALUE (was .eCM-default-transition(background-color,250ms);) */
	transition-property: background-color;
	transition-duration: 250ms;
	transition-timing-function: ease;

	& td {
		border-top: 1px solid #f0f0f0;
		padding: 20px;
	}

	&:hover {
		background-color: rgba(204, 227, 152, .5); /* #cce398 @ 50% */
		color: #646464;
	}

	& a {
		white-space: nowrap;
		color: #666;
		text-decoration:none;
		display: inline;
	}

	& a:hover {
		color:#368ebc;
	}
}
.ecm-table .label {
	line-height: 1;
	text-align: center;
	white-space: nowrap;
	vertical-align: baseline;
	margin-right: 5px;
	margin-bottom: 3px;
	padding: 5px 10px 3px 10px;
	display: inline-block;
	border-radius: 20px;

	&.label-success {
		background-color: #98bc49;
		color: #fff;
	}

	&.label-danger {
		background-color: #d9534f;
		color: #fff;
	}

	&.label-outline {
		background-color: rgba(255,255,255,0.5);
		border: 1px solid rgba(102,102,102,0.2);
		color: #666;
		padding: 6px 5px 4px 6px;
	}
}
.ecm-table .ecm-icon {color: #666;}
.ecm-table a.ecm-icon:hover {color: #368ebc}
.ecm-table .ecm-icon.publish {color: #98bc49;}
.ecm-table .ecm-icon.unpublish {color: #d9534f;}
.ecm-table .ecm-icon.submittopublish {color: #e1820e}

/* DATALIST */

.Grelha_Perfis_header {
	font-size: 0.7em;
	font-family: var(--ecm-font-family);
	text-align: left;
	color: #FFFFFF;
	background-color: #5175AC;
	height: 22px;
	padding-left: 10px;
}
.Grelha_Perfis_rows {
	font-size: 0.7em;
	font-family: "Trebuchet MS";
	color: #646464;
	background-color: #F7F7F7;
	border-bottom: solid 1px #E4E4E4;
	height: 25px;
	vertical-align: middle;
	padding-left: 10px;
}
.Grelha_Perfis_footer {
	font-size: 0.7em;
	font-family: "Trebuchet MS";
	color: #646464;
	background-color: #F7F7F7;
	height: 20px;
	vertical-align: middle;
	padding-left: 10px;
}

/* DATAGRID */

.Datagrid_HeaderStyle {
	background-color: #368ebc;
	font-family: var(--ecm-font-family);
	font-size: 10px;
	font-style: normal;
	color: #FFFFFF;
	font-variant: normal;
	border: solid 1px #618ec1;
	border-collapse: separate;

	/* Activar para colocar barra com gradient */
	& td {
		border-bottom: solid 1px #368ebc;
		background-position: top;
		background-repeat: repeat-x;
		height: 35px;
	}

	& a {
		color: #FFFFFF;
		text-decoration: none;
		border-bottom: 1px solid;
	}

	& a:hover {
		border-bottom-style: dotted;
	}
}

/* Item */

.Datagrid_ItemStyle {
	background-color: #f7f7f7;
	font-family: var(--ecm-font-family);
	font-size: 10px;
	font-style: normal;
	color: #666666;
	font-variant: normal;
	background-image: url(../../econtentimages/common/row_whitepixel.gif);
	background-repeat: repeat-x;
}
.Datagrid_LeftBorderStyle {
	border-left: solid 1px #DDDDDD;
	border-bottom: solid 1px #DDDDDD;
}
.Datagrid_RightBorderStyle {
	border-right: solid 1px #DDDDDD;
	border-bottom: solid 1px #DDDDDD;
}
.Datagrid_BothBorderStyle {
	border-left: solid 1px #DDDDDD;
	border-right: solid 1px #DDDDDD;
	border-bottom: solid 1px #DDDDDD;
}
.Datagrid_BottomBorderStyle {
	border-bottom: solid 1px #DDDDDD;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 2px;
	padding-top: 2px;
}

/* Item Alternado */

.Datagrid_AlternatingItemStyle {
	background-color: #ffffff;
	font-family: var(--ecm-font-family);
	font-size: 10px;
	font-style: normal;
	color: #666666;
	font-variant: normal;
	background-image: url(../../econtentimages/common/row_whitepixel.gif);
	background-repeat: repeat-x;
}
.Datagrid_SeparadorStyle {
	border-bottom: solid 1px #DDDDDD;
	background-image: url(../../econtentimages/common/SepColuna.gif);
	background-repeat: repeat-y;
	background-position: center;
	width: 4px;
}
.Datagrid_SelectedItemStyle {
	font-size: 10px;
	font-family: var(--ecm-font-family);
	height: 30px;
	color: #646464;
	background-color: #cce398;
	text-align: center;
}
.Datagrid_FooterStyle td {
	background-color: #FFFFFF;
}
.Datagrid_PagerStyle {
	font-size: 11px;
	font-family: var(--ecm-font-family);
	text-align: center;
	background-color: #FFFFFF;

	& span {
		text-align: center;
		color: #FFFFFF;
		padding: 0px 4px 0px 4px;
		background-color: #5175AC;
		text-decoration: none;
	}

	& a {
		font-size: 11px;
		font-family: var(--ecm-font-family);
		text-align: center;
		padding: 0px 4px 0px 4px;
		color: #646464;
		background-color: #F4F4F4;
		text-decoration: none;
	}

	& a:hover {
		text-align: center;
		color: #FFFFFF;
		padding: 0px 4px 0px 4px;
		background-color: #5175AC;
		text-decoration: none;
	}
}
.DataList_ResultsStyle {
	font-size: 11px;
	font-family: var(--ecm-font-family);
	text-align: center;
	color: #646464;
	background-color: #FFFFFF;
	padding-bottom: 15px;
}

/**************  FIM  *********************/

/**********************/
/*** JANELAS POP-UP ***/
/**********************/

.Janela {
	background-color: #CCCCCC;
	margin: 0px;
}
.JanelaContainer {
	margin: 10px;
	padding: 5px;
}
.JanelaContent {
	background-color: #FFFFFF;
	border-right: 1px solid #BFBFBF;
	border-bottom: 1px solid #BFBFBF;
	width: 100%;
	padding: 20px;
	padding-top: 30px;
}
.FicheiroLink {
	cursor: hand;
	cursor: pointer;
	font-family: var(--ecm-font-family);
	font-size: 10px;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #5175AC;
	text-decoration: underline;
}

/*************************************/
/*** CONTROLO GESTOR DE FICHEIROS ***/
/***********************************/

.InfoPasta {
	background-image: url("../../eContentImages/common/padraoPontilhado.gif");
	background-repeat: repeat-x;
	background-position: bottom;
	width: 100%;
	background-color: #FCFCFC;
}
.InfoPasta_texto {
	FONT-WEIGHT: normal;
	FONT-SIZE: 8pt;
	COLOR: black;
	font-family: var(--ecm-font-family);

	& strong {
		FONT-WEIGHT: bold;
		FONT-SIZE: 8pt;
		COLOR: black;
		FONT-FAMILY: Tahoma;
	}
}
.InfoGeral {
	width: 100%;
	background-color: #F1F5FB;
}
.InfoGeral_texto {
	FONT-WEIGHT: normal;
	FONT-SIZE: 10px;
	COLOR: black;
	font-family: var(--ecm-font-family);
	line-height: 12pt;

	& strong {
		text-align: left;
		FONT-WEIGHT: bold;
		FONT-SIZE: 10px;
		COLOR: black;
		font-family: var(--ecm-font-family);
		line-height: 12pt;
	}
}
.ContainerDireita {
	padding: 25px;
}

/* File information View */

.GrelhaInfo_Item {
	FONT-WEIGHT: normal;
	FONT-SIZE: 10px;
	COLOR: black;
	font-family: var(--ecm-font-family);
	line-height: 12pt;
	border-bottom: 1px dotted #EAEAEA
}
.GrelhaInfo_ItemRodape {
	FONT-WEIGHT: normal;
	FONT-SIZE: 10px;
	COLOR: black;
	font-family: var(--ecm-font-family);
	line-height: 12pt;
}
.GrelhaInfo_TituloItem {
	background-color: #B6D26D;
	FONT-WEIGHT: bold;
	FONT-SIZE: 10px;
	COLOR: #ffffff;
	font-family: var(--ecm-font-family);
	line-height: 14pt;
}

/* END OF DEPRECATED STYLES */


/* ==================================================================================
   eCM NEW STYLES (eCONTENT MANAGER 2.5+)
   ================================================================================== */


/* eCM GRADIENTS
   ================================================================================= */

.ecm-gradient-multiply {
	mix-blend-mode: multiply /* layered elements darkens the gradient below */
}
.ecm-gradient-primary-light {
	background: linear-gradient(270deg,rgba(255, 255, 255, 0) 0%, var(--ecm-primary-light) 140%)
}
.ecm-gradient-secondary-light {
	background: linear-gradient(270deg,rgba(255, 255, 255, 0) 0%, var(--ecm-secondary-light) 140%)
}
.ecm-gradient-gray-100 {
	background: linear-gradient(270deg,rgba(255, 255, 255, 0) 0%, var(--ecm-gray-100) 140%)
}

/* eCM ANIMATION - CUSTOM CLASSES
   ================================================================================= */

.delay-250ms { animation-delay: 0.25s; }
.delay-500ms { animation-delay: 0.5s; }
.delay-750ms { animation-delay: 0.75s; }
.delay-1000ms { animation-delay: 1s; }
.delay-1250ms { animation-delay: 1.25s; }
.delay-1500ms { animation-delay: 1.5s; }
.faster-500ms {-webkit-animation-duration: 0.5s; animation-duration: 0.5s;}
.faster-250ms {-webkit-animation-duration: 0.25s; animation-duration: 0.25s;}
.bounceInLeft, .bounceInRight, .fadeInUp, .fadeInUpDelay, .fadeInDown, .fadeInUpD, .fadeInLeft, .fadeInRight { visibility: visible !important; }

/* eCM BASE FONT STYLING
   ================================================================================= */

.ecm:not(.ecm-icon):not(.fa):not(.bi) {font-family: var(--ecm-font-family)}
.ecm {
	h1,h2,h3,h4,h5,h6,
	.h1,.h2,.h3,.h4,.h5,.h6 {
		font-family: var(--ecm-font-family);
	}
}

/* ==================================================================================
   eCM BOOTSTRAP NEW + CUSTOMIZED STYLES
   ================================================================================== */

/* eCM BOOTSTRAP BACKGROUND COLORS
   ================================================================================= */

.ecm .bg-primary,
.ecm.bg-primary {
	background-color: var(--ecm-primary) !important;
}
.ecm .bg-primary-subtle,
.ecm.bg-primary-subtle {
	--bs-primary-bg-subtle: color-mix(in srgb, var(--ecm-primary), #ffffff 85%);
}
.ecm .bg-secondary,
.ecm.bg-secondary {
	background-color: var(--ecm-secondary) !important;
}
.ecm .bg-secondary-subtle,
.ecm.bg-secondary-subtle {
	--bs-secondary-bg-subtle: color-mix(in srgb, var(--ecm-secondary), #ffffff 85%);
}
.ecm .bg-success,
.ecm.bg-success {
	background-color: var(--ecm-success) !important;
}
.ecm .bg-success-subtle,
.ecm.bg-success-subtle {
	--bs-success-bg-subtle: color-mix(in srgb, var(--ecm-success), #ffffff 85%) !important;
}
.ecm .bg-info,
.ecm.bg-info {
	background-color: var(--ecm-info) !important;
}
.ecm .bg-info-subtle,
.ecm.bg-info-subtle {
	--bs-info-bg-subtle: color-mix(in srgb, var(--ecm-info), #ffffff 85%);
}
.ecm .bg-danger,
.ecm.bg-danger {
	background-color: var(--ecm-danger) !important;
}
.ecm .bg-danger-subtle,
.ecm.bg-danger-subtle {
	--bs-danger-bg-subtle: color-mix(in srgb, var(--ecm-danger), #ffffff 85%);
}
.ecm .bg-warning,
.ecm.bg-warning {
	background-color: var(--ecm-warning) !important;
}
.ecm .bg-warning-subtle,
.ecm.bg-warning-subtle {	
	--bs-warning-bg-subtle: color-mix(in srgb, var(--ecm-warning), #ffffff 85%);
}

/* eCM BOOTSTRAP TEXT BACKGROUND COLORS
   ================================================================================= */

.ecm .text-bg-disabled {
    background-color: var(--ecm-gray-200) !important;
}
.ecm .text-bg-dark {
	background-color: var(--ecm-dark) !important;
}
.ecm .text-bg-primary, .ecm.text-bg-primary {
	background-color: var(--ecm-primary) !important;
}
.ecm .text-bg-secondary {
    background-color: var(--ecm-secondary) !important;
}
.ecm .text-bg-success, .ecm.text-bg-success {
	background-color: var(--ecm-success) !important;
}
.ecm .text-bg-info, .ecm.text-bg-info {
	background-color: var(--ecm-info) !important;
}
.ecm .text-bg-danger, .ecm.text-bg-danger {
	background-color: var(--ecm-danger) !important;
}
.ecm .text-bg-warning, .ecm.text-bg-warning {
	background-color: var(--ecm-warning) !important;
}
.ecm .text-bg-success *, .ecm.text-bg-success *,
.ecm .text-bg-info *, .ecm.text-bg-info *,
.ecm .text-bg-danger *, .ecm.text-bg-danger *,
.ecm .text-bg-warning *, .ecm.text-bg-warning *,
.ecm .text-bg-warning, .ecm.text-bg-warning {
	color: #fff !important;
}

.ecm .text-bg-gray-100, .ecm.text-bg-gray-100 {
	background-color: var(--ecm-gray-100) !important;
    color: var(--ecm-gray-400);
}

/* eCM BOOTSTRAP FONT + TEXT STYLING
   ================================================================================= */

.ecm .text-gray-200 {color: var(--ecm-gray-200) !important;}
.ecm .text-gray-300 {color: var(--ecm-gray-300) !important;}
.ecm .text-gray-400 {color: var(--ecm-gray-400) !important;}
.ecm .text-gray-500 {color: var(--ecm-gray-500) !important;}
.ecm .text-primary {color: var(--ecm-primary) !important;}
.ecm .text-secondary {color: var(--ecm-secondary) !important;}
.ecm .text-success {color: var(--ecm-success) !important;}
.ecm .text-info {color: var(--ecm-info) !important;}
.ecm .text-warning {color: var(--ecm-warning) !important;}
.ecm .text-danger {
	color: var(--ecm-danger) !important;

	&.disabled {
		opacity: .5;
	}
}
.ecm .fs-7, .ecm.fs-7 {
    /* New font size = 12px */
    font-size: 0.75rem !important;
}

/* eCM BOOTSTRAP LINK + LINK HOVER PATTERN UTILITIES (Like link-opacity-*-hover but for color)
   Allows to redefine the color for an element only on hover, without affecting the non-hover state. 
   Can be used in links or any other element like buttons.
   ================================================================================= */

.ecm .link-light,
.ecm .link-color-light-hover:hover {
	color: var(--ecm-light) !important;
}
.ecm .link-dark,
.ecm .link-color-dark-hover:hover {
	color: var(--ecm-dark) !important;
}
.ecm .link-white,
.ecm .link-color-white-hover:hover {
	color: white !important;
}
.ecm .link-gray-400,
.ecm .link-color-gray-400-hover:hover {
	color: var(--ecm-gray-400) !important;
}

/* eCM BOOTSTRAP PADDING
   ================================================================================= */

.ecm .px-6, .ecm.px-6 {
	/* New padding size */
	padding-right: 4.5rem !important;
	padding-left: 4.5rem !important
}
.ecm .px-7, .ecm.px-7 {
	/* New padding size */
	padding-right: 6rem !important;
	padding-left: 6rem !important;
}

/* eCM BOOTSTRAP TOOLTIPS
   ================================================================================= */

.tooltip.ecm-tooltip,
.ecm.tooltip {
	/* class applied using data-bs-custom-class="ecm-tooltip" */
	--bs-tooltip-zindex: 3100; /* required when used in windows to prevent placement behind them */
	--bs-font-sans-serif: var(--ecm-font-family);
	--bs-tooltip-opacity: var(--ecm-tooltip-opacity);
	--bs-tooltip-bg: var(--ecm-gray-500);
}
[data-bs-toggle="tooltip"]:not(A):not(button) {
	cursor: help;
}

/* eCM BOOTSTRAP FORMS
   ================================================================================= */

.ecm {
	
	.form-control {font-family: var(--ecm-font-family); font-size: var(--ecm-font-size)}
	.form-control.form-control-lg {
		/* keeps smaller font size but input height equal to lg size = 48px */
		font-size: var(--ecm-font-size);
		padding: .782rem 1rem;
	}
	.form-control.form-control-solid {
		background-color: var(--ecm-input-solid-bg);
		border-color: var(--ecm-input-solid-bg);
		color: var(--ecm-input-solid-color);
		transition: color .2s ease,background-color .2s ease;
	}
	.form-control:focus-visible {
		box-shadow: 0 0 0 0.15rem rgba(13,110,253,.15) !important;		
	}
	.form-control.form-control-solid:active,
	.form-control.form-control-solid.active,
	.form-control.form-control-solid:focus,
	.form-control.form-control-solid.focus {
		background-color: var(--ecm-input-solid-bg-focus);
		border-color: var(--ecm-input-solid-bg-focus);
		color: var(--ecm-input-solid-color);
		transition: color .2s ease,background-color .2s ease;		
	}	
	.RadComboBox .rcbHovered {
		background-color: var(--ecm-input-solid-bg-focus) !important;
	}
	.form-label {
		font-family: var(--ecm-font-family);
		font-weight: 600;
		color: var(--ecm-gray-400) !important;
	}
	& .form-select {
		font-family: var(--ecm-font-family);
		font-size: var(--ecm-font-size);
	}
	& .form-select.form-control-solid {
		background-color: var(--ecm-input-solid-bg);
		border-color: var(--ecm-input-solid-bg);
		color: var(--ecm-input-solid-color);
		transition: color .2s ease,background-color .2s ease;
	}
    & .form-select.form-select-lg {
        /* keeps smaller font size but input height equal to lg size = 48px */
        font-size: var(--ecm-font-size);
        padding: .782rem 1rem;
    }
	& .form-select:focus-visible {
		box-shadow: 0 0 0 0.15rem rgba(13,110,253,.15) !important;		
	}
	.form-select.form-control-solid:active,
	.form-select.form-control-solid.active,
	.form-select.form-control-solid:focus,
	.form-select.form-control-solid.focus {
		background-color: var(--ecm-input-solid-bg-focus);
		border-color: var(--ecm-input-solid-bg-focus);
		color: var(--ecm-input-solid-color);
		transition: color .2s ease,background-color .2s ease;		
	}	
	& .form-check { 
		display: flex;
		align-items: center;
		
		& .form-check-input {				
			margin-top: 0;
			&:focus {
				border-color: #b5b5c3;
				box-shadow: 0 0 0 0.15rem rgba(13,110,253,.15) !important;
			}
			&:checked {background-color: var(--ecm-primary) !important;}			
		}
		&:not(.form-switch) .form-check-input {
			width: 1rem !important;
			height: 1rem !important;
		}
		&:not(.form-switch) .form-check-input-lg {
			width: 1.5rem !important;
			height: 1.5rem !important;			
			background-size: 65% 65%;
		}
		&.form-switch .form-check-input-lg {
			height: 1.5rem;
			width: 2.5rem;
		}
		&.form-check-solid .form-check-input:not(:focus) {            
			background-color: var(--ecm-input-solid-bg);
			border-color: var(--ecm-input-solid-bg);
		}
		& .form-check-label {
			margin-left: .55rem;
		}
		&.form-check-inline {
			display: inline-flex !important;
		}
	}
	/* Dependent on eCM TELERIK CONTROLS style definition */
	& .form-required:not(.ecm-bootstraps-radcombo) {
		border-left: 4px solid var(--ecm-primary) !important;
		border-top-left-radius: 0;
	}	

/* Apply same style to .NET Checkboxes */
		
	& span.form-check-input:active {
		filter: none !important;
	}
	& span.form-check-input input[type="checkbox"] {
		flex-shrink: 0;
		width: 1rem !important;
		height: 1rem !important;
		background-size: contain !important;
		background-position: center !important;
		background-repeat: no-repeat !important;
		background-color: var(--ecm-input-solid-bg) !important;		
		border-color: var(--ecm-input-solid-bg) !important;
		margin-right: 8px !important;
		border-radius: .25em !important;
		-webkit-appearance: none !important;
		-moz-appearance: none !important;
		appearance: none !important;
		border: var(--bs-border-width) solid var(--bs-border-color);
		margin-top: 0;
	}
	& .form-check:not(.form-switch) .form-check-input-lg input[type="checkbox"] {
		width: 1.5rem !important;
		height: 1.5rem !important;
		background-size: 65% 65% !important;
	}
	& span.form-check-input input[type="checkbox"]:focus {
		border-color: #b5b5c3;
		box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.15) !important;
	}
	& span.form-check-input input[type="checkbox"]:checked {
		background-color: var(--ecm-primary) !important;
		--bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
		background-image: var(--bs-form-check-bg-image) !important;
	}
	& span.form-check-input input[type="checkbox"]:active {
		filter: brightness(90%);
	}
	& span.form-check-input.disabled input[type="checkbox"]:disabled {
		pointer-events: none !important;
		filter: none !important;
		opacity: .5 !important;
	}	
	& span.form-check-input.disabled~.form-check-label, 
	& span.form-check-input.disabled~.form-check-label {
		pointer-events: none;
		cursor: default;
		opacity: .5;
	}
	/* Sliders (input type="range") — Bootstrap sets the thumb color directly on
	   the pseudo-elements, not through a custom property, so it must be
	   overridden explicitly (accent-color alone isn't enough on Chrome/Edge). */
	& .form-range {
		accent-color: var(--ecm-primary);
		&::-webkit-slider-thumb {
			background-color: var(--ecm-primary) !important;
		}
		&::-moz-range-thumb {
			background-color: var(--ecm-primary) !important;
			border-color: var(--ecm-primary) !important;
		}
		&:focus::-webkit-slider-thumb {
			box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgb(from var(--ecm-primary) r g b / 25%) !important;
		}
	}
}

/* eCM BOOTSTRAP ACCORDION
   ================================================================================= */

.accordion-button-left::after {
    position: absolute;
}

/* eCM BOOTSTRAP BUTTONS
   ================================================================================= */

.ecm {
	.btn {
		font-family: var(--ecm-font-family);
		border-radius: .475rem;
		font-size: var(--ecm-font-size);
	}
	.input-group .btn-outline { /* eCM custom style */
		--bs-btn-border-color: var(--bs-border-color);
	}
	.btn.btn-outline:hover { /* eCM custom style */
		color: #fff;
		border-color: var(--ecm-primary-active);
		background-color: var(--ecm-primary-active) !important;
	}
	.btn.btn-default {
		color: var(--ecm-primary);
		border-color: var(--ecm-blue-light);
		background-color: var(--ecm-blue-light);
	}
	.btn.btn-default:hover {
		color: #fff;
		border-color: var(--ecm-primary-active);
		background-color: var(--ecm-primary-active) !important;
	}
	.btn.btn-primary {
		color: #fff;
		border-color: var(--ecm-primary);
		background-color: var(--ecm-primary);
	}
	.btn.btn-primary:hover {
		border-color: var(--ecm-primary-active);
		background-color: var(--ecm-primary-active) !important;
	}
	.btn.btn-outline-primary {
		color: var(--ecm-primary);
		border-color: var(--ecm-primary);
		--bs-btn-disabled-color: var(--ecm-gray-200);
	}
	.btn.btn-outline-primary:hover {
		color: #fff;
		border-color: var(--ecm-primary-active);
		background-color: var(--ecm-primary-active) !important;
	}
	.btn.btn-secondary {
		color: #fff;
		border-color: var(--ecm-secondary);
		background-color: var(--ecm-secondary);
	}
	.btn.btn-secondary:hover {
		border-color: var(--ecm-secondary-active);
		background-color: var(--ecm-secondary-active) !important;
	}
	.btn.btn-outline-secondary {
		color: var(--ecm-secondary);
		border-color: var(--ecm-secondary);
		--bs-btn-disabled-color: var(--ecm-gray-200);
	}
	.btn.btn-danger {
		color: #fff;
		border-color: var(--ecm-danger);
		background-color: var(--ecm-danger);
	}
	.btn.btn-danger:hover {
		border-color: var(--ecm-danger-active);
		background-color: var(--ecm-danger-active) !important;
	}
	.btn.btn-outline-danger {
		color: var(--ecm-danger);
		border-color: var(--ecm-danger);
		--bs-btn-disabled-color: var(--ecm-gray-200);
	}
	.btn.btn-outline-danger:hover {
		color: #fff;
		--bs-btn-active-bg: var(--ecm-danger-active);
		--bs-btn-hover-bg: var(--ecm-danger-active);
	}
	.btn.btn-warning {
		color: #fff;
		border-color: var(--ecm-warning);
		background-color: var(--ecm-warning);
		--bs-btn-disabled-bg: #6c757d; /* override BS default yellowish color */
	}
	.btn.btn-warning:hover {
		border-color: var(--ecm-warning-active);
		background-color: var(--ecm-warning-active) !important;
	}
	.btn.btn-outline-warning {
		color: var(--ecm-warning);
		border-color: var(--ecm-warning);
		--bs-btn-disabled-color: var(--ecm-gray-200);
	}
	.btn.btn-outline-warning:hover {
		color: #fff;
		--bs-btn-active-bg: var(--ecm-warning-active);
		--bs-btn-hover-bg: var(--ecm-warning-active);
	}
	.btn:focus-visible {
		outline: 0;
		box-shadow: var(--ecm-btn-focus-box-shadow);
	}
	.btn-group > .btn:nth-child(n+3),
	.btn-group > :not(.btn-check) + .btn {
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
	}
	.btn.btn-sm, .btn-group-sm > .btn {
		--bs-btn-padding-y: 7px;
		--bs-btn-padding-x: 20px;
		--bs-btn-font-size: 0.875rem;
	}
	.btn.disabled, .btn:disabled, fieldset:disabled .btn {
		color: var(--ecm-gray-200);
		border-color: var(--ecm-gray-200);
		background-color: var(--bs-btn-disabled-bg);		
	}
	.btn-check:checked + .btn {
		background-color: var(--ecm-blue-light);
		border-color: var(--ecm-blue-light);
	}
	.btn-check + .btn:hover p {
		color: #fff !important;
	}

	& .dropdown-menu {
	    --bs-dropdown-font-size: var(--ecm-font-size);
	    --bs-dropdown-border-width: 0;
	    --bs-dropdown-padding-x: 0.5rem;
	    --bs-dropdown-padding-y: 1rem;
	    font-family: var(--ecm-font-family);
	    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
	}

	/* eCM BOOTSTRAP BADGES
	   ================================================================================= */
	& .badge {
		--bs-badge-font-weight: 400;
	}
}

/* eCM BOOTSTRAP CARDS
   ================================================================================= */

.ecm-card {
	background: #fff;
	margin: 0;
	border: 0;
	&.card-shadow {		
		box-shadow: var(--ecm-box-shadow-59);		
		--bs-card-border-radius: 10px;
		--bs-card-inner-border-radius: 10px;
		-webkit-transition: all .15s ease-in-out;
		transition: all .15s ease-in-out;
	}
}

/* eCM BOOTSTRAP LIST GROUPS
   ================================================================================= */

.ecm .list-group-item {
    --bs-list-group-item-padding-x: 1.25rem;
    --bs-list-group-item-padding-y: 0.75rem;    
	--bs-list-group-color: var(--ecm-gray-400);

	&.active {
		--bs-list-group-active-bg: var(--ecm-gray-100);
		--bs-list-group-active-color: var(--ecm-gray-400);
		border-color: var(--bs-list-group-border-color);
	}
}
.ecm .list-group-item-action:focus, .ecm .list-group-item-action:hover,
.ecm .list-group-item.active:focus, .ecm .list-group-item.active:hover {
    --bs-list-group-action-hover-bg: var(--ecm-primary-light);
	background-color: var(--bs-list-group-action-hover-bg);
    color: var(--bs-list-group-action-hover-color);    
}

/* eCM BOOTSTRAP ALERTS 
   ================================================================================= */

.ecm {
	&.RadNotification {
		border: none;
		border-width: 0 !important;
	}
	&.alert, 
	& .alert {
		padding: 20px;
		color: var(--ecm-alert-color);
		&.alert-primary {
			--bs-alert-color: white;
			--bs-alert-bg: var(--ecm-primary);		
			--bs-alert-link-color: white;
			border: 0;
		}
		&.alert-success {
			--bs-alert-color: white;
			--bs-alert-bg: var(--ecm-success);		
			--bs-alert-link-color: white;
			border: 0;
		}
		&.alert-info {
			--bs-alert-color: white;
			--bs-alert-bg: var(--ecm-info);		
			--bs-alert-link-color: white;
			border: 0;
		}
		&.alert-danger {
			--bs-alert-color: white;
			--bs-alert-bg: var(--ecm-danger);		
			--bs-alert-link-color: white;
			border: 0;
		}
		&.alert-warning {
			--bs-alert-color: white;
			--bs-alert-bg: var(--ecm-warning);		
			--bs-alert-link-color: white;
			border: 0;
		}
		& *:not(.ecm-icon):not(.fa) {
			font-family: var(--ecm-font-family);	
		}
		& .ecm-icon {
			line-height: 1;
		}		
	}
}

/* eCM BOOTSTRAP TOAST
   ================================================================================= */

.ecm .toast,
.ecm.toast {
	--bs-toast-max-width: fit-content;
	--bs-toast-zindex: 5000;
	min-width: 500px;
	z-index: var(--bs-toast-zindex);
}


/* ==================================================================================
   eCM 3DR PARTY CONTROLS STYLING
   ================================================================================== */

/* eCM CLIPBOARD PLUGIN
   Dependes on eCM.js for initialization
   ================================================================================= */

.ecm-clipboard-tool {
	width: 24px;
	height: 24px;
	padding: 4px;
	transform: scale(1.5);
	border-radius: 3px;
	cursor: pointer;
	transition: background 0.2s ease;
	-webkit-appearance: button;
	background-color: transparent;
	background-image: none;
	border: none;

	& svg {
		opacity: .9;
		transition: opacity 0.2s ease;
	}

	& svg path {
		stroke-width: 1;
		stroke: var(--ecm-link-color);
		fill: white;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	& svg path.page {
		transform-origin: center;
	}

	& svg path.check {
		transform-origin: center;
		stroke-dasharray: 8;
		stroke-dashoffset: 8;
		stroke: var(--ecm-success);
	}

	&.copied svg path.check {
		stroke-dasharray: 16;
		transition: all .5s ease;
		animation: copiedPage 2.1s ease forwards;
	}

	&:focus {
		outline: none;
	}

	&:hover svg {
		opacity: 1;
	}

	&:hover svg path {
		stroke: var(--ecm-link-hover-color);
	}
}
@keyframes copiedPage {
	0% {
		opacity: 1;
	}

	50% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

/* eCM EW ORDERED LIST CONTROL - BOOTSTRAP SELECT STYLE
   ================================================================================= */

.ecm .ecm-orderedlistbox {
	width: 100%;
	& tr {
		display: flex;
		align-items: center;
	}
	& td:first-child {
		width: -webkit-fill-available;
	}
    & select {
		display: block;
		width: 100%;
		padding: .375rem 2.25rem .375rem .75rem;
		padding-right: .75rem;
		font-size: var(--ecm-font-size);
		font-weight: 400;
		line-height: 1.5;
		color: var(--bs-body-color);
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		background-color: var(--bs-body-bg);
		background-repeat: no-repeat;
		background-position: right .75rem center;
		background-size: 16px 12px;
		border: var(--bs-border-width) solid var(--bs-border-color);
		border-radius: var(--bs-border-radius);
		transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	}
	& select:focus {
		border-color: #86b7fe;
		outline: 0;
		box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
	}
	& select:focus-visible {
		box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.15) !important;
	}
}

/* eCM TELERIK CONTROLS - BUGS & GENERAL CUSTOMIZATIONS
   ================================================================================= */

/* TELERIK RADWINDOW
   --------------------------------------------------------------------------------- */

/* Hide all title icons of telerik controls dialog windows */
.RadWindow .rwTitlebarControls .rwIcon {
	display: none !important;
}
/* fix to hide textarea border that covers cursor on a new line when in focus */
.RadEditor .reContentCell .reTextArea {
	padding: 5px;
	font-size: 13px;

	&:focus {

		outline: none;
	}
}
/* fix to correct rad windows in old modules */
.RadWindow.ecm-legacy-window-fix {
	position: fixed !important;
	margin: auto !important;
	inset: 0 !important;
}
/* Hide RadWindow titlebar icons when present */
.RadWindow_Bootstrap .rwTable .rwTitlebarControls .rwIcon {
    display: none !important;
}

/* TELERIK RADTREEVIEW
   --------------------------------------------------------------------------------- */

/* Corrects the not showing icon for expand/collapse nodes */
/* The same icon will now be applied to all Windows7 skin type */
.RadTreeView_Windows7 .rtPlus,
.RadTreeView_Windows7 .rtMinus {
	background-image: none !important;
	font-size: inherit !important;
	margin-top: 2px !important;
}
.RadTreeView_Windows7 .rtPlus::before {
	content: "\25B6";
	font-size: 0.9em;
}
.RadTreeView_Windows7 .rtPlus:hover::before {
	color: var(--ecm-link-color);
}
.RadTreeView_Windows7 .rtMinus::before {
	content: "\25E2";
	color: var(--ecm-link-color);
	font-size: 0.9em;
}

/* TELERIK RADSPELL
   --------------------------------------------------------------------------------- */

/* Forces eCM bootstrap button styles on RadSpell input element that opens
	the spell window. RadSpell control must have the 'radspell-open-button' applied.
*/
.radspell-open-button input {
	--bs-btn-padding-y: 7px;
	--bs-btn-padding-x: 20px;
	--bs-btn-font-size: 0.875rem;
	color: #fff;
	border-color: var(--ecm-secondary);
	background-color: var(--ecm-secondary);
	font-family: var(--ecm-font-family);
	font-size: var(--bs-btn-font-size);
	border-radius: .475rem;
	margin-top: 5px;
	padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
	border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
	transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.radspell-open-button:hover input {
	border-color: var(--ecm-secondary-active);
	background-color: var(--ecm-secondary-active) !important;
}

/* TELERIK RADCOMBOBOX
   --------------------------------------------------------------------------------- */

/* Restyles RadComboBox Bootstrap skin to a more eCM look */
.ecm-bootstraps-radcombo {
	width: 100%;	
	&.RadComboBox .rcbInner {
		padding: inherit;
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
		background-size: 16px 12px;
		background-repeat: no-repeat;
		background-position: right .75rem center;
		border: var(--bs-border-width) solid var(--bs-border-color);
		border-radius: var(--bs-border-radius);
		position: inherit;		
		border-radius: var(--bs-border-radius-lg);
		&.rcbExpanded {
			background-color: transparent;
			box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.15) !important;
		}
		& .rcbInput {
			color: var(--bs-body-color);
			font-family: var(--ecm-font-family);
			font-size: var(--ecm-font-size);
			height: inherit; /* override default telerik height */
		}
		& .rcbActionButton {display: none;}		
	}	
	/* Dependent on eCM BOOTSTRAP FORMS style definition */
	&.RadComboBox.form-required .rcbInner {
		border-left: 4px solid var(--ecm-primary) !important;
		border-top-left-radius: 0;
	}
	&.RadComboBoxDropDown label {
		color: var(--ecm-gray-400);
	}
	&.RadComboBoxDropDown input[type="checkbox"] {
		width: 1.5rem !important;
		height: 1.5rem !important;
		background-size: 65% 65%;
		background-position: center;
		background-repeat: no-repeat;
		background-color: var(--ecm-input-solid-bg);
		border-color: var(--ecm-input-solid-bg);
		margin-right: 8px;
		border-radius: .25em;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;		
	}
	&.RadComboBoxDropDown input:checked[type="checkbox"] {
		background-color: var(--ecm-primary) !important;
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");		
	}
}

/* TELERIK RADDROPDOWNTREE
   --------------------------------------------------------------------------------- */

/* Restyles RadDropDownTree Bootstrap skin to a more eCM look */
.ecm-bootstrap-raddropdowntree {
    width: 100%;
	color: var(--bs-body-color);
	font-family: var(--ecm-font-family);
	font-size: var(--ecm-font-size);
	&.rddtPopup_Bootstrap {padding: 5px}
	& .rtText,
	&.rddtPopup_Bootstrap .rtText {
		font-family: var(--ecm-font-family) !important;
		color: inherit !important;
	}
	&.rddtPopup_Bootstrap .rtSelected .rtIn {
		border-color: none;
		color: #fff;
		background-color: #767676;
	}
	&.RadTreeView .rtLines .rtLast:before,
	&.rddtPopup_Bootstrap .RadTreeView .rtLines .rtLast:before {
		height: 1.32em;
	}
    &.RadDropDownTree_Bootstrap .rddtInner {
		padding: .782rem 1rem;
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
		background-size: 16px 12px;
		background-repeat: no-repeat;
		background-position: right .75rem center;
		border: var(--bs-border-width) solid var(--bs-border-color);
		border-radius: var(--bs-border-radius);				
		border-radius: var(--bs-border-radius-lg);
		&.rddtFocused, &.rddtHovered {
			border-color: var(--bs-border-color);
			color: #333;
			background-color: transparent;
			box-shadow: none !important;
		}
		&.rddtFocused {			
			box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.15) !important;
		}
		& .rddtFakeInput {
			color: var(--bs-body-color);
			font-family: var(--ecm-font-family);
			font-size: var(--ecm-font-size);
			height: inherit; /* override default telerik height */
		}
		& .rddtIcon {
			display: none; /* hide telerik icon */
		}
		& .rddtClearButton {
			margin-right: 5px;
		}
	}
}
.input-group > .ecm-bootstrap-raddropdowntree {
    flex: 1 1 auto;
    width: 1% !important;
	&.RadDropDownTree_Bootstrap .rddtInner {
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}
}

/* TELERIK RADTREEVIEW
   --------------------------------------------------------------------------------- */

/* Restyles RadTreeView Bootstrap skin to a more eCM look */
.ecm-bootstrap-radtreeview {
	&.RadTreeView_Bootstrap:not(.classic-render-mode) .rtLI {
		padding-left: 28px;
		overflow: visible;
	}
	&.RadTreeView_Bootstrap .rtLI .rtChk {
		width: 16px;
		height: 16px;
		margin-right: 5px;
	}
	&.RadTreeView_Bootstrap .rtIn {
		font-family: var(--ecm-font-family) !important;
		padding: 0;
	}
	&.RadTreeView_Bootstrap .rtSelected .rtIn {
		--bs-list-group-active-bg: var(--ecm-gray-100);
		--bs-list-group-active-color: var(--ecm-gray-400);
		border-color: transparent;
		background-color: var(--bs-list-group-active-bg);
		color: var(--bs-list-group-active-color);
	}
	&.RadTreeView_Bootstrap .rtHover .rtIn {
		border-color: transparent;		
		--bs-list-group-action-hover-bg: var(--ecm-primary-light);
		background-color: var(--bs-list-group-action-hover-bg);
		color: var(--bs-list-group-action-hover-color);		
	}
	&.RadTreeView_Bootstrap .rtLines .rtOut {
		padding-top: 9px;
	}
	&.RadTreeView_Bootstrap .rtLines .rtOut:before {
		width: 15px;
		top: 13px;
	}
	&.RadTreeView_Bootstrap .rtLines .rtLast:before {
		padding-top: 23px;
	}
	&.RadTreeView_Bootstrap .rtPlus, &.RadTreeView_Bootstrap .rtMinus {
		margin-top: 4px;
	}
	&.RadTreeView_Bootstrap .rtPlus:before, &.RadTreeView_Bootstrap .rtMinus:before {
		font: normal normal normal 22px/1 "eCM-Font";
		border-radius: 50%;
		color: var(--ecm-primary);
		background-color: white;
	}
	&.RadTreeView_Bootstrap .rtPlus:before {
		content: "\ec25";
	}
	&.RadTreeView_Bootstrap .rtMinus:before {
		content: "\ec23";
	}
	&.RadTreeView_Bootstrap .rtPlusHover:before, &.RadTreeView_Bootstrap .rtMinusHover:before {
		color: var(--ecm-link-hover-color);
	}
}


/* ==================================================================================
   eCM UI ELEMENTS
   ================================================================================== */

/* eCM DIALOGS (HTML5)
   ================================================================================= */

.ecm-dialog {
	text-align: center;
	background-color: #2d303d;
	color: #fff;    
	border-radius: 15px;
	border: 0;
	box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 10px;

	&::backdrop {
		background: rgba(0, 0, 0, 0.5);
	}

	& div[class^="ecm-file-type-"]::after {
		display: block;
		width: 100%;
		height: 100%;
		background-repeat: no-repeat;
		background-size: 60%;
		background-position: center;
		content: " ";
	}

	& .dialog-header {
		text-align: left;
		padding: 15px 15px 15px 15px;
		border-bottom: 1px solid #ffffff33;	
	}

	& .dialog-body {
		padding: 20px;
		text-align: left;
	}

	& .dialog-footer {
		text-align: right;
		padding: 0 15px 15px 15px;
	}
}

/* eCM FLOATING ACTION BUTTON
   ================================================================================= */

/* Floating Toolbar Style */
.ecm-floating-action-btn {
	width: 20%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative; /* Supports relative position */
	/*position: absolute; /* Supports absolute position */
	z-index: 100;

	& .tooltip {
		font-family: var(--ecm-font-family);
	}

	& .action-button {
		position: absolute;
		z-index: 999;
		cursor: pointer;
		transition: border .2s ease;
		background-color: white;
		color: var(--ecm-btn-bg);
		border: 8px solid var(--ecm-btn-bg);
		border-radius: 16px;
		width: 28px;
		height: 28px;
		display: flex;
		justify-content: center;
		align-items: center;
		line-height: 1;
	}

	& .action-button:hover {
		color: var(--ecm-btn-hover-bg);
		border-color: var(--ecm-btn-hover-bg);
	}

	& .action-button:before {
		transform: rotate(90deg);
		transition: all 0.2s ease;
	}

	&.open .action-button {
		color: var(--ecm-gray-500);
		border-color: var(--ecm-gray-500);
	}

	& .action-options {
		position: absolute;
		opacity: 0;
		transition: all 0.2s ease-in-out;
		width: auto;
		min-width: 150px;
		transform: translateY(20%);
		padding: 10px;
		display: flex;
		flex-direction: row;
		align-items: center;
		bottom: 0;
		font-family: var(--ecm-font-family);
		pointer-events: none;
	}
}
@media screen and (max-width: 740px) {
	.ecm-floating-action-btn .action-options {
		flex-direction: column;
	}
}
.ecm-floating-action-btn .action-options a {
	display: inline-block;
	text-align: center;
	text-decoration: none;
	color: #566071;
	font-size: 14px;
	white-space: nowrap;
	padding: 10px 20px;
	background: #f4f6fa;
	border-radius: 5px;
	margin: 5px;	
	box-shadow: var(--ecm-box-shadow);

	&:hover {
		color: #008ee1;
	}
}
.ecm-floating-action-btn.open .action-options {
	pointer-events:auto;
	opacity: 1;
	transform: translateY(-10%);
}
.ecm-floating-action-btn.small.open .action-options {
	transform: translateY(-5%);
}
.ecm-floating-action-btn.open .action-button:before {
	transform: rotate(133deg);
}
.ecm-floating-action-btn.open .action-button:after {
	transform: rotate(42deg);
}     

/* eCM VALIDATION
   Does not require .ecm class so that it can be used in skins UI
   ================================================================================= */
.ecm-validation {
	color: #fff;
	padding: 5px 10px;
	line-height: 3em;
	border-radius: 6px;
	font-size: 12px;
	font-family: var(--ecm-font-family);
	background-color: var(--ecm-gray-400);
	&.ecm-validation-danger { background-color: var(--ecm-danger) }
	&.ecm-validation-success { background-color: var(--ecm-success) }
	&.ecm-validation-info { background-color: var(--ecm-info) }
	&.ecm-validation-warning { background-color: var(--ecm-warning) }
}

/* eCM AJAX LOADING PANEL - Deprecated
   This element is placed in the Body
   ================================================================================= */
.ecm-ajax-loading-panel {
	background-color: rgba(255, 255, 255, 0.70) !important;

	& .loading-icon-panel {
		position: relative;
		top: 40%
	}
}

/* eCM LOADING INDICATOR - New version
   ================================================================================= */
.ecm-loading-panel {
	position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    background-color: var(--ecm-secondary) !important;
    color: white;
    padding: 35px;
    border-radius: 8px;
    font-size: 18px;
    text-align: center;
    box-shadow: var(--ecm-box-shadow-5);
	display: flex;
    align-items: center;
}
.ecm-loading-anim {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	position: relative;
	animation: rotate 1s linear infinite;
	scale: .5;
}
.ecm-loading-anim::before , .ecm-loading-anim::after {
	content: "";
	box-sizing: border-box;
	position: absolute;
	inset: 0px;
	border-radius: 50%;
	border: 5px solid #FFF;
	animation: prixClipFix 2s linear infinite ;
}
.ecm-loading-anim::after{
	border-color: #FFFFFF88;
	animation: prixClipFix 2s linear infinite , rotate 0.5s linear infinite reverse;
	inset: 6px;
}
@keyframes rotate {
	0%   {transform: rotate(0deg)}
	100%   {transform: rotate(360deg)}
}
@keyframes prixClipFix {
    0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
    25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
    50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
    75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
    100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
}

/* eCM WINDOWS
/* Depends on 3rd party Telerik control
   ================================================================================= */
.TelerikModalOverlay {z-index: 1040 !important;} /* lower index to fix issue with window shadows */

.ecm.RadWindow {
	border-radius: 15px;
	border: none;
	background-color: transparent;	

	& .rwTitleBar {
		background: var(--ecm-primary) !important;
		font-family: var(--ecm-font-family);
		border-radius: 15px 15px 0 0;	
	}

	& .rwTitleBar .rwTitleWrapper {
		height: 55px !important;
		display: flex;
		align-items: center;
		padding-left: 20px;
	}

	& .rwTitleBar .rwIcon {
		display: none;
	}

	& .rwTitleBar .rwTitle {
		padding: 0;
		font-size: 18px !important;    
	}
}
.ecm.ecm.RadWindow .rwCommands {
	right: 15px;
}
.ecm.RadWindow .rwContent {
	padding: 0;
	border-radius: 0 0 15px 15px;
}
.ecm.RadWindow.rwShadow {
	-webkit-box-shadow: var(--ecm-box-shadow) !important;
	box-shadow: var(--ecm-box-shadow) !important;
}
/* Window tabs */
.ecm.RadWindow .nav .nav-item .nav-link {
	border-radius: 0;
	background-color: var(--ecm-nav-bg);
	color: var(--ecm-nav-color);
	font-weight: 500;
	padding: 15px;

	&:hover {
		color: var(--ecm-primary-active);
	}

	&.active {
		color: var(--ecm-nav-color-active);
		background-color: var(--ecm-nav-bg-active);
	}
}
.ecm.RadWindow .nav .nav-item.active .nav-link {
	color: var(--ecm-nav-color-active);
	background-color: var(--ecm-nav-bg-active);
}
.ecm.ecm.RadWindow .modal-body {padding: 25px 45px 25px 45px;}
.ecm.ecm.RadWindow .modal-footer {
	--bs-modal-footer-border-color: var(--ecm-border-color);
	--bs-modal-footer-border-width: var(--ecm-border-width);
	--bs-modal-padding: 1rem;
	--bs-modal-footer-gap: 0.5rem;
	border-top: var(--bs-modal-footer-border-width) solid var(--bs-modal-footer-border-color);
}
@media only screen and (min-width: 576px) {
	.ecm.ecm.RadWindow .modal-body {min-width: 450px;}
}

/* eCM FILE ATTACHMENTS UI
   ================================================================================= */
.ecm .ecm-file-attachments .ecm-file-attachments-container {
	margin-top: 20px;
	padding: 15px;
	background-color: var(--ecm-gray-100);
	display: flex;
}
.ecm .ecm-file-attachments .ecm-file-attachments-treeview {flex: 1; width: auto}
.ecm .ecm-file-attachments .ecm-file-attachments-item {
	position: relative;
	display: block;
	padding: 0px 15px;
	margin-bottom: -1px;
	background-color: #fff;
	box-shadow: var(--ecm-box-shadow-27);
	color: var(--ecm-gray-400);
	border-radius: 5px;
	font-size: 12px;
	transition: color .2s ease,background-color .2s ease;
}
.ecm .ecm-file-attachments .RadTreeView .rtSelected .rtIn .ecm-file-attachments-item,
.ecm .ecm-file-attachments .RadTreeView .rtLI .rtHover .ecm-file-attachments-item {
	background-color: var(--ecm-link-hover-color);
	color: white;
}
.ecm .ecm-file-attachments-details {
	width: -webkit-fill-available;
	max-width: 350px;
	margin-left: 30px;

	& .img-responsive {
		border-radius: var(--ecm-border-radius);
	}
}
.ecm .ecm-file-attachments .ecm-file-no-attachments {
	flex: 1;

	& span {
		display: flex;
		gap: 20px;
		align-items: center;
		justify-content: center;
		opacity: .3;
	}
}
.ecm .ecm-file-attachments .RadTreeView .rtLI {
	padding-bottom: 10px;
}
.ecm .ecm-file-attachments .RadTreeView .rtUL .rtUL {
	margin-top: 10px;
}
.ecm .ecm-file-attachments .RadTreeView .rtLast {
	padding-bottom: 0; /* prevent double-spacing */
}
.ecm .ecm-file-attachments .RadTreeView .rtIn,
.ecm .ecm-file-attachments .RadTreeView .rtSelected .rtIn,
.ecm .ecm-file-attachments .RadTreeView .rtHover .rtIn {
	border-color: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
}

/* eCM TEMPLATE PICKER UI 
   ================================================================================= */
.ecm-tp-wrap {
        --ecm-tp-accent:        var(--ecm-primary);
        --ecm-tp-accent-hover:  var(--ecm-primary-active);
        --ecm-tp-accent-light:  var(--ecm-blue-light);
        --ecm-tp-accent-border: #9de0ec;
        --ecm-tp-surface:       var(--ecm-gray-100);
        --ecm-tp-border:        var(--ecm-border-color);
        --ecm-tp-muted:         var(--ecm-gray-300); /*#8a9299;*/
        font-size: 14px;
        color: var(--ecm-gray-400)
    }

    /* ── Preview stage ── */
    .ecm-tp-preview-stage {
        background: var(--ecm-tp-surface);
        border: 1px solid var(--ecm-tp-border);
        border-radius: 8px;
        min-height: 220px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
    .ecm-tp-p-badge {
        position: absolute; top: 10px; left: 12px;
        font-size: 10px; font-weight: 600; letter-spacing: .05em;
        text-transform: uppercase; color: var(--ecm-tp-muted);
        background: rgba(255,255,255,.88);
        padding: 3px 8px; border-radius: 4px;
        border: 1px solid var(--ecm-tp-border);
    }
    .ecm-tp-preview-img {
        transition: opacity .18s ease;
        max-width: 100%; max-height: 100%; display: block;
    }

    /* ── Info panel ── */
    .ecm-tp-info-panel {
        background: #fff;
        border: 1px solid var(--ecm-tp-border);
        border-radius: 8px;
        overflow: hidden;
    }
    .ecm-tp-info-hint i { font-size: 26px; color: var(--ecm-tp-accent-border); }
    .ecm-tp-info-hint p { font-size: 12px; color: var(--ecm-tp-muted); margin: 0; line-height: 1.55; }

    .ecm-tp-info-header {
        background: var(--ecm-tp-accent-light);
        border-bottom: 1px solid var(--ecm-tp-accent-border);
        padding: 12px 14px 11px;
    }
    .ecm-tp-tpl-id {
        font-size: 10px; font-weight: 700; letter-spacing: .07em;
        text-transform: uppercase; color: var(--ecm-tp-accent); margin-bottom: 2px;
    }
    .ecm-tp-tpl-name { font-size: 14px; font-weight: 600}

    .ecm-tp-info-body {
	min-height: 0;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;

	&::-webkit-scrollbar {
		width: 5px;
	}

	&::-webkit-scrollbar-track {
		background: var(--ecm-tp-surface);
		border-radius: 3px;
	}

	&::-webkit-scrollbar-thumb {
		background: var(--ecm-tp-accent);
		border-radius: 3px;
	}
}

    .ecm-tp-info-lbl {
        font-size: 10px; font-weight: 700; letter-spacing: .07em;
        text-transform: uppercase; color: var(--ecm-tp-muted);
    }
    .ecm-tp-info-val     { font-size: 12.5px; line-height: 1.5; }
    .ecm-tp-info-divider { border: none; border-top: 1px solid var(--ecm-tp-border); margin: 0; }

    .ecm-tp-author-avatar {
        width: 30px; height: 30px; border-radius: 50%;
        background: var(--ecm-tp-accent-light);
        border: 1px solid var(--ecm-tp-accent-border);
        display: flex; align-items: center; justify-content: center;
        font-size: 11px; font-weight: 700; color: var(--ecm-tp-accent); flex-shrink: 0;
    }
    .ecm-tp-author-name { font-size: 12px; font-weight: 600; color: #2d3339; }
    .ecm-tp-author-role { font-size: 11px; color: var(--ecm-tp-muted); }

    /* ── Filmstrip ── */
    .ecm-tp-filmstrip-wrap { position: relative; padding: 0; }

    .ecm-tp-filmstrip {
        display: flex; gap: 10px;
        overflow-x: auto; padding: 4px 2px 10px;
        scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
    

	&::-webkit-scrollbar {
		height: 8px;
	}

	&::-webkit-scrollbar-track {
		background: var(--ecm-tp-surface);
		border-radius: 3px;
	}

	&::-webkit-scrollbar-thumb {
		background: var(--ecm-tp-accent);
		border-radius: 3px;
	}
}

    /* Thumb card */
    .ecm-tp-thumb-card {
        flex: 0 0 150px;
        border-radius: 8px;
        border: 1.5px solid var(--ecm-tp-border);
        background: #fff;
        cursor: pointer;
        position: relative; overflow: hidden;
        display: flex; flex-direction: column;
        transition: border-color .15s, transform .12s, box-shadow .15s;
    

	&:hover {
	        border-color: var(--ecm-tp-accent);
	        transform: translateY(-2px);
	        box-shadow: 0 4px 12px rgba(13,174,204,.13);

	}

	&.selected {
		outline: 2px solid var(--ecm-tp-accent);
	}
}

    .ecm-tp-thumb-preview {
        background: var(--ecm-tp-surface);
        height: 180px; overflow: hidden; flex-shrink: 0; padding: 15px;
    }
	.ecm-tp-thumb-card.selected .ecm-tp-thumb-preview {
		background: var(--ecm-tp-accent-light);
	}
    .ecm-tp-thumb-preview img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }
    .ecm-tp-thumb-info {
        padding: 7px 8px 8px;
    }
    .ecm-tp-t-name {
        font-size: 10.5px;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.3;
        margin-bottom: 3px;
    }
    .ecm-tp-thumb-card.selected .ecm-tp-t-name {
        color: var(--ecm-tp-accent);
    }
    .ecm-tp-t-desc {
        font-size: .625rem;
        color: var(--ecm-tp-muted);
        line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .ecm-tp-check-dot {
        position: absolute;
        top: 5px;
        right: 5px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: var(--ecm-tp-accent);
        display: none;
        align-items: center;
        justify-content: center;
    }
    .ecm-tp-thumb-card.selected .ecm-tp-check-dot {
        display: flex;
    }
    .ecm-tp-check-dot svg {
        width: 9px;
        height: 9px;
    }
    /* Scroll arrows */
    .ecm-tp-scroll-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-60%);
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: #fff;
        border: 1px solid var(--ecm-tp-border);
        color: #555;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 2;
        box-shadow: 0 1px 4px rgba(0,0,0,.08);
        transition: background .12s, color .12s;
        font-size: 13px;
    

	&:hover {
	            background: var(--ecm-tp-accent);
	            color: #fff;
	            border-color: var(--ecm-tp-accent);

	}

	&.left {
	            left: -15px;

	}

	&.right {
	            right: -15px;

	}
}
    /* Scroll hint */
    .ecm-tp-scroll-hint {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        margin-top: 4px;
        font-size: 11px;
        color: var(--ecm-tp-muted);
        pointer-events: none;
        user-select: none;
    }
    /* eCM SECTION MANAGER 
   ================================================================================= */
    section {
        /* section spacing should be done in section config */
        position: relative;
    }

    .ecm-section-manager {
        position: relative;
    

	& .RadDockZone.row {
	            border: none !important;

	}
}

    .ecm-edit-mode .ecm-section-manager .RadDockZone.row {
        outline: 2px solid rgb(from var(--ecm-primary) r g b / 10%) !important;
        border-radius: 5px 5px 10px 10px;
        -moz-transition: outline ease-in-out .2s;
        -o-transition: outline ease-in-out .2s;
        -webkit-transition: outline ease-in-out .2s;
        transition: outline ease-in-out .2s, border ease-in-out .2s;
        padding: 0; /* remove default space inside raddockzones so that docks fill entire width */
        border-bottom: 1px solid transparent !important; /* for smoother effect when row hover ends */
    }
    /* Media query for small devices */
    @media (max-width: 575.98px) {
        .ecm-edit-mode .ecm-section-manager .RadDockZone.row {
            /* In small devices, rows fill entire width so row and dock outlines are not visible. 
		   Must add 2px each side for outlines to appear on hover */
            --bs-gutter-x: 1.2rem;
        }
    }

    .ecm-edit-mode .ecm-section-manager .ecm-section:has(.action-button:hover) .RadDockZone.row {
        border-bottom: 4px solid var(--ecm-primary) !important; /* add section row highlight effect */
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
    }

    .ecm-edit-mode .ecm-section-manager .RadDock {
        outline: 2px solid transparent !important;
        border-radius: 5px;
        -moz-transition: outline ease-in-out .2s;
        -o-transition: outline ease-in-out .2s;
        -webkit-transition: outline ease-in-out .2s;
        transition: outline ease-in-out .2s;
    

	&:hover {
	            outline: 2px solid var(--ecm-secondary-light) !important;
	            border-radius: 5px;

	}
}
    /* RadDock was applying float bellow 992px overriding Bootstrap 
   col-sm-xx class that applies no float under 992px.
*/
    @media (max-width: 991px) {
        .ecm-section-manager .rdHorizontal .RadDock {
            float: none !important
        }
    }

    .ecm-section-manager .ecm-section .container-fluid .RadDock .rdContent {
        margin: 0;
    }

    .ecm-section-manager .ecm-section,
    .ecm-edit-mode .ecm-section-manager .container,
    .ecm-edit-mode .ecm-section-manager .container-fluid {
        position: relative;
    }

    .ecm-edit-mode .ecm-section-manager .ecm-section .container,
    .ecm-edit-mode .ecm-section-manager .ecm-section .container-fluid {
        /* In second+ items assign a margin equal to the top bar height + extra 10px */
        margin-bottom: 0;
        margin-top: 45px;
    }

    .ecm-edit-mode .ecm-section-manager .ecm-section:first-of-type .container,
    .ecm-edit-mode .ecm-section-manager .ecm-section:first-of-type .container-fluid {
        /* In first items only assign a margin equal to the top bar height */
        margin-bottom: 0;
        margin-top: 35px;
    }

    .ecm-edit-mode .ecm-section-manager .ecm-section:last-of-type {
        margin-bottom: 20px;
    }

    .ecm-edit-mode .ecm-section-manager .ecm-section .is-not-container {
        margin-bottom: 0;
        margin-top: 45px;
    }

    .ecm-edit-mode .ecm-section-manager .nosections {
        position: relative;
        display: flex;
        height: 150px;
        align-content: center;
        justify-content: center;
        align-items: center;
        background-color: var(--ecm-primary);
        border: 2px dashed transparent;
        transition: border .5s;
        border-radius: 2px;
        margin-bottom: 45px;
        -moz-transition: background-color ease-in-out .2s;
        -o-transition: background-color ease-in-out .2s;
        -webkit-transition: background-color ease-in-out .2s;
        transition: background-color ease-in-out .2s;
    

	&:hover {
	            background-color: var(--ecm-primary-active);

	}

	& a {
	            font-family: var(--ecm-font-family);
	            color: white;

	}

	& a > i {
	                -moz-transition: transform ease-in-out .1s;
	                -o-transition: transform ease-in-out .1s;
	                -webkit-transition: transform ease-in-out .1s;
	                transition: transform ease-in-out .1s;
	                transform: scale(.6);

	}

	&:hover a > i {
	            transform: scale(1);

	}

	& .tooltip {
	            font-family: var(--ecm-font-family);

	}
}

    .ecm-edit-mode .ecm-section-manager .section-top-toolbar {
        position: absolute;
        background-color: var(--ecm-btn-bg);
        padding: 0 0 0 15px;
        border-radius: 5px;
        line-height: 32px;
        height: 35px;
        left: 0;
        top: -38px;
        z-index: 10;
        overflow: hidden;
    }

    .ecm-edit-mode .ecm-section-manager .is-not-container .section-top-toolbar {
        left: -12px;
    }

    .ecm-edit-mode .ecm-section-manager .section-top-toolbar a {
        display: inline-block;
        color: #fff;
        opacity: .8;
        margin: auto 5px;
    

	&:before {
	            font-size: 20px;

	}

	&:hover {
	            opacity: 1

	}

	&.disabled {
	            opacity: .2

	}
}

    .ecm-edit-mode .ecm-section-manager .section-top-toolbar .module-toolbar {
        display: inline-block;
        background-color: var(--ecm-secondary);
        height: 100%;
        width: 50px;
        text-align: center;
        transition: background-color .5s;
    

	&:hover {
	            background-color: var(--ecm-secondary-active);

	}
}

    .ecm-edit-mode .ecm-section-manager .section-top-toolbar .tooltip {
        font-family: var(--ecm-font-family);
    }

    .ecm-edit-mode .ecm-section-manager .section-bottom-toolbar {
        position: absolute;
        bottom: 0px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        z-index: 10;
        width: -webkit-fill-available;
        margin-left: -15px;
    }
    /* eCM SITE CONTAINER IN EDIT MODE */
    .ecm-edit-preview-control-container {
        background-color: #f4f6fa;
    }

    .ChannelContainer {
        background-color: #f4f6fa;
        padding: 0px 20px 10px;
    }

    .ChannelContent {
        width: auto;
        margin-bottom: 20px;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
        border-radius: 6px;
        overflow: hidden;
    }
    /* eCM FILE TYPE ICONS 
   ================================================================================= */
    [class^="ecm-file-type-"] {
        margin: 25px;
        box-shadow: none !important;
        background-size: contain;
        border: none;
    }

    .ecm-file-type-pdf:after {
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2'%3E%3Cpath d='M128 0c-17.6 0-32 14.4-32 32v448c0 17.6 14.4 32 32 32h320c17.6 0 32-14.4 32-32V128L352 0H128z' style='fill:%23e2e5e7;fill-rule:nonzero'/%3E%3Cpath d='M384 128h96L352 0v96c0 17.6 14.4 32 32 32z' style='fill:%23b0b7bd;fill-rule:nonzero'/%3E%3Cpath d='M19.514 33.324c-.348 0-.682-.113-.967-.326-1.041-.781-1.181-1.65-1.115-2.242.182-1.628 2.195-3.332 5.985-5.068 1.504-3.296 2.935-7.357 3.788-10.75-.998-2.172-1.968-4.99-1.261-6.643.248-.579.557-1.023 1.134-1.215a4.91 4.91 0 0 1 1.016-.172c.504 0 .947.649 1.261 1.049.295.376.964 1.173-.373 6.802 1.348 2.784 3.258 5.62 5.088 7.562 1.311-.237 2.439-.358 3.358-.358 1.566 0 2.515.365 2.902 1.117.32.622.189 1.349-.39 2.16-.557.779-1.325 1.191-2.22 1.191-1.216 0-2.632-.768-4.211-2.285-2.837.593-6.15 1.651-8.828 2.822-.836 1.774-1.637 3.203-2.383 4.251-1.025 1.435-1.909 2.105-2.784 2.105zm2.662-5.126c-2.137 1.201-3.008 2.188-3.071 2.744-.01.092-.037.334.431.692.149-.047 1.019-.444 2.64-3.436zm13.637-4.442c.815.627 1.014.944 1.547.944.234 0 .901-.01 1.21-.441.149-.209.207-.343.23-.415-.123-.065-.286-.197-1.175-.197-.505.001-1.14.023-1.812.109zm-7.47-6.582a71.291 71.291 0 0 1-2.674 7.564 49.966 49.966 0 0 1 6.496-2.02c-1.35-1.568-2.699-3.526-3.822-5.544zm-.607-8.462c-.098.033-1.33 1.757.096 3.216.949-2.115-.053-3.23-.096-3.216z' style='fill:%23cad1d8;fill-rule:nonzero' transform='translate(80.488 25.62) scale(7.14837)'/%3E%3Cpath d='m480 224-96-96h96v96z' style='fill:%23cad1d8;fill-rule:nonzero'/%3E%3Cpath d='M416 416c0 8.8-7.2 16-16 16H48c-8.8 0-16-7.2-16-16V256c0-8.8 7.2-16 16-16h352c8.8 0 16 7.2 16 16v160z' style='fill:%23f15642;fill-rule:nonzero'/%3E%3Cpath d='M101.744 303.152c0-4.224 3.328-8.832 8.688-8.832h29.552c16.64 0 31.616 11.136 31.616 32.48 0 20.224-14.976 31.488-31.616 31.488h-21.36v16.896c0 5.632-3.584 8.816-8.192 8.816-4.224 0-8.688-3.184-8.688-8.816v-72.032zm16.88 7.28v31.872h21.36c8.576 0 15.36-7.568 15.36-15.504 0-8.944-6.784-16.368-15.36-16.368h-21.36zM196.656 384c-4.224 0-8.832-2.304-8.832-7.92v-72.672c0-4.592 4.608-7.936 8.832-7.936h29.296c58.464 0 57.184 88.528 1.152 88.528h-30.448zm8.064-72.912V368.4h21.232c34.544 0 36.08-57.312 0-57.312H204.72zM303.872 312.096v20.352h32.624c4.608 0 9.216 4.608 9.216 9.072 0 4.224-4.608 7.68-9.216 7.68h-32.624v26.864c0 4.48-3.184 7.92-7.664 7.92-5.632 0-9.072-3.44-9.072-7.92v-72.672c0-4.592 3.456-7.936 9.072-7.936h44.912c5.632 0 8.96 3.344 8.96 7.936 0 4.096-3.328 8.704-8.96 8.704h-37.248z' style='fill:%23fff;fill-rule:nonzero'/%3E%3Cpath d='M400 432H96v16h304c8.8 0 16-7.2 16-16v-16c0 8.8-7.2 16-16 16z' style='fill:%23cad1d8;fill-rule:nonzero'/%3E%3C/svg%3E");
    }

    .ecm-file-type-doc:after,
    .ecm-file-type-docx:after {
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2'%3E%3Cpath d='M128 0c-17.6 0-32 14.4-32 32v448c0 17.6 14.4 32 32 32h320c17.6 0 32-14.4 32-32V128L352 0H128z' style='fill:%23e2e5e7;fill-rule:nonzero'/%3E%3Cpath d='M18.5 13h-6a1 1 0 0 1 0-2h6a1 1 0 0 1 0 2zM21.5 18h-9a1 1 0 0 1 0-2h9a1 1 0 0 1 0 2zM25.5 18c-.26 0-.52-.11-.71-.29-.18-.19-.29-.45-.29-.71 0-.26.11-.52.29-.71.37-.37 1.05-.37 1.42 0 .18.19.29.45.29.71 0 .26-.11.52-.29.71-.19.18-.45.29-.71.29zM37.5 18h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2zM12.5 33c-.26 0-.52-.11-.71-.29-.18-.19-.29-.45-.29-.71 0-.26.11-.52.29-.71.37-.37 1.05-.37 1.42 0 .18.19.29.44.29.71 0 .26-.11.52-.29.71-.19.18-.45.29-.71.29zM24.5 33h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2zM43.5 18h-2a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2zM34.5 23h-22a1 1 0 0 1 0-2h22a1 1 0 0 1 0 2zM43.5 23h-6a1 1 0 0 1 0-2h6a1 1 0 0 1 0 2zM16.5 28h-4a1 1 0 0 1 0-2h4a1 1 0 0 1 0 2zM30.5 28h-10a1 1 0 0 1 0-2h10a1 1 0 0 1 0 2zM43.5 28h-9a1 1 0 0 1 0-2h9a1 1 0 0 1 0 2z' style='fill:%23cad1d8;fill-rule:nonzero' transform='matrix(5 0 0 5 147.5 20)'/%3E%3Cpath d='M384 128h96L352 0v96c0 17.6 14.4 32 32 32z' style='fill:%23b0b7bd;fill-rule:nonzero'/%3E%3Cpath d='m480 224-96-96h96v96z' style='fill:%23cad1d8;fill-rule:nonzero'/%3E%3Cpath d='M416 416c0 8.8-7.2 16-16 16H48c-8.8 0-16-7.2-16-16V256c0-8.8 7.2-16 16-16h352c8.8 0 16 7.2 16 16v160z' style='fill:%2350bee8;fill-rule:nonzero'/%3E%3Cg%3E%3Cpath d='M92.576 384c-4.224 0-8.832-2.32-8.832-7.936v-72.656c0-4.608 4.608-7.936 8.832-7.936h29.296c58.464 0 57.168 88.528 1.136 88.528H92.576zm8.064-72.928v57.312h21.232c34.544 0 36.064-57.312 0-57.312H100.64zM228 385.28c-23.664 1.024-48.24-14.72-48.24-46.064 0-31.472 24.56-46.944 48.24-46.944 22.384 1.136 45.792 16.624 45.792 46.944 0 30.336-23.408 46.064-45.792 46.064zm-1.408-76.368c-14.336 0-29.936 10.112-29.936 30.32 0 20.096 15.616 30.336 29.936 30.336 14.72 0 30.448-10.24 30.448-30.336 0-20.224-15.728-30.32-30.448-30.32zM288.848 339.088c0-24.688 15.488-45.92 44.912-45.92 11.136 0 19.968 3.328 29.296 11.392 3.456 3.184 3.84 8.816.384 12.4-3.456 3.056-8.704 2.688-11.776-.384-5.232-5.504-10.608-7.024-17.904-7.024-19.696 0-29.152 13.952-29.152 29.552 0 15.872 9.328 30.448 29.152 30.448 7.296 0 14.08-2.96 19.968-8.192 3.952-3.072 9.456-1.552 11.76 1.536 2.048 2.816 3.056 7.552-1.408 12.016-8.96 8.336-19.696 10-30.336 10-30.944 0-44.896-21.136-44.896-45.824z' style='fill:%23fff;fill-rule:nonzero'/%3E%3C/g%3E%3Cpath d='M400 432H96v16h304c8.8 0 16-7.2 16-16v-16c0 8.8-7.2 16-16 16z' style='fill:%23cad1d8;fill-rule:nonzero'/%3E%3C/svg%3E");
    }

    .ecm-file-type-xls:after,
    .ecm-file-type-xlsx:after {
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2'%3E%3Cpath d='M128 0c-17.6 0-32 14.4-32 32v448c0 17.6 14.4 32 32 32h320c17.6 0 32-14.4 32-32V128L352 0H128z' style='fill:%23e2e5e7;fill-rule:nonzero'/%3E%3Cpath d='M23.5 16v-4h-12v22h33V16h-21zm-10-2h8v2h-8v-2zm0 4h8v2h-8v-2zm0 4h8v2h-8v-2zm0 4h8v2h-8v-2zm8 6h-8v-2h8v2zm21 0h-19v-2h19v2zm0-4h-19v-2h19v2zm0-4h-19v-2h19v2zm-19-4v-2h19v2h-19z' style='fill:%23cad1d8;fill-rule:nonzero' transform='matrix(5 0 0 5 147.5 15)'/%3E%3Cpath d='M384 128h96L352 0v96c0 17.6 14.4 32 32 32z' style='fill:%23b0b7bd;fill-rule:nonzero'/%3E%3Cpath d='m480 224-96-96h96v96z' style='fill:%23cad1d8;fill-rule:nonzero'/%3E%3Cpath d='M416 416c0 8.8-7.2 16-16 16H48c-8.8 0-16-7.2-16-16V256c0-8.8 7.2-16 16-16h352c8.8 0 16 7.2 16 16v160z' style='fill:%2384bd5a;fill-rule:nonzero'/%3E%3Cpath d='m144.336 326.192 22.256-27.888c6.656-8.704 19.584 2.416 12.288 10.736-7.664 9.088-15.728 18.944-23.408 29.04l26.096 32.496c7.04 9.6-7.024 18.8-13.936 9.328l-23.552-30.192-23.152 30.848c-6.528 9.328-20.992-1.152-13.696-9.856l25.712-32.624c-8.064-10.112-15.872-19.952-23.664-29.04-8.048-9.6 6.912-19.44 12.8-10.464l22.256 27.616zM197.36 303.152c0-4.224 3.584-7.808 8.064-7.808 4.096 0 7.552 3.6 7.552 7.808v64.096h34.8c12.528 0 12.8 16.752 0 16.752H205.44c-4.48 0-8.064-3.184-8.064-7.792v-73.056h-.016zM272.032 314.672c2.944-24.832 40.416-29.296 58.08-15.728 8.704 7.024-.512 18.16-8.192 12.528-9.472-6-30.96-8.816-33.648 4.464-3.456 20.992 52.192 8.976 51.296 43.008-.896 32.496-47.968 33.248-65.632 18.672-4.24-3.456-4.096-9.072-1.792-12.544 3.328-3.312 7.024-4.464 11.392-.88 10.48 7.152 37.488 12.528 39.392-5.648-1.648-18.912-54.864-7.536-50.896-43.872z' style='fill:%23fff;fill-rule:nonzero'/%3E%3Cpath d='M400 432H96v16h304c8.8 0 16-7.2 16-16v-16c0 8.8-7.2 16-16 16z' style='fill:%23cad1d8;fill-rule:nonzero'/%3E%3C/svg%3E");
    }

    .ecm-file-type-ppt:after,
    .ecm-file-type-pptx:after {
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2'%3E%3Cpath d='M128 0c-17.6 0-32 14.4-32 32v448c0 17.6 14.4 32 32 32h320c17.6 0 32-14.4 32-32V128L352 0H128z' style='fill:%23e2e5e7;fill-rule:nonzero'/%3E%3Cpath d='M39.5 30h-24V14h24v16zm-22-2h20V16h-20v12z' style='fill:%23cad1d8;fill-rule:nonzero' transform='translate(98.438 -.625) scale(6.875)'/%3E%3Cpath d='M20.499 35a1 1 0 0 1-.857-1.515l3-5a1 1 0 1 1 1.715 1.029l-3 5a.997.997 0 0 1-.858.486zM34.501 35a.998.998 0 0 1-.858-.485l-3-5a1 1 0 1 1 1.715-1.029l3 5A1 1 0 0 1 34.501 35zM27.5 16a1 1 0 0 1-1-1v-3a1 1 0 1 1 2 0v3a1 1 0 0 1-1 1z' style='fill:%23cad1d8;fill-rule:nonzero' transform='translate(98.438 -.625) scale(6.875)'/%3E%3Cpath style='fill:%23e2e5e7' d='M17.5 16h20v12h-20z' transform='translate(98.438 -.625) scale(6.875)'/%3E%3Cpath d='M384 128h96L352 0v96c0 17.6 14.4 32 32 32z' style='fill:%23b0b7bd;fill-rule:nonzero'/%3E%3Cpath d='m480 224-96-96h96v96z' style='fill:%23cad1d8;fill-rule:nonzero'/%3E%3Cpath d='M416 416c0 8.8-7.2 16-16 16H48c-8.8 0-16-7.2-16-16V256c0-8.8 7.2-16 16-16h352c8.8 0 16 7.2 16 16v160z' style='fill:%23f15642;fill-rule:nonzero'/%3E%3Cg%3E%3Cpath d='M105.456 303.152c0-4.224 3.328-8.832 8.688-8.832h29.552c16.64 0 31.616 11.136 31.616 32.48 0 20.224-14.976 31.488-31.616 31.488h-21.36v16.896c0 5.632-3.568 8.816-8.176 8.816-4.224 0-8.688-3.184-8.688-8.816v-72.032h-.016zm16.88 7.28v31.872h21.36c8.576 0 15.36-7.568 15.36-15.504 0-8.944-6.784-16.368-15.36-16.368h-21.36zM191.616 303.152c0-4.224 3.328-8.832 8.704-8.832h29.552c16.64 0 31.616 11.136 31.616 32.48 0 20.224-14.976 31.488-31.616 31.488h-21.36v16.896c0 5.632-3.584 8.816-8.192 8.816-4.224 0-8.704-3.184-8.704-8.816v-72.032zm16.88 7.28v31.872h21.36c8.576 0 15.36-7.568 15.36-15.504 0-8.944-6.784-16.368-15.36-16.368h-21.36zM301.68 311.472h-22.368c-11.136 0-11.136-16.368 0-16.368h60.496c11.392 0 11.392 16.368 0 16.368h-21.232v64.608c0 11.12-16.896 11.392-16.896 0v-64.608z' style='fill:%23fff;fill-rule:nonzero'/%3E%3C/g%3E%3Cpath d='M400 432H96v16h304c8.8 0 16-7.2 16-16v-16c0 8.8-7.2 16-16 16z' style='fill:%23cad1d8;fill-rule:nonzero'/%3E%3C/svg%3E");
    }

    .ecm-file-type-zip:after {
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2'%3E%3Cpath d='M128 0c-17.6 0-32 14.4-32 32v448c0 17.6 14.4 32 32 32h320c17.6 0 32-14.4 32-32V128L352 0H128z' style='fill:%23e2e5e7;fill-rule:nonzero'/%3E%3Cpath d='M28.5 24v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h-2v2h-2v2h2v2h-2v2h2v2h-2v2h2v2h-2v2h2v2h-4v5c0 2.757 2.243 5 5 5s5-2.243 5-5v-5h-4zm2 5c0 1.654-1.346 3-3 3s-3-1.346-3-3v-3h6v3z' style='fill:%23cad1d8;fill-rule:nonzero' transform='matrix(4.5 0 0 4.5 167.107 68)'/%3E%3Cpath d='M26.5 30h2a1 1 0 1 0 0-2h-2a1 1 0 1 0 0 2z' style='fill:%23cad1d8;fill-rule:nonzero' transform='matrix(4.5 0 0 4.5 167.107 68)'/%3E%3Cpath d='M384 128h96L352 0v96c0 17.6 14.4 32 32 32z' style='fill:%23b0b7bd;fill-rule:nonzero'/%3E%3Cpath d='m480 224-96-96h96v96z' style='fill:%23cad1d8;fill-rule:nonzero'/%3E%3Cpath d='M416 416c0 8.8-7.2 16-16 16H48c-8.8 0-16-7.2-16-16V256c0-8.8 7.2-16 16-16h352c8.8 0 16 7.2 16 16v160z' style='fill:%2384bd5a;fill-rule:nonzero'/%3E%3Cpath d='M132.64 384c-8.064 0-11.264-7.792-6.656-13.296l45.552-60.512h-37.76c-11.12 0-10.224-15.712 0-15.712h51.568c9.712 0 12.528 9.184 5.632 16.624l-43.632 56.656h41.584c10.24 0 11.52 16.256-1.008 16.256h-55.28V384zM212.048 303.152c0-10.496 16.896-10.88 16.896 0v73.04c0 10.608-16.896 10.88-16.896 0v-73.04zM251.616 303.152c0-4.224 3.328-8.832 8.704-8.832h29.552c16.64 0 31.616 11.136 31.616 32.48 0 20.224-14.976 31.488-31.616 31.488h-21.36v16.896c0 5.632-3.584 8.816-8.192 8.816-4.224 0-8.704-3.184-8.704-8.816v-72.032zm16.88 7.28v31.872h21.36c8.576 0 15.36-7.568 15.36-15.504 0-8.944-6.784-16.368-15.36-16.368h-21.36z' style='fill:%23fff;fill-rule:nonzero'/%3E%3Cpath d='M400 432H96v16h304c8.8 0 16-7.2 16-16v-16c0 8.8-7.2 16-16 16z' style='fill:%23cad1d8;fill-rule:nonzero'/%3E%3C/svg%3E");
    }

    .ecm-file-type-css:after {
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2'%3E%3Cpath d='M128 0c-17.6 0-32 14.4-32 32v448c0 17.6 14.4 32 32 32h320c17.6 0 32-14.4 32-32V128L352 0H128z' style='fill:%23e2e5e7;fill-rule:nonzero'/%3E%3Cpath d='M19.5 19v-4c0-.551.448-1 1-1a1 1 0 1 0 0-2c-1.654 0-3 1.346-3 3v4c0 1.103-.897 2-2 2a1 1 0 1 0 0 2c1.103 0 2 .897 2 2v4c0 1.654 1.346 3 3 3a1 1 0 1 0 0-2c-.552 0-1-.449-1-1v-4c0-1.2-.542-2.266-1.382-3a3.975 3.975 0 0 0 1.382-3zM39.5 21c-1.103 0-2-.897-2-2v-4c0-1.654-1.346-3-3-3a1 1 0 1 0 0 2c.552 0 1 .449 1 1v4c0 1.2.542 2.266 1.382 3a3.975 3.975 0 0 0-1.382 3v4c0 .551-.448 1-1 1a1 1 0 1 0 0 2c1.654 0 3-1.346 3-3v-4c0-1.103.897-2 2-2a1 1 0 1 0 0-2z' style='fill:%23cad1d8;fill-rule:nonzero' transform='translate(112.981 -1.154) scale(6.34615)'/%3E%3Cpath d='M384 128h96L352 0v96c0 17.6 14.4 32 32 32z' style='fill:%23b0b7bd;fill-rule:nonzero'/%3E%3Cpath d='m480 224-96-96h96v96z' style='fill:%23cad1d8;fill-rule:nonzero'/%3E%3Cpath d='M416 416c0 8.8-7.2 16-16 16H48c-8.8 0-16-7.2-16-16V256c0-8.8 7.2-16 16-16h352c8.8 0 16 7.2 16 16v160z' style='fill:%23576d7e;fill-rule:nonzero'/%3E%3Cpath d='M272.032 314.672c2.944-24.832 40.416-29.296 58.08-15.728 8.704 7.024-.512 18.16-8.192 12.528-9.472-6-30.96-8.816-33.648 4.464-3.456 20.992 52.192 8.976 51.296 43.008-.896 32.496-47.968 33.248-65.632 18.672-4.24-3.456-4.096-9.072-1.792-12.544 3.328-3.312 7.024-4.464 11.392-.88 10.48 7.152 37.488 12.528 39.392-5.648-1.648-18.912-54.864-7.536-50.896-43.872z' style='fill:%23fff;fill-rule:nonzero' transform='translate(4.65)'/%3E%3Cpath d='M272.032 314.672c2.944-24.832 40.416-29.296 58.08-15.728 8.704 7.024-.512 18.16-8.192 12.528-9.472-6-30.96-8.816-33.648 4.464-3.456 20.992 52.192 8.976 51.296 43.008-.896 32.496-47.968 33.248-65.632 18.672-4.24-3.456-4.096-9.072-1.792-12.544 3.328-3.312 7.024-4.464 11.392-.88 10.48 7.152 37.488 12.528 39.392-5.648-1.648-18.912-54.864-7.536-50.896-43.872z' style='fill:%23fff;fill-rule:nonzero' transform='translate(-77.902)'/%3E%3Cpath d='M288.848 339.088c0-24.688 15.488-45.92 44.912-45.92 11.136 0 19.968 3.328 29.296 11.392 3.456 3.184 3.84 8.816.384 12.4-3.456 3.056-8.704 2.688-11.776-.384-5.232-5.504-10.608-7.024-17.904-7.024-19.696 0-29.152 13.952-29.152 29.552 0 15.872 9.328 30.448 29.152 30.448 7.296 0 14.08-2.96 19.968-8.192 3.952-3.072 9.456-1.552 11.76 1.536 2.048 2.816 3.056 7.552-1.408 12.016-8.96 8.336-19.696 10-30.336 10-30.944 0-44.896-21.136-44.896-45.824z' style='fill:%23fff;fill-rule:nonzero' transform='translate(-188.104)'/%3E%3Cpath d='M400 432H96v16h304c8.8 0 16-7.2 16-16v-16c0 8.8-7.2 16-16 16z' style='fill:%23cad1d8;fill-rule:nonzero'/%3E%3C/svg%3E");
    }

    .ecm-file-type-mp3:after {
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2'%3E%3Cpath d='M128 0c-17.6 0-32 14.4-32 32v448c0 17.6 14.4 32 32 32h320c17.6 0 32-14.4 32-32V128L352 0H128z' style='fill:%23e2e5e7;fill-rule:nonzero'/%3E%3Cpath d='M441.38 165.517c-76.05 0-137.932 61.881-137.932 137.931v27.586h27.586v-27.586c0-60.843 49.502-110.345 110.346-110.345 60.843 0 110.345 49.502 110.345 110.345v27.586h27.586v-27.586c0-76.05-61.881-137.931-137.931-137.931z' style='fill:%23cad1d8;fill-rule:nonzero' transform='translate(47.5 -15) scale(.54375)'/%3E%3Cpath d='M331.034 427.586h-13.793c-15.236 0-27.586-12.35-27.586-27.586v-55.172c0-15.236 12.35-27.586 27.586-27.586h13.793c7.618 0 13.794 6.177 13.794 13.794v82.759c0 7.616-6.176 13.791-13.794 13.791zM551.723 317.241h13.794c15.236 0 27.586 12.35 27.586 27.586V400c0 15.236-12.35 27.586-27.586 27.586h-13.794c-7.617 0-13.793-6.177-13.793-13.794v-82.759c.001-7.616 6.176-13.792 13.793-13.792z' style='fill:%23cad1d8;fill-rule:nonzero' transform='translate(47.5 -15) scale(.54375)'/%3E%3Cpath d='M384 128h96L352 0v96c0 17.6 14.4 32 32 32z' style='fill:%23b0b7bd;fill-rule:nonzero'/%3E%3Cpath d='m480 224-96-96h96v96z' style='fill:%23cad1d8;fill-rule:nonzero'/%3E%3Cpath d='M416 416c0 8.8-7.2 16-16 16H48c-8.8 0-16-7.2-16-16V256c0-8.8 7.2-16 16-16h352c8.8 0 16 7.2 16 16v160z' style='fill:%23a066aa;fill-rule:nonzero'/%3E%3Cg%3E%3Cpath d='M.377-.344a.16.16 0 0 0 .075-.141C.452-.589.373-.67.243-.67c-.075 0-.136.027-.168.065a.088.088 0 0 0-.022.054c0 .031.024.057.058.057.021 0 .035-.01.048-.022.019-.016.037-.036.082-.036.056 0 .088.032.088.075s-.032.075-.088.075H.214c-.04 0-.065.026-.065.058 0 .033.025.058.065.058h.027c.068 0 .107.039.107.09s-.039.09-.107.09a.118.118 0 0 1-.094-.041C.135-.16.118-.182.088-.182a.057.057 0 0 0-.057.058c0 .014.005.03.012.044.028.051.1.092.199.092.147 0 .229-.09.229-.201 0-.069-.032-.127-.094-.155z' style='fill:%23fff;fill-rule:nonzero' transform='matrix(132 0 0 132 256.208 383.17)'/%3E%3Cpath d='M92.816 303.152c0-4.224 3.312-8.848 8.688-8.848h29.568c16.624 0 31.6 11.136 31.6 32.496 0 20.224-14.976 31.472-31.6 31.472H109.68v16.896c0 5.648-3.552 8.832-8.176 8.832-4.224 0-8.688-3.184-8.688-8.832v-72.016zm16.864 7.28v31.856h21.376c8.56 0 15.344-7.552 15.344-15.488 0-8.96-6.784-16.368-15.344-16.368H109.68z' style='fill:%23fff;fill-rule:nonzero' transform='translate(86.144)'/%3E%3Cpath d='M201.264 327.84v47.328c0 5.648-4.608 8.832-9.2 8.832-4.096 0-7.68-3.184-7.68-8.832v-72.016c0-6.656 5.648-8.848 7.68-8.848 3.696 0 5.872 2.192 8.048 4.624l28.16 37.984 29.152-39.408c4.24-5.232 14.592-3.2 14.592 5.648v72.016c0 5.648-3.584 8.832-7.664 8.832-4.608 0-8.192-3.184-8.192-8.832V327.84l-21.248 26.864c-4.592 5.648-10.352 5.648-14.576 0l-19.072-26.864z' style='fill:%23fff;fill-rule:nonzero' transform='translate(-109)'/%3E%3C/g%3E%3Cpath d='M400 432H96v16h304c8.8 0 16-7.2 16-16v-16c0 8.8-7.2 16-16 16z' style='fill:%23cad1d8;fill-rule:nonzero'/%3E%3C/svg%3E");
    }

    .ecm-file-type-mp4:after {
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2'%3E%3Cpath d='M128 0c-17.6 0-32 14.4-32 32v448c0 17.6 14.4 32 32 32h320c17.6 0 32-14.4 32-32V128L352 0H128z' style='fill:%23e2e5e7;fill-rule:nonzero'/%3E%3Cpath d='M24.5 28a1 1 0 0 1-1-1V13a1.001 1.001 0 0 1 1.538-.844l11 7a1.003 1.003 0 0 1-.001 1.688l-11 7c-.163.103-.35.156-.537.156zm1-13.179v10.357L33.637 20 25.5 14.821z' style='fill:%23cad1d8;fill-rule:nonzero' transform='matrix(5.5 0 0 5.5 130.75 47.5)'/%3E%3Cpath d='M28.5 35c-8.271 0-15-6.729-15-15s6.729-15 15-15 15 6.729 15 15-6.729 15-15 15zm0-28c-7.168 0-13 5.832-13 13s5.832 13 13 13 13-5.832 13-13-5.832-13-13-13z' style='fill:%23cad1d8;fill-rule:nonzero' transform='matrix(5.5 0 0 5.5 130.75 47.5)'/%3E%3Cpath d='M384 128h96L352 0v96c0 17.6 14.4 32 32 32z' style='fill:%23b0b7bd;fill-rule:nonzero'/%3E%3Cpath d='m480 224-96-96h96v96z' style='fill:%23cad1d8;fill-rule:nonzero'/%3E%3Cpath d='M416 416c0 8.8-7.2 16-16 16H48c-8.8 0-16-7.2-16-16V256c0-8.8 7.2-16 16-16h352c8.8 0 16 7.2 16 16v160z' style='fill:%23f7b84e;fill-rule:nonzero'/%3E%3Cpath d='M.442-.128h.04c.041 0 .066-.026.066-.059 0-.032-.025-.059-.066-.059h-.04v-.088c0-.041-.027-.067-.06-.067s-.06.026-.06.067v.092H.287L.168-.24a3.38 3.38 0 0 0 .088-.166L.327-.55c.009-.019.021-.041.021-.063 0-.032-.025-.054-.058-.054-.03 0-.048.018-.068.058l-.176.361a.15.15 0 0 0-.021.065c0 .034.022.055.056.055h.241v.07c0 .041.027.067.06.067s.06-.026.06-.067v-.07z' style='fill:%23fff;fill-rule:nonzero' transform='matrix(132 0 0 132 252.116 383.17)'/%3E%3Cpath d='M92.816 303.152c0-4.224 3.312-8.848 8.688-8.848h29.568c16.624 0 31.6 11.136 31.6 32.496 0 20.224-14.976 31.472-31.6 31.472H109.68v16.896c0 5.648-3.552 8.832-8.176 8.832-4.224 0-8.688-3.184-8.688-8.832v-72.016zm16.864 7.28v31.856h21.376c8.56 0 15.344-7.552 15.344-15.488 0-8.96-6.784-16.368-15.344-16.368H109.68z' style='fill:%23fff;fill-rule:nonzero' transform='translate(86.144)'/%3E%3Cpath d='M201.264 327.84v47.328c0 5.648-4.608 8.832-9.2 8.832-4.096 0-7.68-3.184-7.68-8.832v-72.016c0-6.656 5.648-8.848 7.68-8.848 3.696 0 5.872 2.192 8.048 4.624l28.16 37.984 29.152-39.408c4.24-5.232 14.592-3.2 14.592 5.648v72.016c0 5.648-3.584 8.832-7.664 8.832-4.608 0-8.192-3.184-8.192-8.832V327.84l-21.248 26.864c-4.592 5.648-10.352 5.648-14.576 0l-19.072-26.864z' style='fill:%23fff;fill-rule:nonzero' transform='translate(-109)'/%3E%3Cpath d='M400 432H96v16h304c8.8 0 16-7.2 16-16v-16c0 8.8-7.2 16-16 16z' style='fill:%23cad1d8;fill-rule:nonzero'/%3E%3C/svg%3E");
    }

    .ecm-file-type-html:after {
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2'%3E%3Cpath d='M128 0c-17.6 0-32 14.4-32 32v448c0 17.6 14.4 32 32 32h320c17.6 0 32-14.4 32-32V128L352 0H128z' style='fill:%23e2e5e7;fill-rule:nonzero'/%3E%3Cpath d='M23.207 16.293a.999.999 0 0 0-1.414 0l-6 6a.999.999 0 0 0 0 1.414l6 6a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414L17.914 23l5.293-5.293a.999.999 0 0 0 0-1.414zM41.207 22.293l-6-6a.999.999 0 1 0-1.414 1.414L39.086 23l-5.293 5.293a.999.999 0 1 0 1.414 1.414l6-6a.999.999 0 0 0 0-1.414z' style='fill:%23cad1d8;fill-rule:nonzero' transform='translate(106.638 -6.535) scale(6.34603)'/%3E%3Cpath d='M384 128h96L352 0v96c0 17.6 14.4 32 32 32z' style='fill:%23b0b7bd;fill-rule:nonzero'/%3E%3Cpath d='m480 224-96-96h96v96z' style='fill:%23cad1d8;fill-rule:nonzero'/%3E%3Cpath d='M416 416c0 8.8-7.2 16-16 16H48c-8.8 0-16-7.2-16-16V256c0-8.8 7.2-16 16-16h352c8.8 0 16 7.2 16 16v160z' style='fill:%23576d7e;fill-rule:nonzero'/%3E%3Cpath d='M197.36 303.152c0-4.224 3.584-7.808 8.064-7.808 4.096 0 7.552 3.6 7.552 7.808v64.096h34.8c12.528 0 12.8 16.752 0 16.752H205.44c-4.48 0-8.064-3.184-8.064-7.792v-73.056h-.016z' style='fill:%23fff;fill-rule:nonzero' transform='translate(135)'/%3E%3Cpath d='M201.264 327.84v47.328c0 5.648-4.608 8.832-9.2 8.832-4.096 0-7.68-3.184-7.68-8.832v-72.016c0-6.656 5.648-8.848 7.68-8.848 3.696 0 5.872 2.192 8.048 4.624l28.16 37.984 29.152-39.408c4.24-5.232 14.592-3.2 14.592 5.648v72.016c0 5.648-3.584 8.832-7.664 8.832-4.608 0-8.192-3.184-8.192-8.832V327.84l-21.248 26.864c-4.592 5.648-10.352 5.648-14.576 0l-19.072-26.864z' style='fill:%23fff;fill-rule:nonzero' transform='translate(48.03)'/%3E%3Cpath d='M301.68 311.472h-22.368c-11.136 0-11.136-16.368 0-16.368h60.496c11.392 0 11.392 16.368 0 16.368h-21.232v64.608c0 11.12-16.896 11.392-16.896 0v-64.608z' style='fill:%23fff;fill-rule:nonzero' transform='translate(-128.251)'/%3E%3Cpath d='M201.264 345.871v29.297c0 5.648-4.608 8.832-9.2 8.832-4.096 0-7.68-3.184-7.68-8.832v-72.016c0-6.656 5.648-8.848 7.68-8.848 2.269 0 8.936 2.213 8.936 8.815l-.048 27.755 33.32-.006s.653 15.001-.476 15.001l-32.532.002z' style='fill:%23fff;fill-rule:nonzero' transform='translate(-124)'/%3E%3Cpath d='M201.264 345.871v29.297c0 5.648-4.608 8.832-9.2 8.832-4.096 0-7.68-3.184-7.68-8.832v-72.016c0-6.656 5.648-8.848 7.68-8.848 2.269 0 8.936 2.213 8.936 8.815l-.048 27.755 3.432-.006 29.871.005s.657 14.983-.472 14.983l-32.519.015z' style='fill:%23fff;fill-rule:nonzero' transform='matrix(-1 0 0 1 314.779 0)'/%3E%3Cpath d='M400 432H96v16h304c8.8 0 16-7.2 16-16v-16c0 8.8-7.2 16-16 16z' style='fill:%23cad1d8;fill-rule:nonzero'/%3E%3C/svg%3E");
    }

    .ecm-file-type-csv:after {
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2'%3E%3Cpath d='M128 0c-17.6 0-32 14.4-32 32v448c0 17.6 14.4 32 32 32h320c17.6 0 32-14.4 32-32V128L352 0H128z' style='fill:%23e2e5e7;fill-rule:nonzero'/%3E%3Cpath d='M23.5 16v-4h-12v22h33V16h-21zm-10-2h8v2h-8v-2zm0 4h8v2h-8v-2zm0 4h8v2h-8v-2zm0 4h8v2h-8v-2zm8 6h-8v-2h8v2zm21 0h-19v-2h19v2zm0-4h-19v-2h19v2zm0-4h-19v-2h19v2zm-19-4v-2h19v2h-19z' style='fill:%23cad1d8;fill-rule:nonzero' transform='matrix(5 0 0 5 147.5 15)'/%3E%3Cpath d='M384 128h96L352 0v96c0 17.6 14.4 32 32 32z' style='fill:%23b0b7bd;fill-rule:nonzero'/%3E%3Cpath d='m480 224-96-96h96v96z' style='fill:%23cad1d8;fill-rule:nonzero'/%3E%3Cpath d='M416 416c0 8.8-7.2 16-16 16H48c-8.8 0-16-7.2-16-16V256c0-8.8 7.2-16 16-16h352c8.8 0 16 7.2 16 16v160z' style='fill:%2384bd5a;fill-rule:nonzero'/%3E%3Cpath d='M212.048 303.152c0-10.496 16.896-10.88 16.896 0v73.04c0 10.608-16.896 10.88-16.896 0v-73.04z' style='fill:%23fff;fill-rule:nonzero' transform='matrix(-.9397 .30755 -.42256 -1.04395 643.894 625.193)'/%3E%3Cpath d='M212.048 303.152c0-10.496 16.896-10.88 16.896 0v73.04c0 10.608-16.896 10.88-16.896 0v-73.04z' style='fill:%23fff;fill-rule:nonzero' transform='matrix(.9397 .30755 .42256 -1.04395 -25.701 625.193)'/%3E%3Cpath d='M272.032 314.672c2.944-24.832 40.416-29.296 58.08-15.728 8.704 7.024-.512 18.16-8.192 12.528-9.472-6-30.96-8.816-33.648 4.464-3.456 20.992 52.192 8.976 51.296 43.008-.896 32.496-47.968 33.248-65.632 18.672-4.24-3.456-4.096-9.072-1.792-12.544 3.328-3.312 7.024-4.464 11.392-.88 10.48 7.152 37.488 12.528 39.392-5.648-1.648-18.912-54.864-7.536-50.896-43.872z' style='fill:%23fff;fill-rule:nonzero' transform='translate(-77.746)'/%3E%3Cpath d='M288.848 339.088c0-24.688 15.488-45.92 44.912-45.92 11.136 0 19.968 3.328 29.296 11.392 3.456 3.184 3.84 8.816.384 12.4-3.456 3.056-8.704 2.688-11.776-.384-5.232-5.504-10.608-7.024-17.904-7.024-19.696 0-29.152 13.952-29.152 29.552 0 15.872 9.328 30.448 29.152 30.448 7.296 0 14.08-2.96 19.968-8.192 3.952-3.072 9.456-1.552 11.76 1.536 2.048 2.816 3.056 7.552-1.408 12.016-8.96 8.336-19.696 10-30.336 10-30.944 0-44.896-21.136-44.896-45.824z' style='fill:%23fff;fill-rule:nonzero' transform='translate(-188.104)'/%3E%3Cpath d='M400 432H96v16h304c8.8 0 16-7.2 16-16v-16c0 8.8-7.2 16-16 16z' style='fill:%23cad1d8;fill-rule:nonzero'/%3E%3C/svg%3E");
    }

    .ecm-file-type-unknown:after {
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2'%3E%3Cpath d='M128 0c-17.6 0-32 14.4-32 32v448c0 17.6 14.4 32 32 32h320c17.6 0 32-14.4 32-32V128L352 0H128z' style='fill:%23e2e5e7;fill-rule:nonzero'/%3E%3Cpath d='M384 128h96L352 0v96c0 17.6 14.4 32 32 32z' style='fill:%23b0b7bd;fill-rule:nonzero'/%3E%3Cpath d='m480 224-96-96h96v96z' style='fill:%23cad1d8;fill-rule:nonzero'/%3E%3Cpath d='M416 416c0 8.8-7.2 16-16 16H48c-8.8 0-16-7.2-16-16V256c0-8.8 7.2-16 16-16h352c8.8 0 16 7.2 16 16v160z' style='fill:%23576d7e;fill-rule:nonzero'/%3E%3Cpath d='M.265-.301c.102-.011.169-.083.169-.182C.434-.59.355-.67.225-.67c-.075 0-.136.027-.168.065a.088.088 0 0 0-.022.054c0 .031.024.057.058.057.021 0 .035-.01.048-.022.019-.016.037-.036.082-.036.056 0 .088.032.088.075s-.032.075-.088.075H.206c-.036 0-.059.023-.059.059v.083c0 .041.026.066.059.066S.265-.219.265-.26v-.041zm-.059.31a.073.073 0 0 0 .072-.073.073.073 0 0 0-.072-.073.073.073 0 0 0-.072.073c0 .04.032.073.072.073z' style='fill:%23fff;fill-rule:nonzero' transform='matrix(132 0 0 132 183.195 383.058)'/%3E%3Cpath d='M400 432H96v16h304c8.8 0 16-7.2 16-16v-16c0 8.8-7.2 16-16 16z' style='fill:%23cad1d8;fill-rule:nonzero'/%3E%3C/svg%3E");
    }
    /* eCM PLATFORM UI 
   ================================================================================= */
    /* COMMON UI ELEMENTS */

    .ecm .ecm-background,
    .ecm.ecm-background {
        background-color: #f4f6fa;
    }

    .ecm .ecm-footer {
        font-family: var(--ecm-font-family);
        color: var(--ecm-gray-400);
    }
    /* beat animation - used with footer heart */
    .ecm .beat {
        -webkit-animation: beat 0.3s infinite alternate;
        animation: beat 0.4s infinite alternate;
    }

    @-webkit-keyframes beat {
        to {
            transform: scale(1.3);
        }
    }

    @keyframes beat {
        to {
            transform: scale(1.3);
        }
    }
    /* addon for animated.css library to support delays using data attribute */
    .ecm [data-delay] {
        --animate-delay: attr(data-delay ms); /* Fetch the data-delay value from the animated element */
        animation-delay: var(--animate-delay);
    }
    /* menu bar and submenus bar */
    .ecm-menu-bar {
        .mainmenu-container {
            background-color: var(--ecm-primary);
            width: 100%;
            min-height: 80px;
            display: flex;
            flex-direction: row;

            a.logo {
                display: flex;
                align-items: center;
                margin-left: 20px;
                margin-right: 30px;
            }

            ul.mainmenu {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                margin: 0;
                width: 100%;
            }

                ul.mainmenu > li {
                    display: inline-block;
                    list-style: none;
                    padding-right: 10px;
                    color: white;
                }

                    ul.mainmenu > li a {
                        padding: 10px 15px;
                        color: white;
                        border-radius: 10px;
                        text-transform: uppercase;
                        font-family: var(--ecm-font-family);
                        font-size: .875rem;
                        font-weight: 400;
                        opacity: .85;
                        line-height: 30px;
                        text-decoration: none;
                        transition: background-color .15s ease-in-out;
                    }

                        ul.mainmenu > li a:hover {
                            background-color: rgba(255,255,255,.2);
                            opacity: 1;
                        }

                    ul.mainmenu > li.active a {
                        background-color: rgba(255,255,255,.2);
                    }

                    ul.mainmenu > li:last-child {
                        margin-left: auto; /* positions this item to the right */
                        padding-left: 30px;
                    }

                        ul.mainmenu > li:last-child a {
                            padding: 5px 10px;
                        }

                            ul.mainmenu > li:last-child a:hover,
                            ul.mainmenu > li:last-child > a:first-child:hover {
                                background-color: transparent;
                                opacity: 1;
                            }

                        ul.mainmenu > li:last-child > a:first-child {
                            opacity: .7;
                            padding-right: 10px;
                        }

                        ul.mainmenu > li:last-child > a:last-child {
                            padding-left: 10px;
                        }
        }

        @media (max-width: 991px) {
            .mainmenu-container {
                align-items: center;
                flex-direction: column;

                & a.logo {
                    margin: 25px
                }

                & ul.mainmenu {
                    justify-content: center;
                    margin-bottom: 10px
                }

                    & ul.mainmenu > li:last-child {
                        margin-top: 5px;
                        margin-left: unset
                    }
            }
        }

        .submenu-container {
            display: flex;
            flex-direction: row;
            background-color: white;
            min-height: 70px;
            box-shadow: var(--ecm-box-shadow-59);
            padding: 5px;

            ul.submenu {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                margin: 0;
            }

                ul.submenu > li {
                    display: inline-block;
                    list-style: none;
                    padding-right: 10px;
                }

                    ul.submenu > li a {
                        display: block;
                        padding: 10px 15px;
                        color: var(--ecm-nav-color);
                        border-radius: 5px;
                        font-family: var(--ecm-font-family);
                        font-size: .875rem;
                        text-decoration: none;
                        transition: background-color .15s ease-in-out, color .15s ease-in-out;
                    }

                        ul.submenu > li a:hover {
                            color: var(--ecm-nav-color-active);
                            background-color: var(--ecm-nav-bg);

                            & .badge {
                                background-color: var(--ecm-nav-color-active) !important;
                            }
                        }

                        ul.submenu > li a.disabled {
                            color: var(--ecm-gray-200);
                            pointer-events: none;
                        }

                    ul.submenu > li.active a {
                        background-color: var(--ecm-nav-bg);
                        color: var(--ecm-nav-color-active);
                    }

                    ul.submenu > li a .badge {
                        --bs-badge-font-size: 0.75rem /* 12px */;
                        --bs-badge-padding-x: 0.50em;
                        --bs-badge-padding-y: 0.25em;
                    }
        }
    }
    /* Card header pill menus */
    .card-header-menus {
        & button {
            font-family: var(--ecm-font-family);
            font-size: 1rem;
            font-weight: 400;
            border: none;
            border-radius: 5px;
            padding: 10px 15px;
            color: var(--ecm-nav-color);
            background-color: transparent;
            transition: background-color .15s ease-in-out, color .15s ease-in-out;
        }

            & button:hover,
            & button.active {
                background-color: var(--ecm-nav-bg);
                color: var(--ecm-nav-color-active);
            }
    }
    /* Card header tab menus */
    .card-header-tabs {
        &.nav {            
            --bs-nav-link-color: var(--ecm-link-color);
            --bs-nav-link-hover-color: var(--ecm-link-hover-color);
        }

            &.nav .nav-link {
                font-family: var(--ecm-font-family);
                font-size: 1rem;
                font-weight: 400;
                color: var(--ecm-nav-color);
            }

                &.nav .nav-link:hover,
                &.nav .nav-link.active {
                    color: var(--ecm-nav-color-active);
                }

                &.nav .nav-link.disabled {
                    color: var(--ecm-gray-200);
                }
    }
    /* eCM Tables */
    .ecm .table {
        --bs-table-hover-bg: var(--ecm-primary-light);
        --bs-table-border-color: color-mix(in srgb, var(--ecm-gray-200), transparent 70%);

        & table {
            width: 100%;
            border-collapse: collapse;
        }

        & th {
            color: var(--ecm-text-400);
            font-family: var(--ecm-font-family);
            font-size: var(--ecm-font-size);
            font-weight: 500;
            text-align: left;
            padding: 20px 15px;
        }

            & th a {
                color: var(--ecm-text-400);
                text-decoration: none;
            }

                & th a:hover {
                    color: var(--ecm-link-hover-color);
                }

        & td {
            font-family: var(--ecm-font-family);
            font-size: var(--ecm-font-size);
            font-weight: 400;
            padding: .75rem;
            vertical-align: middle;
        }

        & tr.row-selected td {
            background-color: var(--ecm-gray-100);
        }
    }
    /* MY AREA ELEMENTS */

    .ecm .welcome-card {
        background: url(/econtentmedia/svg/undraw_working_from_anywhere_ub67.svg);
        background-position: -220%;
        background-size: 110% 110%;
        background-repeat: no-repeat;
        background-color: #fff;

        & .card-body {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
    }

    .ecm .guides-card {
        & ul {
            list-style-type: none;
            padding: 0;
        }

            & ul li {
                padding-bottom: 5px;
                display: flex;
            }

                & ul li span {
                    display: flex;
                    align-items: flex-start;
                    padding-right: 5px;
                }

        & a {
            display: flex;
            position: relative;
            align-items: flex-start;
            padding-bottom: 4px;
            color: white;
            text-decoration: none;
        }

            & a:after {
                position: absolute;
                content: "";
                width: 0;
                height: 2px;
                background: white;
                transition: width .3s ease-in-out;
                bottom: 0;
                z-index: 1;
            }

            & a:hover:not(:focus-visible)::after {
                width: 100%;
            }
    }

    .ecm .news-card {
        & .carousel-indicators [data-bs-target] {
            background-color: var(--ecm-gray-400);
        }

        & .carousel-control-next,
        & .carousel-control-prev {
            top: 170px;
            align-items: start
        }

        & .aspect-ratio {
            position: relative;
            display: block;
            height: 0;
            padding-bottom: calc(100% / 1.8);
        }

            & .aspect-ratio > * {
                position: absolute;
                top: 0;
                left: 0;
                width: 100% !important;
                height: 100% !important;
                object-fit: cover
            }
    }
    /* ADMIN AREA ELEMENTS */

    .ecm .adminarea-card {
        transition: all .4s ease-in-out;
        background-color: white;

        &:hover {
            box-shadow: var(--ecm-box-shadow-sm);
            /*background-color: color-mix(in srgb, var(--ecm-nav-bg), white 60%);*/
        }

        & .adminarea-icon {
            background-color: var(--ecm-primary-light);
        }

            & .adminarea-icon,
            & .adminarea-icon i {
                transition: all .5s ease-in-out;
            }

        &:hover .adminarea-icon {
            transform: translate(0, 0) rotate(4deg) skewX(0) skewY(0) scale(1.02);
        }

            &:hover .adminarea-icon i {
                transform: translate(0, 0) rotate(3deg) skewX(0) skewY(0) scale(1.1);
            }

        & p {
            text-wrap-style: pretty;
        }

        & a {
            position: relative;
            text-decoration: none;
            transition: all .2s ease-in-out;
            height: 100%;
        }

        & h5 {
            transition: all .4s ease-in-out;
        }

        & a:hover {
            transform: scale(1.02);
        }

            & a:hover h5,
            & a:hover p > i {
                color: var(--ecm-link-hover-color) !important;
            }
    }
    /* ADMIN - SITES AND PAGES ELEMENTS */

    .ecm-pages-tree {
        &.RadTreeView_Bootstrap .rtIn {
            font-family: var(--ecm-font-family) !important;
            width: -webkit-fill-available;
            margin-right: 20px;
            padding: 0;
        }

        &.RadTreeView_Bootstrap .rtLI {
            padding-left: 28px;
            overflow: visible
        }

            &.RadTreeView_Bootstrap .rtLI .rtChk {
                width: 16px;
                height: 16px;
                margin-right: 5px;
            }

        &.RadTreeView_Bootstrap .rtSelected .rtIn {
            --bs-list-group-active-bg: var(--ecm-gray-100);
            --bs-list-group-active-color: var(--ecm-gray-400);
            border-color: transparent;
            background-color: var(--bs-list-group-active-bg);
            color: var(--bs-list-group-active-color);
        }

        &.RadTreeView_Bootstrap .rtHover .rtIn {
            border-color: transparent;
            --bs-list-group-action-hover-bg: var(--ecm-primary-light);
            background-color: var(--bs-list-group-action-hover-bg);
            color: var(--bs-list-group-action-hover-color);
        }

        &.RadTreeView_Bootstrap .rtLines .rtOut:before {
            width: 15px;
            top: 13px;
        }

        &.RadTreeView_Bootstrap .rtLines .rtLast:before {
            padding-top: 23px;
        }

        &.RadTreeView_Bootstrap .rtPlus, &.RadTreeView_Bootstrap .rtMinus {
            margin-top: 4px;
        }

            &.RadTreeView_Bootstrap .rtPlus:before, &.RadTreeView_Bootstrap .rtMinus:before {
                font: normal normal normal 22px/1 "eCM-Font";
                border-radius: 50%;
                color: var(--ecm-primary);
                background-color: white;
            }

            &.RadTreeView_Bootstrap .rtPlus:before {
                content: "\ec25";
            }

            &.RadTreeView_Bootstrap .rtMinus:before {
                content: "\ec23";
            }

        &.RadTreeView_Bootstrap .rtPlusHover:before, &.RadTreeView_Bootstrap .rtMinusHover:before {
            color: var(--ecm-link-hover-color);
        }
    }

    .ecm-page-quickinfo {
        background-color: var(--ecm-gray-100);
        border-radius: var(--ecm-border-radius);
    }
    /* applied when picking a template style in new/edit site form */
    .template-label {
        opacity: .7;
        transition: all .3s ease-in-out;
    

	&.active {
	            opacity: 1;
	            outline: 4px solid var(--ecm-primary);

	}

	&.active span {
	                display: inline-block !important;

	}
}
    /* ADMIN - CONTENT MANAGEMENT */
    /* Different styles of the content publish button according to it's function */
    .ecm-contents-grid .publish i {
        color: var(--ecm-green);
    }

    .ecm-contents-grid .submit-to-publish i {
        color: var(--ecm-warning);
    }

    .ecm-contents-grid .unpublish i {
        transform: rotate(180deg);
        color: var(--ecm-danger);
    }

    .ecm-contents-grid .publish:hover i,
    .ecm-contents-grid .submit-to-publish:hover i,
    .ecm-contents-grid .unpublish:hover i {
        color: white;
    }