@import('mixins');

/**
 * General
 */

body {
	font-family: 'Poppins';
	line-height: 140%;
}

.hidden {
	display: none;
}

.screen-reader-text {
	display: none;
}

#page {
	padding: 40px;
}

.vertical-align {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: row;
}

.page-title {
	margin: 0 0 50px 0;

	h2 {
		font-size: 24px;
	}

	.add {
		background: black;
		color: white;
		width: 24px;
		height: 24px;
		line-height: 24px;
		font-size: 20px;
		padding: 0;
		text-align: center;
		border-radius: 50%;
		vertical-align: middle;
		display: inline-block;
		margin: 0 0 0 10px;
		text-decoration: none;

		&:hover {
			background: #ace400;
			text-decoration: none;
		}
	}
}

.page-content {
	min-height: 400px;
}

/**
 * Loading
 */

#master-overlay {
	background: rgba(66,66,66,0.8);
	opacity: 0.85;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	z-index: 1000001;
	display: none;
}

#master-loading {
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	position: fixed;
	z-index: 1000002;
	display: none;

	.loader,
	.loader:after {
	  border-radius: 50%;
	  width: 10em;
	  height: 10em;
	}
	.loader {
	  margin: 60px auto;
	  font-size: 10px;
	  position: relative;
	  text-indent: -9999em;
	  border-top: 8px solid rgba(255,255,255,0.1);
	  border-right: 8px solid rgba(255,255,255,0.1);
	  border-bottom: 8px solid rgba(255,255,255,0.1);
	  border-left: 8px solid #FFFFFF;
	  -webkit-transform: translateZ(0);
	  -ms-transform: translateZ(0);
	  transform: translateZ(0);
	  -webkit-animation: load8 0.5s infinite linear;
	  animation: load8 0.5s infinite linear;
	}
}

@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/**
 * Home
 */
#home {

}

.home-links {
	padding: 0 0 50px 0;

	a {
		display: block;
		width: 100%;
		padding-bottom: 100%;
		border: 2px solid black;
		position: relative;
		margin: 0 0 30px 0;
		transition: all 200ms ease-in-out;
		color: black;
		font-weight: 500;
		overflow: hidden;

		&:hover {
			background: black;
			color: white;

			span {
				top: 34%;
			}

			i {
				top: 50%;
			}

			img {
				top: -30%;
			}
		}

		span {
			transition: top 200ms ease-in-out;
			position: absolute;
			top: 72%;
			left: 50%;
			font-size: 18px;
			transform: translateX(-50%);
		}

		i {
			transition: top 200ms ease-in-out;
			position: absolute;
			top: 120%;
			left: 50%;
			font-size: 60px;
			transform: translateX(-50%);
		}

		img {
			transition: top 200ms ease-in-out;
			max-width: 60%;
			max-height: 30%;
			position: absolute;
			top: 38%;
			left: 50%;
			transform: translate(-50%,-50%);
		}
	}
}



/**
 * Footer
 */

#main-footer {
	padding: 40px 0;
	border-top: 1px solid #e5e5e5;
	margin-top: 50px;
	font-size: 14px;
}


/**
 * Header
 */

#masthead {
	padding-bottom: 40px;
	border-bottom: 1px solid #e5e5e5;
	margin-bottom: 50px;

	.menu-col {
		text-align: left;
		position: relative;

		.hamburger {
			padding: 0;
			margin: 0 0 -4px 0;
			outline: none;
			line-height: 100%;
		}
	}

	.user-col {
		text-align: right;

		.user-menu {
			img {
				width: 32px;
				border-radius: 50%;
			}
		}
	}

	.nav-menu {
		position: absolute;
		top: 100%;
		background: white;
		z-index: 1000;
		box-shadow: rgba(0,0,0,0.15) 0 0 40px;
		transition: all 300ms ease-in-out;
		opacity: 0;
		visibility: hidden;
		margin: 0;

		&.right {
			right: 15px;

			&:after {
				bottom: 100%;
				right: 0;
				border: solid transparent;
				content: " ";
				height: 0;
				width: 0;
				position: absolute;
				pointer-events: none;
				border-color: rgba(255, 255, 255, 0);
				border-bottom-color: #FFFFFF;
				border-width: 20px;
			}
		}

		&.left {
			left: 15px;

			&:after {
				bottom: 100%;
				left: 0;
				border: solid transparent;
				content: " ";
				height: 0;
				width: 0;
				position: absolute;
				pointer-events: none;
				border-color: rgba(255, 255, 255, 0);
				border-bottom-color: #FFFFFF;
				border-width: 20px;
			}
		}

		&.is-active {
			margin: 22px 0 0 0;
			opacity: 1;
			visibility: visible;
		}

		ul {
			width: 200px;
			list-style: none;
			padding: 0;
			margin: 0;

			li {
				display: block;
				border-bottom: 1px solid fade(black,10%);

				&:last-child {
					border: 0;
				}

				a {
					text-decoration: none;
					padding: 15px;
					display: block;
					color: black;

					&:hover {
						color: white;
						background: black;
					}
				}
			}
		}
	}

	.logo-col {
		text-align: center;

		.logo {
			display: block;

			img {
				width: auto;
				max-width: 100%;
				margin: 0px auto;
			}
		}
	}

}


