@color_dark:			#000000; // 0, 0, 0
@color_light:			#ffffff; // 255, 255, 255
@color_highlight:		#ffcc00; // 255, 204, 0
@color_highlight_dark:	#e4b822; // 228, 184, 34
@color_link:			#0066ff; // 0, 102, 255
@color_red:				#f44336; // 244, 67, 54
@color_red_dark:		#a22022; // 162, 32, 34
@color_green:			#4caf50; // 76, 175, 80
@color_green_dark:		#064a36; // 6, 74. 54
@color_black: 			#000000; // 0, 0, 0
@text_main:				1.4rem;
@text_sub:				1.1rem;
@fade_min:				50%;
@fade_next:				20%;
@border_radius:			4px;
@footer_height:			42px;

.cdc-cover {
	
	background-color: transparent; 
	position: fixed; 
	width: 100%; 
	height: 100%;
	z-index: -1;
	
}

.cdc-margins-whole-page { margin-top: 2rem }

.cdc-image {
	
	display: inline-block;
	padding-bottom: 1rem;
	
	&.casadochoro { margin-left: -1.5rem; }
	
	&.epm { margin-left: 3rem; }
	
	&.aluno {
		
		padding: 0;
		width: 100%;
		background-color: fade(@color_light, 10%); 
		border-radius: @border_radius;
		-webkit-box-shadow: 0 0 20px 10px fade(@color_dark, 40%);
		   -moz-box-shadow: 0 0 20px 10px fade(@color_dark, 40%);
		        box-shadow: 0 0 20px 10px fade(@color_dark, 40%);
				
		&.no-photo { height: 100px; }

	}
	
}

.cdc-title {
	
	text-align: center;
	color: fade(@color_dark, @fade_min);
	
	& .inscricoes { 
		
		font-size: 2rem;
		font-weight: 300;
		text-transform: uppercase;
		
	}
	
	& .semester { 
	
		font-size: 2.2rem;
		font-weight: 500; 
	
	}
	
	&-cursos {
	
		&.titulo {
		
			font-size: 3rem;
			font-weight: 800;
			color: fade(@color_dark, 100%);
		
		}
		
		&.subtitulo {
			
			margin-top: -.5rem;
			font-size: 1.4rem;
			font-weight: 300;
			color: fade(@color_dark, @fade_min + @fade_next);
		
		}

	}
	
}

.cdc-page-header {
	
	position: static; 
	float: right; 
	padding-top: 0; 
	font-size: 1.2rem; 
	font-weight: 500; 
	color: fade(@color_dark, @fade_min);
	text-align: right; 
	line-height: 1.4rem;
	
	& .inscricoes { 
	
		font-weight: 300;
		text-transform: uppercase;
		
	} 
	
	&.float-left { float: left; }
	
}

