@import url('https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i&subset=latin-ext');

*, ::after, ::before {
	box-sizing: border-box;
}
*:focus {
    outline: none;
}
html, body {
	height: 100%;
}
body {
	background: none #f4f4f4;
	font-family: 'Lato', sans-serif;
	color: #5c768b;
	margin: 0;
    display: flex;
    flex-flow: column nowrap;
}
compose {
	display: flex;
	flex: 1 1 auto;
}
.loading {
    height: 10em;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.5;
	background: transparent url('assets/loading.gif') no-repeat center/40%;
}
a {
	color: #377bb9;
}
button {
	border: 0;
	cursor: pointer;
	padding: 0.5em 1em;
	background-color: rgba(22, 67, 117, 0.1);
	border-radius: 0.25em;
	box-shadow: 0 0 0 1px rgba(90, 130, 160, 0.2) inset;
	color: rgba(0, 40, 76, 0.6);
	font: bold 1em 'Lato';
	line-height: 1;
	vertical-align: middle;
	height: 2em;
}
button:focus {
	outline: 0;
}
button:hover {
	background-color: rgba(235, 240, 245, 0.2);
}
button span {
	font-size: 0.82em;
	line-height: 1.3em;
}
button.main,
.button.main,
button[type="submit"] {
    background-color: #da762e;
    color: #fff;
    margin: 0 0 0 0.75em;
    padding: 0.5em 1em;
}
button.main:hover,
.button.main:hover,
button[type="submit"]:hover {
    background-color: #ff8f3e;
}
button.fechar {
	height: 1.75em;
	width: 1.75em;
	background: transparent url('assets/close.png') no-repeat center/40%;
	box-shadow: none;
	padding: 0.5em;
}
button.fechar:hover {
	background-color: rgba(255, 255, 255, 0.4);
}
button.prev,
button.next {
	height: 1.75em;
	width: 1.75em;
	background: transparent url('assets/prev.png') no-repeat center/40%;
	box-shadow: none;
	padding: 0.5em;
}
button.next {
	background-image: url('assets/next.png');
}
button.prev:hover,
button.next:hover {
	background-color: rgba(255, 255, 255, 0.6);
    filter: hue-rotate(150deg) brightness(1.5);
}
button.cancel {
    background-color: transparent;
    text-decoration: underline;
    color: #5a80a0;
    box-shadow: none;
    font-weight: normal;
    font-size: 0.9em;
}
button.cancel:hover {
	background-color: rgba(12, 65, 111, 0.05);
    color: #4279a9;
}
button.toggle.on {
	background-color: #8daac3;
    color: #fff;
}
button.linked {
	background: #5e97c7 url('assets/linked_off.png') no-repeat center / 84%;
}
button.linked.on {
	background-image: url('assets/linked_on.png');
}
button[disabled],
button[disabled]:hover {
    background-color: rgba(66, 97, 109, 0.16);
    color: rgba(38, 81, 99, 0.5);
    text-shadow: 1px 1px rgba(255,255,255,0.5);
    cursor: default;
}
input, select, textarea {
	border: 0;
	box-shadow: 0 0 0 1px rgba(200,200,200,0.5);
	padding: 0.37em 0.8em;
	border-radius: 0.25em;
	font: inherit;
	background-color: rgba(255,255,255,0.6);
    color: rgba(0,60,110,1);
    vertical-align: middle;
	width: 100%;
}
textarea {
	resize: vertical;
}
input:hover, select:hover, textarea:hover {
	background-color: rgba(255,255,255,0.8);
}
input:focus, select:focus, textarea:focus {
	background-color: rgba(255,255,255,1);
}
[disabled],
[disabled]:focus,
[disabled]:hover {
    background-color: rgba(111, 123, 136, 0.1);
    color: #92a0a9;
    text-shadow: 1px 1px rgba(255,255,255,0.5);
}

[readonly],
[readonly]:focus,
[readonly]:hover {
    background-color: rgba(255, 255, 255, 0.18);
    color: rgba(99, 115, 125, 0.98);
    text-shadow: 1px 1px rgba(255,255,255,0.5);
    cursor: default;
}
input[type='color'] {
	cursor: pointer;
	background-color: transparent;
	box-shadow: none;
}
input[type='color']:disabled {
	opacity: 0.25;
}