/**
 * Editor
 */

.editor {
	display: block;
	width: 100%;
	font-size: 0;
	margin: 0 0 50px 0;
	border-top: 1px solid fade(black,10%);

	.cs-element {
		display: table;
		width: 100%;
		padding: 15px 0;
		border-bottom: 1px solid fade(black,10%);

		&.hidden {
			display: none;
		}

		.cs-title,
		.cs-fieldset {
			display: table-cell;
		    vertical-align: top;
			font-size: 12px;
		}

		.cs-title {
			width: 20%;

			h4 {
				display: block;
				width: 200px;
				font-size: 12px;
				padding: 5px 0;
			}

			.cs-text-desc {
				font-size: 11px;
				line-height: 120%;
				color: #888;
   				width: 200px;
			}
		}

		.input-wrapper,
		.cs-fieldset {
			font-size: 12px;

			textarea,
			select,
			input[type="number"],
			input[type="text"] {
				max-width: 600px;
				width: 100%;
				margin-right: 10px;
			}

		}

		.wp-editor-area {
			max-width: auto;
		}

		&.cs-field-checkbox {
			label {
				display: block;
				cursor: pointer;
				padding: 3px 0;

				&:hover {
					background: rgba(0,0,0,0.04);
				}
			}
		}
	}

	.cs-field-heading {
		display: table;
		font-size: auto;
		padding: 30px 0;

		h3 {
			font-size: 18px;
		}
	}

	.cs-field-hidden {
		display: none;
	}

	.form-actions {
		margin: 40px 0 0 0;
		font-size: 14px;
	}
}

textarea,
select,
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="text"] {
	padding: 5px;
	border: 1px solid rgb(195, 195, 195);
	border-radius: 0;

	&:hover,
	&:active,
	&:focus {
		border: 1px solid rgb(120, 120, 120);
	}
}

input[type="checkbox"],
input[type="radio"] {
	border: 2px solid fade(black,10%);
	background: #FFFFFF;
	clear: none;
	cursor: pointer;
	display: inline-block;
	border-radius: 2px;
	line-height: 0;
	height: 16px;
	margin: -2px 4px 0 0;
	outline: 0;
	padding: 0 !important;
	text-align: center;
	vertical-align: middle;
	width: 16px;
	min-width: 16px;
	-webkit-appearance: none;
	-webkit-transition: .05s border-color ease-in-out;
	transition: .05s border-color ease-in-out;
}

input[type=checkbox] {
	width: 16px;
	height: 16px;
}

input[type=checkbox]:checked {
	background-color: #000000;
	border-color: #000000;
}

input[type=radio] {
	-webkit-border-radius: 50%;
	border-radius: 50%;
	margin-right: 4px;
	line-height: 10px;
	box-shadow: none;
	border-width: 2px;
}

input[type=checkbox],
input[type=radio] {
	position: relative;
	-webkit-appearance: none;
	transition: border ease-in-out 100ms;
}

input[type=checkbox]:before,
input[type=radio]:before {
	-webkit-transition: all ease-in-out 500ms;
	-moz-transition: all ease-in-out 500ms;
	-ms-transition: all ease-in-out 500ms;
	-o-transition: all ease-in-out 500ms;
	transition: all ease-in-out 500ms;
	opacity: 0;
	visibility: hidden;
}

input[type=radio]:before {
	transform: scale(0);
}