.cdc-infobox {
	
	padding: 1.5rem 1.5rem 2rem 1.5rem; 
	border: 1px solid fade(@color_green, 40%);
	border-radius: @border_radius;
	background-color: fade(@color_green, 20%);
	color: @color_green_dark; 
	font-size: @text_sub;
	// font-weight: 300;

	& .welcome { 
	
		font-weight: 300;
		font-size: 1.8rem; 
		
	}
	
	& .warning {
	
		display: block;
		padding: 1rem;
		background-color: fade(@color_light, 40%);
		color: fade(@color_red_dark, 100%);
		border: 2px solid fade(@color_red_dark, 100%);;
		border-radius: @border_radius;
		
	}
	
	& a.link {
			
		color: inherit;
		
		&, &:visited, &:hover, &:active { border-bottom: 1px solid fade(@color_green_dark, 20%); }
		
		&:hover { font-weight: 500; }
	
	}
	
	&.margin-top-bottom { margin: .5rem 0; }
	
	&.nome {
		
		font-weight: 500;
		font-size: 1.8rem;
		text-align: center;
	
	}
		
	&.termo {
		
		padding: 0;
		border: none;
		background-color: transparent;
		color: fade(@color_dark, @fade_min);
		
		& a {
			
			color: fade(@color_dark, @fade_min + @fade_next);
			
			&, &:visited, &:hover, &:active { 
				
				border-bottom: 1px solid fade(@color_link, 30%);
				box-shadow: 0 -4px 0 fade(@color_link, 30%) inset;
				
			}
			
			&:hover { font-weight: 500; }
			
		}
	
	}
	
	&.voucher {

		padding: 1rem;
		border: 1px solid fade(@color_highlight, 40%);
		background-color: fade(@color_highlight, 20%);
		color: @color_highlight_dark; 
		font-weight: 500;
		text-align: center;
		margin-bottom: 1rem;
		
		& input {
			
			background-color: fade(@color_light, 50%) !important;
			border-bottom: none !important;
			
		}
		
		& .note {
			
			font-size: @text_sub;
			text-align: left;
			color: @color_red;
			
		}
		
		&-pergunta {
		
			padding: 1rem 0 1rem .5rem;
			border: none;
			background-color: transparent;
			color: fade(@color_dark, @fade_min);
			font-size: @text_main;
			
			& a {
				
				color: fade(@color_dark, @fade_min + @fade_next);
				
				&, &:visited, &:hover, &:active { 
					
					border-bottom: 1px solid fade(@color_link, 30%);
					box-shadow: 0 -4px 0 fade(@color_link, 30%) inset;
					
				}
				
				&:hover { font-weight: 500; }
				
			}
		
		}
		
	}
	
	&.avaliacao { 

		padding: 1rem;
		font-size: @text_main;
		text-align: left;
		line-height: 1.15;
		margin: 0 .5rem;
		border: 1px solid fade(@color_light, 90%);
		background-color: fade(@color_light, 70%);
		color: fade(@color_dark, 100%);
		
		&.comentarios { color: fade(@color_dark, 30%); }
		
		&.label {
		
			padding: 0 .5rem .25rem 0;
			font-size: 1rem;
			text-align: left;
			border: none;
			background-color: transparent;
			color: inherit;
			
			& .nivel { background-color: fade(@color_dark, 20%); }
			
			& .curso,
			& .nivel { font-weight: 500; }
			
			& .linha {

				&.superior {
				
					padding-top: 0;
					margin-bottom: .5rem;
					border-bottom: 1px solid fade(@color_light, 20%);
				
				}
				
				&.inferior {
				
					padding-top: 1.5rem;
					margin-bottom: 2.5rem;
				
				}
			
			}
		}
		
	}
	
	&.preco { 

		padding: 1rem;
		font-size: 3rem;
		text-align: center;
		margin: 0 .5rem;
		
		& .small { font-size: @text_sub; }
		
		&.ba { font-size: 2rem; }
		
		&.zero { background-color: fade(@color_green, 40%); }
		
		&.diferenca {
		
			border: 1px solid fade(@color_highlight, 40%);
			background-color: fade(@color_highlight, 20%); 
			color: @color_highlight_dark;
		
		}
		
		&.pago {
			
			border: 1px solid fade(@color_light, 20%);
			background-color: fade(@color_light, 10%);
			color: fade(@color_light, 100%);
		}
		
		&.esperado {
			
			border: 1px solid fade(@color_light, 20%);
			background-color: fade(@color_light, 40%);
			color: fade(@color_dark, @fade_min);
			font-weight: 500;
		}
		
		&.sinal {
		
			border: none;
			background-color: transparent;
			color: inherit;
		}
		
		&.diferenca,
		&.pago,
		&.esperado,
		&.sinal { font-size: 2rem; }
		
		&.label {
		
			padding: 0 .5rem .25rem 0;
			font-size: 1rem;
			text-align: left;
			border: none;
			background-color: transparent;
			color: inherit;
		}
	}
	
	&.gray { 
		
		border: 1px solid fade(@color_dark, 20%);
		background-color: fade(@color_dark, 10%);
		color: fade(@color_dark, @fade_min + @fade_next);
		margin: 0;
		
	}

	&.alerta {
		
		padding: 1rem;
		border: 1px solid fade(@color_highlight, 40%);
		background-color: fade(@color_highlight, 20%); 
		color: @color_highlight_dark; 
		font-weight: 500;
		text-align: center;
		
	}
	
	&.urgente {
		
		padding: 1rem;
		border: 1px solid fade(@color_red_dark, 40%);
		background-color: fade(@color_red_dark, 20%); 
		color: @color_red_dark;
		
		& a.link {
		
			color: inherit;
			font-size: 1.4rem;
			
			&, &:visited, &:hover, &:active { border-bottom: 1px solid fade(@color_red_dark, 20%); }
			
			&:hover { font-weight: 500; }
		
		}
		
	}
	
	&.manutencao {
		
		padding: 1rem;
		border: 1px solid fade(@color_red, 40%);
		background-color: fade(@color_red, 20%); 
		color: @color_red_dark; 
		
	}
	
	&.pacote {
		
		padding: .5rem; 
		border: 1px solid fade(@color_highlight, 40%);
		background-color: fade(@color_highlight, 20%);
		color: @color_highlight_dark; 
		font-weight: 500;
		text-align: center;
		margin-bottom: 1rem;
		
	}
	
	&.pagamento {
		
		padding: 0;
		border: none;
		background-color: transparent;
		color: fade(@color_dark, @fade_min);
		font-size: @text_sub;
		
	}
	
	&.combobox { 
	
		padding: 2.5rem 1.5rem .5rem 1.5rem;
	
		& select {
		
			background-color: fade(@color_light, 40%);
			border-bottom: 1px solid fade(@color_green, 40%);
		}
	
	}
	
	&.turma { 
	
		padding: 1.5rem 1.5rem .5rem 1.5rem;
		border: 1px solid fade(@color_dark, 20%);
		background-color: fade(@color_dark, 10%);
		color: fade(@color_dark, @fade_min + @fade_next);
	
		& select {
		
			background-color: fade(@color_light, 40%);
			border-bottom: 1px solid fade(@color_dark, 40%);
		}
		
		& input[type=text] { background-color: fade(@color_light, 40%); }


		& input:not([type]):disabled, 
		& input:not([type])[readonly="readonly"], 
		& input[type=text]:not(.browser-default):disabled, 
		& input[type=text]:not(.browser-default)[readonly="readonly"] { 
		
			font-weight: 500;
			color: fade(@color_dark, @fade_min);
			border-bottom: 1px dotted fade(@color_dark, 40%);
			
		}
		
		& input:not([type]):disabled+label,
		& input:not([type])[readonly="readonly"]+label,
		& input[type=text]:not(.browser-default):disabled+label,
		& input[type=text]:not(.browser-default)[readonly="readonly"]+label { color: fade(@color_dark, @fade_min + @fade_next); }
		
		& input[type=text].valid:not(.browser-default):focus,
		& input[type=text]:not(.browser-default):focus:not([readonly]),
		& input[type=password].valid:not(.browser-default):focus,
		& input[type=password]:not(.browser-default):focus:not([readonly]) { 
		
			border-bottom: 1px solid fade(@color_link, 30%);
			background-color: fade(@color_light, 60%);
		
		}
	
	}
	
	&-child {
		
		width: 20%;
		margin:  -8px auto 8px 32px;
		padding: 1rem 1.5rem;
		background-color: fade(@color_light, 10%);
		color: fade(@color_light, @fade_min + @fade_next);
		box-shadow: 0px 0.5rem 1rem fade(@color_dark, 20%) inset;
		border-radius: 0 0 @border_radius @border_radius;
		
		& a.link {
			
		color: inherit;
		
			&, &:visited, &:hover, &:active { border-bottom: 1px solid fade(@color_dark, 20%); }
			
			&:hover { font-weight: 500; }
		
		}
		
		&.status {
		
			width: 100%;
			margin: 0;
			padding: 0 2.5rem;
			background-color: transparent;
			color: fade(@color_dark, @fade_min + @fade_next);
			box-shadow: none;
			border-radius: 0;
		
		}
	
	}

}

