/*=================================
=             Template            =
=================================*/

@import "components/portal.less";

/*=================================
=               Color             =
=================================*/

@primary: #2c8dbb;
@text-color: darken(@primary, 10%);

/*=================================
=             Components         =
=================================*/

// - Widgets
@import "components/widget.less";

// - Tabs
@import "components/tabs.less";

// - Acessibilidade
@import "components/accessibility.less";

// - Notification Box
@import "components/notification-box.less";

// - Loader
@import "components/loader.less";

// - Tree
@import "components/tree.less";

// - Tree Table
@import "components/treetable.less";

// - Progress Bar
@import "components/progressbar.less";

// - Passo a Passo
@import "components/wizard.less";

// - Display de Informações
@import "components/display-data.less";

// - Helper
@import "components/helper.less";
@import "components/helper-portaltransparencia.less";

// - SlideShow
@import "components/slideshow.less";

// - Switch
@import "components/switch.less";

// - Hint
@import "components/hint.less";

// - Buttons
@import "components/buttons.less";

// - Typography
@import "components/typography.less";

/*=================================
=              Style              =
=================================*/

//Icone Esic
.fa-e-sic-white,
.fa-e-sic{
	position: relative;
	background: @text-color @esic-icon center no-repeat;
	background-size: contain;
}//.fa-e-sic

.fa-e-sic-white{
	background-color: white;
}

.pt-home .item ,
.esic.header-buttons{
	&:hover{
		.fa-e-sic{
			background-image: @esic-icon-colorful-mask;
		}
	}
}//.esci.header-buttons

//Adaptações Gerais para o Portal Transparência
.portal{

	a,
 	a:link,
 	a:visited{
 		color: @primary;
 		font-weight: @bold;
 		.transition(.3s);
 		text-decoration: none;
 	}

 	.btn-save{
 		bottom: 50px;
 	}

 	.last-updated{
 		margin: 20px 0;
 	}

 	.footer .last-updated{
 		margin: 0;
 	}

 	aside.sidebar-esic{
		@esicWidth: 360px;
		@esicWidthXs: 310px;

		width: 0;
		position: fixed;
		margin: auto;
		top: 122px;
		right: 0px;
		background: white;
		border-radius: 10px 0 0 10px;
		z-index: 13;
		right: 0;
		transition: .3s;
		overflow: hidden;
		.transition(.3s);

		@media(max-width: 992px){
			top: 70px;
		}

		&.active{
			width: @esicWidth;
			box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.25);

			@media(max-width: 992px){
				width: @esicWidthXs;
			}
		}//&.active

		.close-esic.btn{
			display: table;
			position: absolute;
			top: 10px;
			right: 0;
			.border.radius(14px 0 0 16px);
			color: white;
			padding: 8px 10px 8px 8px;

			.fa{
				color: white;
				font-size: 14px;
			}
		}//btn

		.title b{
			font-size: 16px;
			color: @text-color;
			display: block;
			text-align: center;
			border-bottom: 1px solid #ccc;
			padding: 15px;
			font-weight: normal;
			overflow: hidden;
			font-weight: @medium;
			width: @esicWidth;

			@media(max-width: 375px){
				width: @esicWidthXs;
			}
		}//title-b

		.sidebar-esic-content{
			padding: 15px;
			width: @esicWidth;
			overflow: hidden;
			overflow-y: auto;
			max-height: ~"calc(100vh - 230px)";

			@media(max-width: 992px){
				max-height: ~"calc(100vh - 180px)";
				width: @esicWidthXs;
			}
		}//.sidebar-esic-content

		.wizard{
			margin: 0;
		}
		.wizard-content{
			padding: 0px;

			h3{
				margin: -15px -14px 0px -15px;
				padding: 10px;
				background: #eee;
				border-bottom: 1px solid #ccc;
				font-size: 15px;

				b{
					font-weight: normal;
					color: @gray;
				}
			}//h3
		}//wizard-content
 	}//aside.sidebar-esic

}//portal