input[type="checkbox"]:checked:before,
input[type="radio"]:checked:before {
	float: left;
	display: inline-block;
	vertical-align: middle;
	width: 18px;
	font: bold 15px/1 dashicons;
	speak: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

input[type="checkbox"]:checked:before {
	content: "\f147";
	margin: 0;
	color: #FFFFFF;
	position: absolute;
	top: -2px;
	left: -3px;
	transform: scale(1);
	opacity: 1;
	visibility: visible;
}

input[type="radio"]:checked {
	border-width: 5px;
	border-color: #000000;
	background-color: #000000;
}

input[type="radio"]:checked::before {
	display: none;
}

input[type="radio"]:checked::after,
input[type="checkbox"]:checked::after {
	-webkit-animation: click-wave cubic-bezier(0.7, 0, 0, 0.7) 0.4s;
	-moz-animation: click-wave cubic-bezier(0.7, 0, 0, 0.7) 0.4s;
	animation: click-wave cubic-bezier(0.7, 0, 0, 0.7) 0.4s;
	background: #000000;
	content: '';
	display: block;
	position: absolute;
	z-index: 0;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

input[type="radio"]:checked::after {
	border-radius: 50%;
}

input[type="checkbox"]:checked::after {
	border-radius: 5px;
}

@-moz-document url-prefix() {
	input[type="checkbox"],
	input[type="radio"],
	.form-table input.tog {
		margin-bottom: -1px
	}

}

.btn,
.button {
	display: inline-block;
	padding: 5px 18px;
	background: rgb(150,150,150);
	color: white;
	text-decoration: none;
	border: 0;
	border-radius: 30px;
	font-size: 12px;

	&.green {
		background: #2bf589;
	}

	&.red {
		background: #fd6948;
	}

	&:hover {
		text-decoration: none;
		background: black;
		color: white;
	}

	&.plus {
		font-size: 18px;
		padding: 8px 24px;
	}
}

.table-wrapper {
	overflow: auto;
	display: block;
	width: 100%;
}

.tabela {
	border: 1px solid #DDD;

	&.full {
		width: 100%;
		border-collapse: collapse;
		table-layout: auto;

		td {
			word-wrap: break-word;
			box-sizing: border-box;
		}
	}

	thead {
		background: fade(black,4%);

		tr {
			border-bottom: 1px solid #DDD;
		}

		th {
			padding: 15px;
			text-transform: uppercase;
			font-weight: 600;
			font-size: 11px;
			box-sizing: border-box;
			line-height: 120%;

			strong {
				font-weight: 800;
			}

			&.acoes {
				width: 100px;
			}

			&.titulo {
				width: 25%;
			}

			&.foto-veiculo {
				width: 100px;
			}
		}
	}

	tbody {

		td {
			padding: 15px;
			font-size: 12px;

			&.foto-veiculo {

				img {
					width: 66px;
					mix-blend-mode: multiply;
				}
			}
		}

		tr {
			border-top: 1px solid #DDD;

			&:hover {
				background: fade(black,2%);
			}

		}

		.acoes {
			a {
				padding: 0 4px;
				display: inline-block;
				vertical-align: middle;
				font-size: 120%;
			}
		}

	}
}

#newsletters {

	.newsletter-tabela {

		.preview-frame {
			min-height: 400px;
			display: block;
			border: 1px solid fade(black,10%);
			background: white;
		}

	}

	.relatorio-noticias-tabela {

	}

}

#relatorios {

	.relatorio-newsletters-tabela {

	}

}

.pagination {
	padding: 25px 0 0 0;

	span,
	a {
		display: inline-block;
		vertical-align: middle;
		padding: 8px 14px;
		border-radius: 24px;
		color: black;
		margin: 0 5px 5px 0;
	}

	a {
		background: fade(black,5%);
		text-decoration: none;

		&:hover {
			background: black;
			color: white;
		}
	}
}

/**
 * Login
 */

#login-page {
	max-width: 400px;
	padding: 40px;
	margin: 0px auto;
	top: 50%;
	position: relative;
	transform: translateY(-50%);

	.logo {
		display: block;
		margin: 0px auto 30px auto;
	}

	.login-username,
	.login-password {
		padding: 10px 0;

		label {
			display: block;
			text-align: left;
		}

		input {
			display: block;
			width: 100%;
			padding: 5px;
		}
	}

	.login-remember {
		text-align: center;
		padding: 20px 0;
	}

	.login-submit {
		text-align: center;

		input[type="submit"] {
			font-size: 18px;
			padding: 8px 24px;
		}
	}


}