.cdc-color {
	
	&-green { 
	
		color: @color_green; 

		&-dark { 
		
			color: @color_green_dark; 

			&-faded { color: fade(@color_green_dark, 40%) !important; }
		
		}
	
	}
	
	&-red {	
		
		color: @color_red;
		
		&-dark { color: @color_red_dark; }
		
	}
	
	&-highlight {
		
		color: @color_highlight;
		
		&-dark { color: @color_highlight_dark; }
		
	}
	
	&-dark {
		
		color: @color_dark;
		
		&-90 { color: fade(@color_dark, 90%); }
		
		&-80 { color: fade(@color_dark, 80%); }
		
		&-70 { color: fade(@color_dark, 70%); }
		
		&-60 { color: fade(@color_dark, 60%); }
		
		&-50 { color: fade(@color_dark, 50%); }
				
		&-40 { color: fade(@color_dark, 40%); }
		
		&-30 { color: fade(@color_dark, 30%); }
				
		&-20 { color: fade(@color_dark, 20%); }
		
		&-10 { color: fade(@color_dark, 10%); }
	}
	
	&-light {
		
		color: @color_light;
		
		&-90 { color: fade(@color_light, 90%); }
		
		&-80 { color: fade(@color_light, 80%); }
		
		&-70 { color: fade(@color_light, 70%); }
		
		&-60 { color: fade(@color_light, 60%); }
		
		&-50 { color: fade(@color_light, 50%); }
				
		&-40 { color: fade(@color_light, 40%); }
		
		&-30 { color: fade(@color_light, 30%); }
				
		&-20 { color: fade(@color_light, 20%); }
		
		&-10 { color: fade(@color_light, 10%); }
	}
}

.cdc-font {
	
	&-size {
	
		&.main { font-size: @text_main; }

		&.sub { font-size: @text_sub; }
		
		&.small { font-size: 1rem; }
	
	}
	
	&-weight {
	
		&.light { font-weight: 300; }
		
		&.regular { font-weight: 400; }
		
		&.semibold { font-weight: 500; }
		
		&.extrabold { font-weight: 800; }
	
	}
	
}

.cdc-text-align {

	&-left { text-align: left; }
	
	&-center { text-align: center; }
	
	&-right { text-align: right; }

}

.cdc-border {

	&-top { border-top: 1px solid fade(@color_light, 10%); }
	
	&-bottom { border-bottom: 1px solid fade(@color_light, 10%); }
	
	&-left { border-left: 1px solid fade(@color_light, 10%); }
	
	&-right { border-right: 1px solid fade(@color_light, 10%); }

}

.cdc-checkbox {
	
	margin-top: .5rem;
	
	font-size: @text_main;
	
	&.small { font-size: @text_sub; }
	
	& .checked { color: @color_green; }
	
	& .unchecked { color: fade(@color_dark, 20%); }
	
	& .texto { 
	
		padding-left: .5rem; 
		
		&.small { font-size: @text_sub; }
		
		& .light {color: fade(@color_dark, @fade_min); }
		
	}
	
	& a,
	& a:hover {
	
		border-bottom: none;
		box-shadow: none;
	
	}
}