.password input {
	padding-right: 2.5em;
}
.password input+button {
	margin-left: -2.5em;
	box-shadow: none;
	width: 2.5em;
	background: transparent url("../styles/assets/asterisk.png") no-repeat center/auto 105%;
}
.password input+button:hover {
	background-color: rgba(32, 78, 94, 0.1);
	border-radius: 0 0.25em 0.25em 0;
	box-shadow: 0 0 0 1px rgba(32, 78, 94, 0.1);
}
input[type="password"]+button {
	background-image: url("../styles/assets/eye.png");
}
input[type="ckeckbox"] {
	box-shadow: none;
}
input[type="radio"] {
	box-shadow: none;
}
input[type="color"] {
	padding: 0;
	width: 2em;
	height: 2em;
	margin: -1em 1em;
}


::-webkit-input-placeholder {
    color: rgba(0,60,110,0.4);
    font-weight: normal;
}
:focus::-webkit-input-placeholder {
    color: rgba(0,60,110,0.2);
}
:disabled::-webkit-input-placeholder {
    color: rgba(0,40,60,0.4);
}
:readonly::-webkit-input-placeholder {
    color: rgba(0,60,110,0.4);
}


:-moz-placeholder {
    color: rgba(0,60,110,0.4);
    font-weight: normal;
}
:focus:-moz-placeholder {
    color: rgba(0,60,110,0.2);
}
:disabled:-moz-placeholder {
    color: rgba(0,40,60,0.4);
}
:readonly:-moz-placeholder {
    color: rgba(0,60,110,0.4);
}


::-moz-placeholder {
    color: rgba(0,60,110,0.4);
    font-weight: normal;
}
:focus::-moz-placeholder {
    color: rgba(0,60,110,0.2);
}
:disabled::-moz-placeholder {
    color: rgba(0,40,60,0.4);
}
:readonly::-moz-placeholder {
    color: rgba(0,60,110,0.4);
}


:-ms-input-placeholder {
    color: rgba(0,60,110,0.4);
    font-weight: normal;
}
:focus:-ms-input-placeholder {
    color: rgba(0,60,110,0.2);
}
:disabled:-ms-input-placeholder {
    color: rgba(0,40,60,0.4);
}
:readonly:-ms-input-placeholder {
    color: rgba(0,60,110,0.4);
}


input[type='search'] {
	background: rgba(255,255,255,0.4) url("../styles/assets/lupa.png") no-repeat 96% center/auto 64%;
	background-blend-mode: exclusion;
	transition: background-color 0.2s;
}
input[type='search']:focus {
	background: none rgba(255,255,255,1);
	transition: background-color 0.2s;
}
input[type='search']:hover {
	background: none rgba(255,255,255,0.8);
	transition: background-color 0.2s;
}
.fieldset,
fieldset {
	border: none;
	padding: 0;
}
legend {
	color: rgba(58, 78, 95, 0.5);
	font-size: 1.15em;
	padding: 1.5em 0 0 0;
	display: flex;
}
main legend {
	padding: 0.25em 0 0 0;
}
.fieldset:first-of-type legend,
fieldset:first-of-type legend {
	padding-top: 0
}

aside form .field._uri {
	flex-flow: row nowrap;
}
.out header,
top-header header {
	background-color: #003d70;
	height: 4.5em;
	font-size: 1em;
	box-shadow: 0 0.1em 0.2em rgba(0,0,0,0.3);
    position: relative;
    z-index: 1;	
    width: 100%;
}
h1 {
    color: #003d70;
    font-size: 1.7em;
    margin: 0.6em 0 0em 0;
}
h1 img {
	height: 1.5em;
    vertical-align: middle;
    margin: 0 0.1em 0 -0.25em;
}
h1 span {
	vertical-align: middle;
}
h2 {
    font-size: 1.3em;
}
h1 .icon,
h2 .icon {
	height: 1em;
	vertical-align: middle;
	margin-right: 0.5em;
}
h1 .icon + span,
h2 .icon + span {
	vertical-align: middle;
}
h4 {

}