// Página Inicial
.portal .pt-home{

	&:before{
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		background: @primary @bg-portaltransparencia center center no-repeat;
		background-size: cover;
		z-index: 1;
		padding-top: 60px;
		overflow: hidden;
		overflow-y: auto;
	}

	&:after{
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		background: @primary;
		.opacity(0.85);
		z-index: 2;
	}

	.pt-home-inner{
		position: relative;
		z-index: 5;
	}

	.pt-home-itens{
		letter-spacing: -4px;
		max-width: 1600px;
		display: block;
		margin: 0 auto;
		position: relative;
    	z-index: 5;

    	@media(min-width: 376px){
    		margin-left: -15px;
		}
	}

	.pt-home-itens .item{
		display: inline-block;
		vertical-align: top;
		line-height: 0;
		letter-spacing: 0;
		width: 100%;
		overflow: hidden;
		position: relative;
		margin-right: -1px;
		margin-bottom: -1px;
		background: white;
		.border.radius(7px);
		margin-top: 15px;
		.transition(.3s);

		@media(min-width: 376px){
			margin-left: 15px;
			width: ~"calc(50% - 15px)";
		}
		@media(min-width: 767px){
			width: ~"calc(33.33% - 15px)";
		}
		@media(min-width: 992px){
			width: ~"calc(25% - 15px)";
		}
		@media(min-width: 1200px){
			width: ~"calc(20% - 15px)";
		}

		&.active{
			.sub-itens{
				top: 30px;

				@media(min-width: 992px){
					top: 0;
				}
			}//.sub-itens
			.close-sub-itens{
				top: 0px;
			}

			.item-aligner{
				@media(max-width: 375px){
					height: 350px;
				}
			}//.item-aligner
		}//active

	}//.pt-home-itens .item

	.pt-home-itens .item-aligner{
		width: 100%;
		height: 230px;
		display: table;
		.transition(.3s);

		@media(max-width: 375px){
			height: 180px;
		}

		.item-aligner-inner{
			display: table-cell;
			vertical-align: middle;
			line-height: 1;
		}
	}//.pt-home-itens .item-aligner

	.pt-home-itens .item .item-title,
	.pt-home-itens .item .fa{
		color: @text-color;
		width: 100%;
		display: block;
		text-align: center;
	}

	.pt-home-itens .item .fa{
		margin: 0 auto;
		margin-bottom: 10px;
		font-size: 22px;

		&.fa-e-sic{
			height: 22px;
			width: 22px;
		}

		@media(min-width: 768px){
			margin-bottom: 20px;
		}

		@media(min-width: 992px){
			font-size: 34px;
			&.fa-e-sic{
				height: 34px;
				width: 34px;
			}
		}//media
		@media(min-width: 1200px){
			font-size: 40px;

			&.fa-e-sic{
				height: 40px;
				width: 40px;
			}
		}//media
	}//.pt-home-itens .item .fa


	.pt-home-itens .item .item-title{
		font-weight: @regular;
		display: block;
		margin-bottom: 5px;

		@media(min-width: 768px){
			margin-bottom: 10px;
		}

		@media(min-width: 1200px){
			font-weight: @light;
			font-size: 18px;
		}
	}//.pt-home-itens .item .item-title

	.pt-home-itens .item .item-subtitle{
		display: block;
		width: 100%;
		line-height: 1;
		text-align: center;
		padding: 0 5px 10px 5px;
		font-size: 12px;
		font-style: normal;

		@media(min-width: 768px){
			padding: 0 5px 20px 5px;
		}
	}//.pt-home-itens .item .item-subtitle

	.pt-home-itens .item .item-opener{
		color: @primary;
		border-color: @primary;
		background-color: transparent;
	}

	.pt-home-itens .item .close-sub-itens{
		@media(max-width: 992px){
			width: 100%;
			height: 33px;
			background-color: @text-color;
			position: absolute;
			top: -100%;
			left: 0;
			.transition(.3s);
			cursor: pointer;
			.border.radius( 0 0 3px 3px);
			text-align: center;
			z-index: 2;

			&:before{
				content: "\f078";
				.fontawesome();
				color: white;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				text-align: center;
				font-size: 22px;
				padding: 3px 0px;
			}
		}//media
	}//.pt-home-itens .item .sub-itens .close

	.pt-home-itens .sub-itens{
		position: absolute;
		top: 100%;
		height: 100%;
		left: 0;
		width: 100%;
		overflow: hidden;
		overflow-y: auto;
		.transition(.3s);
		background: white;
		border-top: 2px solid @primary;
		padding: 0 15px;
		list-style: none;
		z-index: 3;
   		border-radius: 0 0 7px 7px;

   		@media(max-width: 992px){
			height: ~"calc(100% - 30px)";
   		}

		.sub-item{
			line-height: 1;
			padding: 15px 0;
			border-top: 1px solid #ccc;
			display: block;

			a{
				display: block;
			}

			&:nth-of-type(1){
				border-top: none;
			}
		}//.sub-item
	}//.pt-home-itens .sub-itens

	.text-title{
		color: white;
	}
	.text-sub-title{
		color: white;
		font-weight: @light;
		font-size: 16px;

		a{
			color: white;
			font-weight: normal;
			text-shadow: 0 0 2px rgba(0,0,0,0.3);
		}
	}//.text-sub-title

	.info{
		background-color: white;
	}
}//.portal .pt-home