.cdc-input {
	
	margin: 0 0 1rem 0;
	
	& textarea,
	& input[type=text],
	& input[type=email],
	& input[type=password],
	& input[type=number],
	& input[type=text].valid:not(.browser-default),
	& input[type=password].valid:not(.browser-default)	{
	
		box-sizing: border-box;
		padding: 0 1rem;
		margin: 0;
		color: inherit;
		font-size: 1.6rem;
		border-bottom: 1px solid fade(@color_dark, 40%);
		background-color: fade(@color_dark, 10%);
		
	}
	
	& input[type=text].valid:not(.browser-default):focus,
	& input[type=text]:not(.browser-default):focus:not([readonly]),
	& input[type=password].valid:not(.browser-default):focus,
	& input[type=password]:not(.browser-default):focus:not([readonly]) { 
	
		border-bottom: 1px solid fade(@color_link, 30%);
		background-color: fade(@color_dark, 5%);
	
	}
	
	& input[type=text]:not(.browser-default):disabled {
	
		color: fade(@color_dark, 40%);;
		background-color: fade(@color_dark, 5%);
		border-bottom: 1px solid fade(@color_dark, 40%);
	
	}
	
	&.numero input[type=text] { text-align: right; }
	
	& textarea { 
	
		height: 10rem;
		border: none;
		outline: none;
		
		&:focus { 
			
			outline: 1px solid fade(@color_link, 30%);
			background-color: fade(@color_dark, 5%);
		}
		
		&.small { height: 5rem; }

	}
	
	& .textarea-froala {
	
		font-size: @text_sub;
	
		&.curso { height: auto; } // 100vh;
		
		&.avaliacao { height: auto; } //20vh;
		
		&.email { height: auto; } //20vh;
	
	}
	
	& label { left: 0; }
	
	&-label {
		
		padding-bottom: .25rem;
		font-size: 1rem;
		color: inherit;
	
	}
	
	&-comment {
		
		height: 2rem; 
		margin-top: -.5rem; 
		font-size: 1rem; 
		color: fade(@color_dark, @fade_min);
		
		&.photo {
			
			height: 1.5rem; 
			margin-top: 1rem; 
			
		}
	
	}
	
	&-ba {
	
		& input[type=text] { 
		
			box-sizing: border-box;
			padding: 0 0 0 1rem;
			background-color: fade(@color_light, 5%); 
			
		}
	
		& input:not([type]):disabled, 
		& input:not([type])[readonly="readonly"], 
		& input[type=text]:not(.browser-default):disabled, 
		& input[type=text]:not(.browser-default)[readonly="readonly"] { 
		
			color: fade(@color_light, @fade_min);
			border-bottom: 1px dotted fade(@color_light, 40%);
			background-color: fade(@color_light, 5%);
			
		}
		
		& input:not([type]):disabled+label,
		& input:not([type])[readonly="readonly"]+label,
		& input[type=text]:not(.browser-default):disabled+label,
		& input[type=text]:not(.browser-default)[readonly="readonly"]+label { color: fade(@color_light, 100%); }
	
		padding: 0 .75rem;
		
		&.title {
		
			padding: 0;
			font-size: 2rem; 
			font-weight: 500;
		
		}
		
		&.subtitle {
		
			padding: 0;
			font-size: 1.2rem; 
			font-weight: 300;
						
			& a {
			
				color: fade(@color_light, 40%);
		
				&, &:visited, &:hover, &:active { 
					
					border-bottom: none;
					box-shadow: none;
					
				}
		
				&:hover { color: fade(@color_light, 100%); }
			
			}
		
		}		
	
		&.numero input[type=text] { text-align: right; }
		
		&.big { 
		
			& .padding-right { padding-right: 1rem; }
		
			& input[type=text],
			& input[type=text].valid:not(.browser-default):focus,
			& input[type=text]:not(.browser-default):focus:not([readonly]) { 
			
				font-size: 2rem;
				font-weight: 300;
				border-bottom: none;
				background-color: fade(@color_light, 10%);
				padding: 0 1rem;
				box-sizing: border-box;
			}
			
			margin: 0;
			
		}
		
		&.alerta {
		
			font-size: 1rem;
			color: fade(@color_light, 100%);
			padding-left: 1rem;
		
		}
		
		& label { top: -1.75rem; }
		
		&.toolbar {
		
			width: 8rem;
			margin: 0;
			padding: 0 0 0 .5rem;
		
			& input[type=text] { 
			
				padding: 0;
				text-align: center; 
				
			}
		
		}
		
		&.icon,
		& .icon {
			
			& .input-right {
			
				display: inline-block;
				position: absolute;
				top: 0;
				right: 0;
				font-size: 2rem;

			}
			
			& a:hover {
				
				border-bottom: none;
				box-shadow: none;
				cursor: pointer;
			
			}
			
		}
		
		& .icon { padding-right: 4.5rem; }
		
		& .comment {
		
			padding-top: .25rem;
			font-size: 1rem;
			color: fade(@color_light, @fade_min + @fade_next);
			
			& a {
			
				color: inherit;
		
				&, &:visited, &:hover, &:active { 
					
					border-bottom: 1px solid fade(@color_light, 50%);
					box-shadow: none;
					
				}
		
				&:hover { font-weight: 500; }
			
			}
		
		}
		
	}

	&.disabled-green {
	
		& input[type=text]:not(.browser-default):disabled {
	
			color: inherit;
			background-color: fade(@color_light, 40%);
			border-bottom: 1px solid fade(@color_green, 40%);
	
		}
	
	}
	
	&.margin-zero { margin: 0; }

}

.cdc-select {

	height: ~"calc(3rem + 1px)"!important;
	font-size: 1.6rem;
	background-color: fade(@color_light, 5%);
	padding: 0 0 0 1rem;
	border: none;
	border-bottom: 1px solid fade(@color_light, 40%);
	border-radius: 0;

	&:focus { outline: none; }
	
	&.dark {
	
		background-color: fade(@color_dark, 10%);
		border-bottom: 1px solid fade(@color_dark, 40%);
	
	}

}