.logo {
	height: 100%;
	width: 12em;
	background: transparent url("../styles/assets/logo.png") no-repeat center/contain content-box;
	padding: 0.1em;
	display: inline-block;
	vertical-align: middle;
}
header form {
	display: inline-block;
	vertical-align: middle;
	margin: 0 0 0 1em;
}
header input[type="search"] {
	font-weight: bold;
	box-shadow: none;
	font-size: 1.05em;
	color: rgba(204, 232, 255, 0.76);
	background: rgba(255,255,255,0.2) url("../styles/assets/lupa.png") no-repeat 96% center/auto 64%;
	background-blend-mode: initial;
}

header input::-webkit-input-placeholder {
    color: rgba(255,255,255,0.25);
}
header input:-moz-placeholder {
    color: rgba(255,255,255,0.25);
}
header input::-moz-placeholder {
    color: rgba(255,255,255,0.25);
}
header input:-ms-input-placeholder {
    color: rgba(255,255,255,0.25);
}

header input:hover::-webkit-input-placeholder,
header input:focus::-webkit-input-placeholder {
    color: rgba(0,60,110,0.5);
}
header input:hover:-moz-placeholder,
header input:focus:-moz-placeholder {
    color: rgba(0,60,110,0.5);
}
header input:hover::-moz-placeholder,
header input:focus::-moz-placeholder {
    color: rgba(0,60,110,0.5);
}
header input:hover:-ms-input-placeholder,
header input:focus:-ms-input-placeholder {
    color: rgba(0,60,110,0.5);
}

header input[type="search"]:focus {
	color: rgba(0,60,110,1);
	background: none rgba(255,255,255,1);
	transition: background-color 0.2s;
}

user-display {
	float: right;
	height: 100%;
	margin: 0 1em;
}
user-display::before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	height: 100%;
}
user-display p,
user-display div {
	display: inline-block;
	vertical-align: middle;
	margin: 0 0 0 0.75em;
	text-align: right;
	position: relative;
	color: #fff;
	font-weight: bold;
}
user-display a.foto {
	width: 3.5em;
	height: 3.5em;
	display: block;
	border-radius: 50%;
	right: 1.5em;
	top: 0.5em;
	background-size: cover;
}
user-display output {
    width: 1.75em;
    height: 1.75em;
    background-color: #ff0000;
    position: absolute;
    box-shadow: 0 0 0 2px #fff;
    text-align: center;
    line-height: 1.7em;
    border-radius: 50%;
    color: #fff;
    font-weight: bold;
    bottom: -0.1em;
    font-size: 0.75em;
    right: -0.1em;
}
user-display strong {
	display: block;
	color: #f7923d;
}

main {
    display: flex;
    flex-flow: column nowrap;
    flex: 1 1 auto;
    padding: 0.5em 2em;
    width: 100%;
    max-width: 100%;
	transition: all 0.5s;
	overflow: auto;
}
main.show-details {
    width: 80%;
    max-width: calc(100% - 18em);
	transition: all 0.5s;
}
.breadcrumbs {
	font-size: 0.9em;
	margin: 0.5em 0 0 0;
}
.breadcrumbs ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.breadcrumbs li {
	display: inline-block;
	color: rgba(100, 130, 150, 0.5);
}
.breadcrumbs a[href] {
	color: #6e9ec6;
	text-decoration: none;
}
.breadcrumbs li:nth-child(n+2)::before {
	content: ">";
	display: inline-block;
	margin:  0 0.4em;
	opacity: 0.6;
}
h1+p {
	margin: 0.75em 0 0.5em 0;
	font-size: 1.1em;
}

.list {
	display: flex;
	flex: 1 1 auto;
	width: 100%;
}