//Adaptações para Sub Header

.portal .header .logo-img.galo{
	background: transparent;
	height: 60px;
	width: 60px;
	margin-top: -15px;
	margin-bottom: -15px;
}

.portal .sub-header{

	@media(max-width: 992px){
		height: 50px;
	}

	.sisters{
		width: 100%;
		vertical-align: middle;

		@media(min-width: 992px){
			&:first-child{
				width: 70%;
			}
			&:last-child{
				width: 30%;
			}
		}//media
	}//sisters

	.change-entity{
		.transition(.3s);

		@media(min-width: 993px){
			background: #fdfdfd;
			display: table;
			.border.radius(17px);
			border: 1px solid #ccc;
		}

		@media(max-width: 992px){
			position: absolute;
			bottom: -500px;
			left: 5px;
			width: ~"calc(100% - 10px)";
			padding: 10px;
			border: 1px solid #dadada;
			.border.radius(5px);
			background: white;
			z-index: 10;

			.see-entity-button,
			.change-entity-button{
				color: @primary;
				background: white;
				border: 1px solid #DADADA;
				text-align: center;
				position: fixed;
				bottom: 5px;
				font-size: 11px;
				text-transform: uppercase;
				padding: 9px 6px;

				&:after,
				&:before{
					display: inline-block;
				    vertical-align: middle;
				    .transition(.3s);
				}

				&:after{
					margin-left: 7px;
				}
			}//.see-entity-button, .change-entity-button

			.change-entity-button{
    			width: 130px;
				left: 124px;
				.border.radius(0 5px 5px 0);

				&:before{
					content: "\f139";
					.fontawesome();
					font-size: 18px;
				}
				&:after{
					content: 'Mudar Entidade';
				}
			}//.change-entity-button

			.see-entity-button{
				width: 110px;
				left: 15px;
				.border.radius(5px 0 0 5px);

				&:before{
					content: "\f0f7";
					.fontawesome();
					font-size: 18px;
				}

				&:after{
					content: "Ver Entidade";
				}

				.see-entity-button-title{
					position: absolute;
					left: -16px;
					bottom: 43px;
					width: 320px;
					font-size: 14px;
					background: white;
					.border.radius(0 5px 0 0);
					color: @gray;
					font-weight: @medium;
					font-weight: normal;
					overflow: hidden;
					height: 0;
					.transition(.3s);
					text-align: left;
					padding: 0 5px;
					border-bottom:  none;

					&.active{
						border: 1px solid #dadada;
						border-bottom:  none;
						height: initial;
						padding: 5px;
					}
				}//.see-entity-button
			}//.see-entity-button

			&.active{
   				bottom: 50px;
   				.box.shadow(0px 1px 13px rgba(0,0,0,0.2));

   				.change-entity-button:before{
					content: "\f13a";
				}
			}//active
		}//media

		.change-entity-label,
		select{
			display: inline-block;
			vertical-align: baseline;
			font-size: 13px;

			@media(max-width: 992px){
				display: block;
				width: 100%;
			}
		}//.change-entity-label, select

		.change-entity-label{
			.sub-header-label();

			@media(min-width: 993px){
				margin-left: 10px;
			}
		}//.change-entity-label

		select{
			margin-bottom: 10px;
			padding-right: 32px !important;
			.border.radius(0);
			cursor: pointer;

			@media(min-width: 993px){
				width: initial;
				max-width: 595px;
				background: transparent @dropdown-arrow-pt center right no-repeat;
				border: none;
				margin: 0;
				padding-left: 5px;
				text-transform: uppercase;
				.appearance(none);
				border-right: 1px solid #ccc;
				background-position: right 8px center;
				min-height: 32px;

				&:last-child{
					border-right: none;
				}
			}//media
		}//select

		.btn{
			background: white;
			color: @primary;
			font-weight: @medium;

			@media(max-width: 992px){
				margin: 0 auto;
				margin-right: 0 !important;
    			display: block;
			}
		}//btn

	}//change-entity

	.accessibility-btns{
		&:after{
			position: absolute;
			margin: auto;
			right: 230px;
			top: 0;
			bottom: 0;
			width: 38px;
			height: 38px;
			color: #5d5d5d;
			.border.radius(100%);
			content: "\f193";
			.fontawesome();
			font-size: 20px;
			text-align: center;
			padding-top: 5px;
			.transition(.4s);
			border: 1px solid rgba(0,0,0,.1);
		}

		@media(max-width: 992px){
			background: #dadada;
			border-radius: 19px;
			height: 38px;
			min-width: 38px;
			padding: 0;
			padding-right: 38px;
			.transition(.3s);
			z-index: 10;
			position: absolute;
			top: 1px;
			bottom: 0;
			right: 10px;
			text-align: right;
			.transition-delay(.5s) !important;

			.accessibility-btn{
				.transition-delay(.0s) !important;
				.opacity(0);
				.transition(.2s);
				width: 0;
				border: none;
				margin: 0;
			}//.accessibility-btn

			&.active{
				padding: 4px 45px 4px 5px;
				width: 300px;
				.transition-delay(.0s) !important;

				&:after{
					content: "\f053";
					background: rgba(0,0,0,.05);
					border: 1px solid rgba(0,0,0,.1);
					.transform(rotate(-180deg));
					color: #444343;
				}

				.accessibility-btn{
					width: 32px;
					border: 1px solid #C6C6C5;
					margin-right: 5px;
					.opacity(1);
					.transition-delay(.5s) !important;
				}
			}//active

			&:after{
				position: absolute;
				margin: auto;
				right: 0;
				top: 0;
				bottom: 0;
				width: 38px;
				height: 38px;
				color: #5d5d5d;
				.border.radius(100%);
				content: "\f193";
				.fontawesome();
				font-size: 20px;
				text-align: center;
				padding-top: 5px;
				.transition(.4s);
				border: 1px solid rgba(0,0,0,.1);
			}
		}//media
	}//.accessibility-btns

	.logo-img{
		@media(min-width: 993px){
			height: 34px;
			width: 34px;
			.border.radius(100%);
			margin: -1px;
			margin-right: 0;
			vertical-align: top;
			padding: 4px;

			img{
				position: relative;
				top: inherit;
				right: inherit;
				bottom: inherit;
				left: inherit;
				display: block;
			}
		}//media
		@media(max-width: 992px){
			margin: 0 auto !important;
			display: table !important;
			width: 40px !important;
			height: 40px !important;
		}
	}//logo-img
}//.sub-header