.cdc-option { 

	&.all { 
		
		background-color: fade(@color_dark, 20%) !important;
		color: fade(@color_dark, @fade_min + @fade_next) !important;
		font-weight: 500;
		
	}

}

.cdc-anchor {
		
		& a {
			
			color: fade(@color_dark, @fade_min + @fade_next);
			
			&, &:visited, &:hover, &:active { 
				
				border-bottom: 1px solid fade(@color_link, 30%);
				box-shadow: 0 -2px 0 fade(@color_link, 30%) inset;
				
			}
			
			&:hover { font-weight: 500; }
			
		}

}

.cdc-table {
	
	color: @color_light;
	font-size: 1rem;
	background-color: transparent;
	border-bottom: 1px solid fade(@color_light, 20%) !important;
	
	&.hover tbody tr:hover {
	
		background-color: fade(@color_dark, 30%) !important;
		color: inherit;
		cursor: pointer;
		
	}
	
	& > thead,
	& > thead > tr > th { 
		
		border-top: 1px solid fade(@color_light, 20%); 
		border-bottom: 1px solid fade(@color_light, 20%);
		background-color: fade(@color_dark, 20%) !important;
		color: fade(@color_light, @fade_min);
		
	}
	
	& > tbody > tr > td { border-bottom: 1px solid fade(@color_light, 5%); }
	
	& > tbody > tr:nth-child(odd),
	& > tbody > tr:nth-child(even) { background-color: fade(@color_dark, 20%); }
	
	&-page {
	
		display: inline-block;
		font-size: 1.2rem;
		padding: 0 0 .5rem 1.5rem;
		
	}
	
	&-white {
	
		color: @color_dark;
		font-size: 1rem;
		background-color: transparent;
		border-top: 1px solid fade(@color_dark, 40%) !important;
		border-bottom: 1px solid fade(@color_dark, 40%) !important;
	
		&-status {
		
			border-radius: @border_radius;
			padding: .5rem;
		
		}
	
		&.hover tbody tr:hover {
	
			background-color: fade(@color_dark, 10%) !important;
			color: inherit;
			cursor: pointer;
			
		}
		
		& > thead,
		& > thead > tr > th { 
			
			border-top: 1px solid fade(@color_dark, 20%); 
			border-bottom: 1px solid fade(@color_dark, 20%);
			background-color: fade(@color_dark, 5%) !important;
			color: fade(@color_dark, @fade_min);
			
		}
		
		& > thead th.sorting:after { color: inherit !important; }
		
		& > thead th.sorting_asc:after { color: fade(@color_red, 100%) !important; }
		
		& > thead th.sorting_desc:after { color: fade(@color_red, 100%) !important; }
		
		& > tbody > tr > td { border-bottom: 1px solid fade(@color_dark, 10%); }
		
		& > tbody > tr > td.details-control { color: fade(@color_dark, 20%); }
		
		& > tbody > tr:nth-child(odd),
		& > tbody > tr:nth-child(even) { background-color: fade(@color_dark, 5%); }

	}

}

.cdc-override {

	&.datatables {
	
		&.no-pager { margin-bottom: 4rem; }
	
		.dataTables_wrapper .dataTables_paginate {
		
			color: fade(@color_dark, 20%);
			float: none;
			text-align: center;
			
			& .paginate_button { color: inherit !important; }
		
		}
		
	}

}

.cdc-display {
	
	&-table { 
		
		display: table;
		width: 100%;
		padding: 0 1rem;
		
		&.border-bottom {
			
			padding: 0 1rem 1rem .5rem;
			border-bottom: 1px solid fade(@color_dark, 10%);
			
		}
		
		&.padding-zero { padding: 0; }
		
		
	}
	
	&-table-row { 
	
		display: table-row;
		width: 100%;
		
	}
	
	&-table-cell { 
		
		display: table-cell;
		width: 100%;
		
		&.width { 
		
			&-min { width: 1px; }
			
			&-auto { width: auto; }
			
			&-2 { width: calc(100% / 2); }
			
			&-3 { width: calc(100% / 3); }
			
			&-4 { width: calc(100% / 4); }
			
			&-5 { width: calc(100% / 5); }
			
			&-6 { width: calc(100% / 6); }
			
			&-10 { width: 10%; }
			
			&-40 { width: 40%; }
						
		}
		
		&.padding-left { 
		
			padding-left: .5rem; 
			
			&.more { padding-left: 1.5rem; }
		
		}
		
		&.width-small { width: 1rem; }
		
		&.padding-right { padding-right: 2rem; }
		
		&.transparent { color: transparent; }
		
		&.text-align-center { text-align: center; } 
		
		&.nowrap { white-space: nowrap; };
		
		&.fake {
		
			font-size: 1.6rem;
			background-color: fade(@color_light, 40%);
			border-bottom: 1px solid fade(@color_green, 40%);
			padding: .25rem 0;
		
		}

	}
	
}