.filters {
    min-width: 0;
    width: 0;
    margin: 0;
    flex: 0 1 0;
	background-color: #e3e9ec;
	border-radius: 0.25em;
	overflow: hidden;
    transition: 0.2s all;
    display: flex;
    flex-flow: column nowrap;
    width: 0;
}
.filters.show {
	width: auto;
    flex: 0 1 15%;
    min-width: 10em;
    margin: 0 2em 0 0;
    transition: 0.2s all;
}
.filters h4 {
	margin: 0;
	background-color: #cbd4d8;
	padding: 0.7em 3em 0.8em 1em;
	font-size: 0.9em;
	font-weight: normal;
	position: relative;
}
.filters h4 button.fechar {
	position: absolute;
	right: 0.5em;
	top: 0.5em;
}
.filters ul {
	padding: 0.5em;
	margin: 0;
	list-style: none;
	overflow: auto;
}
.filters li {
	margin: 0.25em;
	background-color: #92acbf;
	color: rgba(255,255,255, 0.8);
	padding: 0.4em 0.4em 0.4em 0.8em;
	border-radius: 1em 0.25em 0.25em 1em;
	font-size: 0.85em;
	font-weight: bold;
	cursor: pointer;
	white-space: nowrap;
	position: relative;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none; 
}
.filters li.selected {
	background-color: #2970aa;
}
.filters li:hover {
	opacity: 0.8;
	box-shadow: 0 0 0 2px rgba(255,255,255,0.5);
}
.filters li button.fechar {
	position: absolute;
	right: 0.2em;
	top: 0.2em;
    filter: brightness(1000%);
}
.filters li span {
	display: inline-block;
	vertical-align: middle;
	margin: 0 0 0 0.5em;
	white-space: normal;
}
.filters li::before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: 0.4em;
	height: 0.4em;
	background-color: rgba(255,255,255, 0.7);
	border-radius: 50%;
}
.buttons {
	margin: 0;
	background-color: rgba(32, 78, 94, 0.1);
	padding: 1em;
	font-weight: normal;
	position: relative;
    margin: auto 0 0 0;
    text-align: right;
}
.filters .buttons button {
	width: 100%;
}
.empty {
    padding: 1em;
    text-align: center;
    color: rgba(55, 81, 111, 0.48);
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.69);
}
router-view {
    display: flex;
    flex-flow: row nowrap;
    flex: 1 1 auto;
}
user-detail {
    flex: 1;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    padding: 2em;
    overflow: auto;
}
user-list {
    display: flex;
    flex-flow: column;
    flex: 1 1 auto;
}
.fieldset .list-items,
fieldset .list-items {
	min-width: 30em;
}
.list-items {
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
}
.list-items ul {
	list-style: none;
	border-radius: 0.25em;
    margin: 0.5em 0;
	padding: 0;
    overflow: auto;
    flex: 1 1 auto;
}
.fieldset.list-items ul,
fieldset.list-items ul {
	padding: 0.5em;
}
.list-items li {
	padding: 0.5em 0.25em;
	box-shadow: 0 2px 0 -1px rgba(25, 81, 123, 0.3) inset;
	cursor: pointer;
	transition: background-color 0.2s;
	border-radius: 0.15em;
	white-space: nowrap;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none; 
}
.fieldset.list-items li:first-child,
fieldset.list-items li:first-child {
	box-shadow: none;
}
.list-items li:hover {
	background-color: rgba(255,255,255,0.3);
	transition: background-color 0.2s;
}
.list-items li.selected {
	background-color: #f7f2dd;
	color: #b67215;
	transition: background-color 0.2s;
}
.list-items li.selected:hover {
	background-color: #fffcef;
}
.list-items li figure {
	display: inline-block;
	vertical-align: middle;
	margin: 0 0.5em;
	padding: 0;
}
.list-items li div {
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    width: calc(100% - 1.5em);
}
.list-items li div>* {
	vertical-align: middle;
	line-height: 1;
	height: 2em;
}
.list-items li figure img {
    height: 2em;
    border-radius: 50%;
}
.list-items li div strong {
	margin: 0 0.5em 0 0;
}

.list-items li div span {
	opacity: 0.8;
	font-style: italic;
}

.list-controlls {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	padding: 0 0.15em;
	flex: 0 0 auto;
}
.list-controlls>input[type="search"] {
	margin: 0 auto 0 0;
	padding: 0.3em 0.6em;
	font-size: 1em; 
    max-width: 10em;
    flex: 1;
}
.list-controlls>button {
    padding: 0 1em 0.15em 1em;
    margin: 0 0 0 0.5em;
}
.list-selection {
	box-shadow: 0 0 0 1px rgba(90, 130, 160, 0.4);
	background-color: rgba(22, 67, 117, 0.1);
	border-radius: 0.25em;
	padding: 0 0.5em;
	display: flex;
	margin: 0 0.75em 0 0;
}
.list-items .info {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
    flex: 0 0 auto;
    margin: auto 0 0 0;
    font-size: 0.9em;
}
list-items .info em {
    margin: 0 auto;
    flex: 1 1 auto;
    text-align: center;
}
.list-items nav {
	margin: 0 0 0 auto;
	display: flex;
	font-size: 0.9em;
}
.list-items nav input {
    width: 4em;
    font-size: 1em;
    padding: 0.25em;
    font-weight: bold;
    text-align: center;
    margin: 0 0.5em;
}