.portal .accessibility-btns .accessibility-btn.btn-help{
	&:hover{
		.accessibility-label{
			display: block;
		}
	}//&:hover

	.accessibility-label{
		padding: 0;
		overflow: initial;
	    .transition(0s);
	    text-align: left;
	    background: transparent;
	    display: none;

	    @media(max-width: 992px){
			bottom: 23px;
			top: inherit;
	    	right: -40px;
	    	padding-bottom: 13px;
		}

		@media(min-width: 993px){
	    	top: 23px;
	    	right: -1px;
	    	padding-top: 13px;
		}

		.accessibility-label-inner{
			position: relative;
			background: white;
			.filter.drop-shadow(0 0 2px rgba(0,0,0,.3));
			position: relative;
			.border.radius(3px);
			list-style: none;

			&:after{
				content: '';
				position: absolute;
				width: 0;
				height: 0;
				border-style: solid;

				@media(max-width: 992px){
					border-width: 8px 7.5px 0 7.5px;
					border-color: #ffffff transparent transparent  transparent;
					bottom: -8px;
					right: 50px;
				}

				@media(min-width: 993px){
					border-width: 0 7.5px 8px 7.5px;
					border-color: transparent transparent #ffffff transparent;
					top: -8px;
					right: 8px;
				}
			}//after
		}//.accessibility-label-inner

		.accessibility-label-inner .item{
			border-top: 1px solid #ccc;

			&:nth-of-type(1){
				border-top: none;
			}

			@media(max-width: 992px){
				&.helper-opener{
					display: none
				}
			}//media
		}//.accessibility-label-inner .item

		.accessibility-label-inner .item .item-text,
		.accessibility-label-inner .item a{
			display: block;
			padding: 10px;
			font-size: 14px;
			color: @text-color;
			font-weight: @bold;
			.transition(.2s);
			font-weight: normal;

			&:hover{
				&, a{
					color: darken(@text-color, 5%);
				}
				.fa{
					color: darken(@text-color, 10%)
				}
			}//hover

			.fa{
		    	margin-right: 10px;
		    	vertical-align: baseline;
		    	color: @gray;
		    }
		}//.accessibility-label-inner .item
	}//.accessibility-label
}//.portal .accessibility-btns .accessibility-btn.btn-help

.invert {
	@media screen and (min-width: 993px) {
		.portal .sub-header .change-entity select {
			background: transparent @dropdown-arrow-pt center right no-repeat !important;
			background-position: right 8px center !important;
		}
	}
}