.cdc-pergunta {
	
	padding-bottom: .5rem;
	font-size: @text_main;
	
	& .texto { color: fade(@color_dark, @fade_min + @fade_next); }
	
	& .numero { color: fade(@color_dark, 20%); }
	
	&.padding-top { padding-top: 1rem; }
	
	&-comentario {
		
		margin-top: -1rem;
		padding-bottom: .5rem;
		font-size: @text_main;
		
		& .texto { 
			
			font-size: 1.1rem;
			color: fade(@color_dark, @fade_min);
			
			& a {
				
				color: fade(@color_dark, @fade_min + @fade_next);
				
				&, &:visited, &:hover, &:active { 
					
					border-bottom: 1px solid fade(@color_link, 30%);
					box-shadow: 0 -4px 0 fade(@color_link, 30%) inset;
					
				}
				
				&:hover { font-weight: 500; }
			
			}
			
		}
	
		& .numero { color: fade(@color_dark, 0%); }
		
	}
	
}

.cdc-separator { 

	margin-top: 2rem;

	&.zero { margin-top: 0; }
	
	&.half { margin-top: 1rem; }
	
	&.double { margin-top: 4rem; }
	
	&.line {
		
		margin-top: .5rem;
		padding-bottom: .5rem;
		border-top: 1px solid rgba(0, 0, 0, .1);
	
	}
	
	&-padding {
		
		padding-top: 2rem; 
		
		&.half { padding-top: 1rem; }
	}
	
}

.cdc-buttons-bar { 
	
	margin-top: 2rem !important;
	padding-top: 1rem !important;
	border-top: 1px solid fade(@color_dark, 10%);
	
	& .note { margin-top: -.5rem; }

}

.cdc-button-text {
	
	font-weight: 500;
	
	&.green {
		
		background-color: fade(@color_green, 20%) !important;
		color: @color_green_dark;
		
	}
	
	&.gray {
	
		background-color: fade(@color_light, 40%);
		color: fade(@color_dark, 40%);
	
	}
	
	&.gray_inverse {
	
		background-color: fade(@color_dark, 10%);
		color: fade(@color_dark, 80%);
	
	}
	
}

.cdc-link-no-change {
	
	&, &:visited, &:hover, &:active {
		
		text-decoration: none;
		font-weight: inherit;
		color: inherit;
		
	}
}

.cdc-link-bolt {

	&, &:visited, &:hover, &:active {
		
		text-decoration: none;
		font-weight: inherit;
		color: fade(@color_light, @fade_min);
		
	}
	
	&:hover { color: fade(@color_highlight, 100%); }
	
	&.on { color: fade(@color_highlight, 100%); }
	

}

.cdc-canvas {
	
	width: 320px;
	
	background-color: fade(@color_black, 5%); 
	border: 20px solid fade(@color_black, 20%);
	border-radius: @border_radius;
	
	&-button {
		
		width: 100%;
		margin-top: 1rem; 
		text-align: center;
		
		& > a {
			
			width: 6rem; 
			height: 4.5rem; 
			padding: 1rem; 
			color: fade(@color_black, 40%);
			
			&, &:visited, &:hover, &:active { background-color: fade(@color_black, 5%) !important; }
			
			& > i { font-size: 1.2rem; }
			
		}
		
		& > a#video {
			
			color: fade(@color_highlight_dark, 70%);
			&, &:visited, &:hover, &:active { background-color: fade(@color_highlight, 20%) !important; }
			
			& > i { font-size: 3rem; }
			
		}
		
		& > a#submit {
			
			width: auto;
			color: fade(@color_green, 70%);
			&, &:visited, &:hover, &:active { background-color: fade(@color_green, 20%) !important; }
			
			& > i { font-size: 3rem; }
			
		}
		
		& > a#submit_disabled {
			
			cursor: default;
			width: auto;
			color: fade(@color_dark, 10%);
			&, &:visited, &:hover, &:active { background-color: fade(@color_dark, 5%) !important; }
			
			& > i { font-size: 3rem; }
			
		}
		
		& > a#camera {
			
			color: fade(@color_green, 70%);
			&, &:visited, &:hover, &:active { background-color: fade(@color_green, 20%) !important; }
			
			& > i { font-size: 3rem; }
			
		}
		
		& > a#clear {
			
			color: fade(@color_red, 70%);
			&, &:visited, &:hover, &:active { background-color: fade(@color_red, 20%) !important; }
			
			& > i { font-size: 2rem; }
			
		}
		
	}
	
	&-container {
		
		width: 100%; 
		margin-top: 1rem; 
		text-align: center;
		
	}
	
}

.cdc-dropdown-content {
	
	& li { 
	
		text-align: right; 
		
		& > a { 
			
			padding: 1rem 1rem 1rem 1.5rem; 
			
			& div {
				
				display: inline-block;
				
				&.text { 
				
					font-size: 1rem; 
					padding-right: .5rem;
					
				}
				
				&.icon { 
					
					width: 1rem; 
					font-size: 1.2rem;
				
					& i { color: fade(@color_black, 30%); }
				
				}
				
			}
		
		}
		
	}
}

.cdc-iframe {
	
	/* REF.: https://stackoverflow.com/questions/38026714/youtube-embed-dynamic-size-with-min-and-max-size */
	
	position: relative;
	overflow: hidden;
	height: 0;
	padding-bottom: 56.25%;
	margin: 2rem 0;
	text-align: center;
	
	& embed,
	& iframe {
		
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		max-width: 100%;
		border: 1rem solid fade(@color_green, 20%);
		border-radius: @border_radius;

	}
}

.cdc-body {

	&.cursos {
	
		height: 100%;
		width: 100%;
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: column;	
		background-color: #fff;
	
	}

}

.cdc-header { height: auto; }