.check {
	padding: 0.25em;
	box-shadow: none;
	background: transparent;
	position: relative;
}
.check::before {
	content: "";
	display: block;
	border-radius: 0.15em;
	box-shadow: 0 0 0 1px rgba(90, 130, 160, 0.4);
	width: 0.75em;
	height: 0.75em;
    line-height: 0.6;
}
.check.checked::before {
	background-color: rgba(255,255,255,0.5);
}
.check:hover::before {
	background-color: rgba(255,255,255,1)
}
.selected .check::after,
.check.checked::after {
	content: "";
	background: transparent url("../styles/assets/checked.png") no-repeat center/contain;
	position: absolute;
	width: 100%;
	height: 100%;
    top: 0;
    left: 0;
}
.list-selection .options {
	margin-left: 0.5em;
}
.options {
    background: transparent url(../styles/assets/opt.png) no-repeat center/contain content-box;
    box-shadow: none;
    padding: 0.3em;
    flex: 1 0 auto;
    width: 1.25em;
}
mark {
    background-color: #fff;
    padding: 0.35em 0.4em;
    font-size: 0.56em;
    filter: drop-shadow(0 0 0.1em rgba(0,0,0,0.5));
    border-radius: 0.2em;
    text-transform: uppercase;
    vertical-align: middle;
    position: relative;
    margin: 0.2em 0 0 0;
    display: inline-block;
}
mark::before {
	content: "";
    background-color: inherit;
    width: 0.85em;
    height: 0.7em;
    position: absolute;
    transform: rotate(60deg) skewX(30deg);
    top: 0.5em;
    left: -0.42em;
}
mark.main {
	background: transparent url(../styles/assets/yellow_star.png) no-repeat center/contain;
	width: 3.25em;
	height: 3.25em;
	filter: none;
	margin: 0 0 0 -0.5em;
}
mark.blocked {
	background: transparent url(../styles/assets/blocked.png) no-repeat center/contain;
	width: 3.25em;
	height: 3.25em;
	filter: none;
	margin: 0 0 0 -0.5em;
}


form.sending {
	opacity: 0.3;
	transition: all 0.5;
}
main form {
    background-color: rgba(91, 144, 171, 0.1);
    border-radius: 0.25em;
    padding: 1em 1.5em 1.5em 1.5em;
}
main form {
	margin: 0 auto 0 0;
	width: 40%;
	min-width: 30em;
}

.field {
	margin: 0.75em 0 0 0;
	display: flex;
	position: relative;
}
.field:first-child {
	/* margin: 0; */
}
.options-group,
.field.boolean,
.field.array,
.field.radio {
    flex-flow: row wrap;
}
.options-group .fieldset,
.field.boolean .fieldset,
.field.array .fieldset,
.field.radio .fieldset {
	display: flex;
    flex-flow: row wrap;
    box-shadow: 0 0 0 1px rgba(200,200,200,0.5) inset;
    border-radius: 0.25em;
    padding: 0.5em;
    margin: 0.25em 0;
    width: 100%;
}
.options-group .option+.option,
.boolean .option+.option,
.array .option+.option,
.radio .option+.option {
	margin-left: 1em;
}
.options-group .option,
.boolean .option,
.array .option,
.radio .option {
    align-items: center;
    display: flex;
}
input[type="radio"],
input[type="checkbox"],
.color input {
	width: auto;
}
.color label {
	width: auto;
}
.color label span {
    margin-left: 0.5em;
}
.color .color-option {
	flex: 1;
}
.color .color-option label {
	flex: 0;
    margin: 0;
}
.color .color-option input[type='color'] {
	flex: 1;
    margin-right: 0;
}
.options-group,
.boolean input,
.radio input {
    width: auto;
    box-shadow: none;
    margin: 0 0.5em 0 0;
}
form div.field.checkbox {
	text-align: left;
    flex-direction: row;
    align-items: center;
}
form div.checkbox+.checkbox {
    margin: 0.25em 0 0 0;
}
main label {
    width: 45%;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    margin-right: 0.5em;
}
.field.textarea {
    flex-flow: row wrap;
}
.field.textarea textarea {
    margin: 0.25em 0;
}
form .buttons {
	margin: 1em -1.5em -1.5em -1.5em;
	border-radius: 0 0 0.25em 0.25em;
	padding: 1.5em;
}
.moresettings div.instruction {
	font-size: 1.15em;
    top: 1.2em;
    right: 0.8em;
}
div.instruction {
    font-size: 0.8em;
    box-shadow: 0 0 2px 0 rgb(255, 255, 255);
    position: absolute;
    max-width: 26em;
    background: rgba(65, 90, 111, 0.95);
    color: #fff;
    padding: 1em;
    border-radius: 0.5em 0 0.5em 0.5em;
    top: 2em;
    right: 0;
    z-index: 1;
    cursor: pointer;
}
button.instruction {
	padding: 0;
    margin: 0.5em 0 -0.5em 0.5em;
    color: #fff;
    background: #415a6f;
    height: 1.3em;
    font-size: 0.8em;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.3em;
    flex: 0 0 auto;
    border-radius: 50%;
}
button.instruction.active {
	color: rgba(0, 40, 76, 0.6);
	background-color: rgba(22, 67, 117, 0.1);
}
footer {
	background-color: #5a80a0;
	display: flex;
	height: 3em;
	align-items: center;
	padding: 0 1em;
	position: relative;
	z-index: 1010;
	flex: 0 0 auto;
	margin: auto 0 0 0;
}
.message {
    flex: 1 0 auto;
    padding: 0.5em;
    border-radius: 0.25em;
}
main .message {
    box-shadow: 0 0 0 1px;
}
main .message {
    box-shadow: inset 0 0 0 1px #bdbb88;
    color: #7d6d15;
}
footer .message {
	color: rgba(255,255,255,0.8);
}
@keyframes success {
	0% { background-color: #5a80a0; }
	40% { background-color: green; }
	100% { background-color: #5a80a0; }
}
@keyframes log {
	0% { background-color: #5a80a0; }
	40% { background-color: white; }
	100% { background-color: #5a80a0; }
}
@keyframes info {
	0% { background-color: #5a80a0; }
	40% { background-color: cyan; }
	100% { background-color: #5a80a0; }
}
@keyframes warn {
	0% { background-color: #5a80a0; }
	40% { background-color: yellow; }
	100% { background-color: #5a80a0; }
}
@keyframes alert {
	0% { background-color: #5a80a0; }
	40% { background-color: yellow; }
	100% { background-color: #5a80a0; }
}
@keyframes error {
	0% { background-color: #5a80a0; }
	40% { background-color: red; }
	100% { background-color: #5a80a0; }
}
footer.success {
	animation: log 0.75s;
}
footer.log {
	animation: log 0.75s;
}
footer.info {
	animation: info 0.75s;
}
footer.warn {
	animation: warn 0.75s;
}
footer.alert {
	animation: alert 0.75s;
}
footer.error {
	animation: 0.5s 5 error;
}
.alert .message::before {
	content: "";
	height: 1.75em;
	width: 1.75em;
	background: transparent url("../styles/assets/alert.png") no-repeat center/contain content-box;
	display: inline-block;
	vertical-align: middle;
	margin: 0 1em 0 0;
}
.message a,
.message span {
	vertical-align: middle;
	color: inherit;
}
footer>button {
	flex: 0 0 auto;
	color: #fff;
	background-color: #476f92;
	box-shadow: 0 0 0 1px #94acc0;
}

section.login {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: #e3e9ec;
	z-index: 10000;
	display: flex;
	text-align: center;
    align-items: center;
    justify-content: center;
    min-height: 37em;
}
section.login>div {
	background-color: #003d70;
	border-radius: 0.75em;
	padding: 1.8em 3em;
}
.login {
	font-size: 0.9em;
}
.login form {
	margin: 0;
	padding: 1em;
}
.login .logo {
    height: 6.5em;
    width: 20em;
    padding: 0;
    margin: 1em 0 0 0;
}
.login .field {
    margin: 1em 0 0 0;
}
.login input {
	font-size: 1.1em;
	width: 16em;
	text-align: center;
	background-color: rgba(255,255,255,0.8);
}
.login .password input {
	text-indent: 1.5em;
}
.login .password input+button{
	font-size: 1.1em;
	padding: 0;
}
.login input:hover {
	background-color: rgba(255,255,255,0.9);
}
.login input:focus {
	background-color: rgba(255,255,255,1);
}
.login .buttons {
	text-align: center;
	background-color: transparent;
	padding: 0.125em 0 1em 0;
    margin: 1em -1.5em 0 -1.5em;
}
.login button {
	font-size: 1.4em;
	margin: 0;
	padding: 0.5em 1.55em;
	border-radius: 0.2em;
    line-height: 0;
}
.login a {
	display: block;
	margin: 1em 0;
	color: #90aec6;
	font-size: 1.1em;
}
.login a:hover {
	color: #fff;
}
.out {
	width: 100%;
}
.out header {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    padding: 0 1.5em;
}
.out header .main {
	margin: 0 0 0 auto;
}
.out form {
	width: 25em;
}
.out .send .buttons button {
	margin: 0;
	width: 100%;
}
.create-account .setor, 
.create-account .cargo {
    width: calc(50% - 0.375em);
    display: inline-block;
    margin-right: 0.75em;
} 
.create-account .cargo {
    margin-right: 0;
}
.entity form,
.create-account form {
	width: 36em;
}
.fieldset.self,
.user-fields {
	display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
    align-content: flex-start;
}
.user-fields {
	height: 12.5em;
}
.self .fields,
.user-fields .fields {
	width: calc(100% - 10em);
}
.user-fields legend {
	width: 100%;
	margin: 0 0 0.5em 0;
}
.field.self {
    margin-left: auto;
    order: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.field.self>div {
    width: 8em;
    height: 8em;
    background-color: rgba(255,255,255,0.6);
    border-radius: 4em;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.entity .field.self>div {
	font-size: 0.92em;
}
.module.edit .singular label,
.module.edit .description label {
	display: none;
}
@keyframes dragOver {
	from { box-shadow: 0 0 0 0em rgba(230, 120, 41, 1); }
	to { box-shadow: 0 0 0 5em rgba(230, 120, 41, 0); }
}
.field.self .filled {
    box-shadow: 0 0 0 0.5em rgba(144, 165, 183, 0.5);
}
.field.self .dropfile.dragover {
	background-color: rgba(230, 120, 41, 1);
	color: #fff;
    animation: dragOver 0.8s infinite;
}
.field.self span {
	padding: 1.25em;
	font-size: 0.95em;
	text-shadow: 1px 1px #fff;
}
.field.self img {
	max-width: 100%;
}
.field.self input {
	opacity: 0;
	position: absolute;
	top: -100em;
}
.field.self button {
    font-size: 0.75em;
    margin: 1em 0 0 0;
}
.access-fields {
	width: 23em;
}
.access-fields legend {
	padding-top: 0;
}
.tree ul {
	list-style: none;
}
.tree h2 {
	font-size: 1.25em;
	margin: 0.25em 0;
	font-weight: normal;
}
.tree li.selected h2 {
	font-weight: bold;
}
.tree h2 a {
	text-decoration: none;
}
.lists ul img {
	height: 1.5em;
	vertical-align: middle;
	margin: 0 0.5em 0 0;
}
.edit .list-items ul {
	font-size: 0.8em;
}
.list-items a {
	text-decoration: none;
}
.lists header {
	display: flex;
	align-items: center;
	margin: 2em 0 0 0;
}
.lists h4 {
	margin: 0;
}
.lists button {
	font-size: 0.8em;
	margin: 0 0 0 auto;
}
.list-items li div {
    width: calc(100% - 2.5em);
}
button.delete {
	background: rgba(255, 138, 138, 0.24) url(assets/close.png) no-repeat center/40%;	
}
.tabs {
	box-shadow: 0 -0.1em 0 0 #b2c4d5 inset;
	display: flex;
	flex-flow: row;
	margin: 1em 0 0 0;
}
.tabs button {
    background-color: transparent;
    color: #3673a6;
    padding: 0.75em 1.5em;
    box-shadow: none;
    min-width: 8em;
    font-size: 1em;
    font-weight: normal;
    border-radius: 0;
    margin: 0;
    height: auto;
}
.tabs button:hover {
    color: #003d70;
	box-shadow: 0 -0.1em 0 0 #3673a6 inset;
    transition: all 0.4s;
}
.tabs button.selected {
    color: #003d70;
    font-weight: bold;
    box-shadow: 0 -0.2em 0 0 #d77f27 inset;
    transition: all 0.4s;
    cursor: default;
}
.formbuilder {
	display: flex;
	flex-flow: row nowrap;
	margin: 2em 0 0 0;
	max-width: 50em;
}
.formbuilder .available {
	width: 20%;
	margin: 0 2em 0 0;
	list-style: none;
	padding: 0;
}
.draggedField,
.formbuilder .available li {
	background-color: #e1e9ef;
	padding: 0.5em;
	font-size: 0.86em;
	margin: 0 0 0.4em 0;
	border-radius: 0.25em;
	cursor: move;
	color: #285374;
	display: flex;
	align-items: center;
	user-select: none;
    transition: all 0.2s;
}
.draggedField,
.formbuilder .available li:hover {
	background-color: #edf4f8;
    box-shadow: 0.05em 0.1em 0.3em -0.1em rgba(12, 43, 67, 0.5), 0 0 0.1em rgba(52, 98, 152, 0.61) inset;
    transform: translateY(-1px);
    transition: all 0.2s;
}
.draggedField img,
.formbuilder .available img {
    height: 1.5em;
    margin: 0 0.5em 0 0;
}
.formbuilder h2 {
	margin: 0;
	color: #003d70;
}
.formbuilder p {
	margin: 0.5em 0;
	color: #475b6b;
	font-size: 1.1em;
}
.formbuilder .placed {
	flex: 1 1 auto;
}
.formbuilder .drop {
    display: flex;
    flex-flow: column nowrap;
    padding: 0.25em 0.25em 2.5em 0.25em;
    border-radius: 0.4em;
}
.formbuilder .drop:empty {
	background-color: rgba(65, 108, 131, 0.1);
    padding: 1em;
	background-color: rgba(18, 62, 86, 0.1);
    border: 0.15em dashed #cacfd3;
    padding: 1em;
    border-radius: 0.5em;
    align-items: center;
}
.formbuilder .drop:empty::before {
    content: "Arraste os campos para cá.";
    color: #abb3bb;
    font-size: 1.15em;
    background: transparent url(assets/draghere.png) no-repeat left top / auto 79%;
    padding: 6em 0 0 0;
    display: block;
    margin: 2em 0;
}
.formbuilder .drop.active {
	border-color: #999;
}
.formbuilder .drop.target {
	background-color: #fff;
}
.formbuilder .buttons {
	background-color: transparent;
	padding: 0;
	margin: 1em 0 0 0;
}
.drop>.field {
	background-color: #e3e9ec;
	box-shadow: 0 0 0 0.08em #d7dfe4;
	padding: 0;
	margin: 0 0 0.6em 0;
	display: flex;
	flex-flow: row nowrap;
	border-radius: 0.3em;
}
.drop .field .props {
	flex: 1 1 auto;
    display: flex;
    flex-flow: column nowrap;
    padding: 0.75em;
}
.drop .field .tools {
	flex: 0 0 auto;
    width: 3em;
    background-color: #d7dfe4;
    align-items: center;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    padding: 0.5em;
}
.trash, .settings {
	background-color: transparent;
	box-shadow: none;
	width: 1.6em;
	height: 1.6em;
	padding: 0;
	opacity: 0.6;
}
.trash:hover, .settings:hover {
	opacity: 0.8;
}
.open .settings {
	opacity: 1;
}
.open .moresettings {
	max-height: 38em;
}
.trash {
    background: transparent url(assets/ico_trash.png) no-repeat center / contain;	
}
.settings {
    background: transparent url(assets/ico_settings.png) no-repeat center / contain;	
}
.field .props > label {
	padding-bottom: 0.35em;
}
.moresettings {
	max-height: 0;
	overflow: hidden;
	transition: all 0.5s;
	font-size: 0.85em;
}
@media (max-width: 800px) {
	body {
		font-size: 10px;
	}
}
@media (max-width: 500px) {
	body {
		font-size: 8px;
	}
}