.cdc-main {
	
	&.cursos { flex: 1 0 auto; }

}

.cdc-footer {
	
	height: @footer_height;
	background-color: fade(@color_dark, 70%);
	font-weight: 300;

	& .copyright {

		color: @color_light;
		text-align: center;
		line-height: @footer_height;
		
	}
	
	&-padding-zero { padding: 0 !important; }
	
}

.cdc-col {

	&.cursos { 
	
		padding: .5rem 1rem;
		/* background-color: fade(@color_dark, 5%); */
		
	}

}

.cdc-froala {

	font-size: @text_sub;
	font-weight: 300;
	color: fade(@color_dark, 70%);
	
	&-icon { 
		
		font-size: 1.2rem;
		color: @color_red;
		
	}

}

.cdc-logout {

	paadding-left: 1rem;

	& a {
	
		color: inherit;

		&, &:visited, &:hover, &:active { 
			
			border-bottom: 1px solid fade(@color_link, 30%);
			box-shadow: 0 -4px 0 fade(@color_link, 30%) inset;
			
		}

		&:hover { font-weight: 500; }
	
	}

}

.cdc-flags {
	
	text-align: center;
	color: fade(@color_dark, @fade_min);
	
	& img { 
	
		height: 24px;
		margin: 0 .25rem;
		border: solid 1px fade(@color_dark, 20%);
		
	}
	
	&.small {
	
		text-align: right;
	
		& img { 
			
			height: 16px; 
			margin: .25rem .125rem 0 .125rem;
		}
	
	}
	
}

.cdc-slider {

	// MATERIALIZE OVERRIDE

	position: relative;
	
	input[type=range] {
		
		cursor: pointer;
		position: relative;
		background-color: transparent;
		border: none;
		outline: none;
		width: 100%;
		margin: .5rem 0;
		padding: 0;
		top: .4rem;
		-webkit-appearance: none;
		
		& + .thumb { 
		
			cursor: pointer;
			position: absolute;
			top: 0;
			left: 0;
			border: none;
			height: 0;
			width: 0;
			border-radius: 50%;
			background-color: fade(@color_green, 0%);
			margin-left: 7px;
			-webkit-transform-origin: 50% 50%;
				  transform-origin: 50% 50%;
			-webkit-transform: rotate(-45deg);
				  transform: rotate(-45deg);
				  
				  
			& .value {
			
				display: block;
				width: 30px;
				text-align: center;
				color: fade(@color_green, 100%);
				font-size: 0;
				-webkit-transform: rotate(45deg);
					  transform: rotate(45deg);
			
			}
			
			&.active { 
			
				border-radius: 50% 50% 50% 0; 
				
				& .value {
				
					color: transparent;
					margin-left: 0;
					margin-top: 0;
					font-size: 0;
				
				}
			}
			
		}
		
		&:focus { 
		
			outline: none; 
			
			&::-webkit-slider-runnable-track { background: fade(@color_dark, 10%); }
			
			&::-webkit-slider-thumb { background: fade(@color_green, 100%); }
			
			&::-moz-range-track { background: fade(@color_dark, 10%); }
			
			&::-ms-fill-lower { background: #888; }

			&::-ms-fill-upper { background: #ccc; }

			
		}
		
		&::-webkit-slider-runnable-track {
			
			height: 1.4rem;
			background: fade(@color_dark, 5%);
			border: none;
			border-radius: .25rem;
			
		}

		&::-webkit-slider-thumb {
			
			-webkit-appearance: none;
			border: none;
			height: 1.4rem;
			width: 1.4rem;
			border-radius: .25rem;
			background-color: fade(@color_green, 50%);
			-webkit-transform-origin: 50% 50%;
				  transform-origin: 50% 50%;
			margin: 0 0 0 0;
			-webkit-transition: .3s;
			transition: .3s;
			
		}
		
		&::-moz-range-track {
		
			height: 1.4rem;
			background: #ddd;
			border: none;
			
		}

		&::-moz-range-thumb {
			
			border: none;
			height: 1.4rem;
			width: 1.4rem;
			border-radius: .25rem;
			background: fade(@color_green, 100%);
			margin-top: 0;
			
		}

		&::-moz-focusring {
			outline: none;
			outline-offset: 0;
		}
		
		&::-ms-track {
			
			height: 3px;
			background: transparent;
			border-color: transparent;
			border-width: 6px 0;
			color: transparent;
			
		}

		&::-ms-fill-lower { background: #777; }

		&::-ms-fill-upper { background: #ddd; }

		&::-ms-thumb {
			
			border: none;
			height:1.4rem;
			width: 1.4rem;
			border-radius: .25rem;
			background: fade(@color_green, 100%);
			
		}	
	}
	
	/*
	
	input[type=range],
	input[type=range] + .thumb { cursor: pointer; }

	input[type=range] {
		position: relative;
		background-color: transparent;
		border: none;
		outline: none;
		width: 100%;
		margin: .5rem 0;
		padding: 0;
		top: .4rem
	}

	input[type=range]:focus { outline: none; }

	input[type=range] + .thumb {
		position: absolute;
		top: 0;
		left: 0;
		border: none;
		height: 0;
		width: 0;
		border-radius: 50%;
		background-color: fade(@color_green, 0%);
		margin-left: 7px;
		-webkit-transform-origin: 50% 50%;
			  transform-origin: 50% 50%;
		-webkit-transform: rotate(-45deg);
			  transform: rotate(-45deg);
	}

	input[type=range] + .thumb .value {
		display: block;
		width: 30px;
		text-align: center;
		color: fade(@color_green, 100%);
		font-size: 0;
		-webkit-transform: rotate(45deg);
			  transform: rotate(45deg);
	}

	input[type=range] + .thumb.active { border-radius: 50% 50% 50% 0; }

	input[type=range] + .thumb.active .value {
		color: transparent;
		margin-left: 0;
		margin-top: 0;
		font-size: 0;
	}

	input[type=range] { -webkit-appearance: none; }

	input[type=range]::-webkit-slider-runnable-track {
		height: 1.4rem;
		background: fade(@color_dark, 5%);
		border: none;
		border-radius: .25rem;
	}

	input[type=range]::-webkit-slider-thumb {
		-webkit-appearance: none;
		border: none;
		height: 1.4rem;
		width: 1.4rem;
		border-radius: .25rem;
		background-color: fade(@color_green, 50%);
		-webkit-transform-origin: 50% 50%;
			  transform-origin: 50% 50%;
		margin: 0 0 0 0;
		-webkit-transition: .3s;
		transition: .3s;
	}

	input[type=range]:focus::-webkit-slider-runnable-track { background: fade(@color_dark, 10%); }

	input[type=range]:focus::-webkit-slider-thumb { background: fade(@color_green, 100%); }

	input[type=range] { border: none; }

	input[type=range]::-moz-range-track {
		height: 1.4rem;
		background: #ddd;
		border: none;
	}

	input[type=range]::-moz-range-thumb {
		border: none;
		height: 1.4rem;
		width: 1.4rem;
		border-radius: .25rem;
		background: fade(@color_green, 100%);
		margin-top: 0;
	}

	input[type=range]:-moz-focusring {
		outline: none;
		outline-offset: 0;
	}

	input[type=range]:focus::-moz-range-track { background: fade(@color_dark, 10%); }

	input[type=range]::-ms-track {
		height: 3px;
		background: transparent;
		border-color: transparent;
		border-width: 6px 0;
		color: transparent;
	}

	input[type=range]::-ms-fill-lower { background: #777; }

	input[type=range]::-ms-fill-upper { background: #ddd; }

	input[type=range]::-ms-thumb {
		border: none;
		height:1.4rem;
		width: 1.4rem;
		border-radius: .25rem;
		background: fade(@color_green, 100%);
	}

	input[type=range]:focus::-ms-fill-lower { background: #888; }

	input[type=range]:focus::-ms-fill-upper { background: #ccc; }

	*/

}


// DNMCA OVERRIDE
// ==============
.dnmca-btn-flat { border-radius: @border_radius; }

.dnmca-link {

	&,
	&:visited {
	
		text-decoration: none;
		font-weight: 500;
		color: inherit;
	
	}
	
	&:hover,
	&:active {
	
		-webkit-transition: color .3s ease;
		-moz-transition: color .3s ease;
		-o-transition: color .3s ease;
		-ms-transition: color .3s ease;
		transition: color .3s ease;
	
	}

	&.brand { 
	
		&:hover,
		&:active {

			color: @color_highlight;
			
		}
	}

}


// FROALA OVERRIDE
// ===============
.fr-view,
.fr-box.fr-basic .fr-element.fr-view {

	font-family: "DNMCA";
	font-size: @text_sub;
	font-weight: 300;
	color: fade(@color_dark, 70%);
	
	ul:not(.browser-default) > li { 
		
		list-style-type: square;
		margin-left: 1rem;
		
	}
	/*
	table { 
	
		width: auto;
		white-space: nowrap; 
		
	}
	
	th, td { 
	
		width: auto;
	
		padding: .5rem 0; 
		
		&.left { padding-right: 1.5rem;}
		
		&.right { 
			
			padding-left: 1.5rem;
			
			text-align: right;
			
		}

	}

	tr { border-top: 1px solid fade(@color_dark, 20%); }
	
	tr:last-child { border-bottom: 1px solid fade(@color_dark, 20%); }
	*/
	
}

.fr-toolbar.fr-top {

	-webkit-border-radius: @border_radius @border_radius 0 0;
	   -moz-border-radius: @border_radius @border_radius 0 0;
	        border-radius: @border_radius @border_radius 0 0;

}

.second-toolbar {

	-webkit-border-radius: 0 0 @border_radius @border_radius;
	   -moz-border-radius: 0 0 @border_radius @border_radius;
	        border-radius: 0 0 @border_radius @border_radius;

}


// TOAST OVERRIDE
// ==============
.close {

	opacity: .7;
	
	&:hover { opacity: 1; }
	
}

.alert-dismissable .close,
.alert-dismissible .close {
 
	position: absolute;
	top: 8px;
	right: 6px;
	color: inherit;

}


// DATATABLES OVERRIDE
// ==============
table.dataTable.no-footer { border-bottom: none; }

table.dataTable thead th { background-color: transparent; }

td.details-control {
	
	text-align: center;
    color: fade(@color_light, 20%);
	font-size: 1rem;
    cursor: pointer;
	
	&:focus { outline: none; }

}

tr.shown td.details-control {

    text-align: center;
    color: fade(@color_green, 100%);
	
}