[component="TrunkLogin"] {
  position:absolute;
  margin-top:-100px;
  top:40%;
  left: 0;
  right: 0;
}

[component="TrunkLogin"] form {
  padding: 8px;
  border:solid gray 1px;
  max-width:300px;
  margin: auto;
  border-radius:3px;
  box-shadow:2px 2px 8px rgba(0,0,0,0.4);

  font-family: sans-serif;
  font-size: 14px;
  background-color: white;
}

[component="TrunkLogin"] .errors,
[component="TrunkLogin"] .inputs,
[component="TrunkLogin"] .buttons {
  margin: 8px;
}

[component="TrunkLogin"] .errors {
  color: red;
  margin-left: -8px;
  margin-right: -8px;
  padding:8px 16px;
  background-color: #FFE0E0;
  text-align: center;
}

[component="TrunkLogin"] .inputs label {
  display:block;
  border: solid silver 1px;
  margin: 8px 0;
}

[component="TrunkLogin"] .inputs input {
  border: 0;
  margin: 0;
  padding: 7px 0;
  display: block;
  width: 100%;
  background-color: white;
}

[component="TrunkLogin"] .buttons {
  text-align: right;
  background-repeat: no-repeat !important;
  background-position: 8px center !important;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAPNJREFUWMPtlTEKwkAQRZ+2qTT2egVBsBFS2gYPlSY5Qw6Qwt4mB7DxCpJa9AAB12YCS1hjYlYDuh8Gls3OzMvMLAv/rlHH8ztgCyyBBTCR/RtwBk7AAdjbhJwBKaDE7tq6bvq3VHx7KW5I1tbidxJPgcJC8soKidlKc6CslbNaX4AI2ACe5uPJXiRnlMG/lNgv/7w09PkKhB0qGIqPMkA0VqIwJM96zFBmgCi6DFxi4RYlbQbTN/Qts3iVM8M8+fVDK+Co9dy2qpk4Sq6nWgPBBwACif07yrW+5t96jHQpG7HGQ5fRATgAB+AAHIADGBzA6QGaI31VVX87mAAAAABJRU5ErkJggg==') !important;
}[component="TrunkToolbar"] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}

[component="TrunkToolbar"] .toolbar {
  background-color: #222222;
  border-bottom: solid black 1px;
}

/* link styles */
[component="TrunkToolbar"],
[component="TrunkToolbar"] .link {
  color: white;
  text-decoration: none;
  font-family: sans-serif;
  font-size: 14px;
}

[component="TrunkToolbar"] .link {
  display: inline-block;
  height: 16px;
  padding: 6px 12px 8px;
  border-top-style: solid;
  border-top-width: 2px;
  border-color: transparent;
  cursor: pointer;
  opacity: 0.75;
}

[component="TrunkToolbar"] .link:hover {
  background-color: rgba(0,0,0,0.6);
}

[component="TrunkToolbar"] .link.selected {
  border-color: white;
  opacity: 1;
}

/* Icon styles */
[component="TrunkToolbar"] .link.icon {
  background-position: 9px center;
  background-repeat: no-repeat;
}

[component="TrunkToolbar"] .link.icon:before {
  display: inline-block;
  width: 24px;
  content: '';
  background-color: white;
}

/* Expand button */
[component="TrunkToolbar"] .expand-button {
  display: none;
  float: left;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAADlJREFUSMft0lENACAMA9EbBvDvkik4VAx+egKaNHmQflfqAfbQfpfq5IMF9OB+B0kURVEURVF60gXZuyBu3PIh+gAAAABJRU5ErkJggg==');
}

/* logo */
[component="TrunkToolbar"] .logo {
  display: inline-block;
  float: left;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAUNJREFUSMftlDFKg0EQhd+EmFIIGKsUgqUEFC8QsPMEVrlAbhDS2HoQ8QRWkXgBMY1dBLuACCnSGXifzSYsIWj+XwMWec3uz86bt/N25pe2jPgpAKgDZxFxBNQjQpKmkt4kPUfEtJSy7YbtW2Bie2Z7DmCbtJ/ZnqSYxsaJgRrQXyTL1xxrzvpA7VuLbB9ExJ2kC0DJDkl6kvQCvEtSRBxKOpF0vpLvQdJVRHyssySA8eKC6XaPQAvYB6pZlVVg33YrxSw5wNh2rBMYZuXPbV8XsPUamGf84WpAN7P3E+iUaIpO4i7QzQVObY/SwU3ZngduUgUj4HRdQBto/kKgCbQLDVpGPpZ0mT7vI+L1T0ce6GV939uUVymgsZdmYLn/a4FSqBS0absC2a9DO4t2FpUSiIhYiGzsVbWAwEBSLb3DQP8FX8BoW+3VBAaNAAAAAElFTkSuQmCC');
}

/* user */
[component="TrunkToolbar"] .user {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAJpJREFUSMfdlMERhCAQBHcvAkIwFEI5M9AMCMWQCMEQMIK+z33wwXKIZxX9pewpnGJEngbwQCQnAr6XvIS/GhCNgGg51AjAFKgWHa+CfOrR4XM36MX4AatxPl8q2SraKnjwDgAHBOP3BcD9uj/u+2GijlQdBLyBnTYSsJRmuVV8Zs9mHNi4h01ERGsGrXlJVXWMd3Dc5D7kH3wAOZeq86WpPscAAAAASUVORK5CYII=');
}
/* logout */
[component="TrunkToolbar"] .logout {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAQlJREFUSMfNVVERgzAMTVBQCTgACZUwCUioFCRUwiRMAjhAQh28/ZRb1qM0gdvd3h0/bfJemyYPIiUARHwQtXlsEMBXIrMqt6Mfozs5sTPcrjepAgi51kmWSOJgPVx5TBgE2o8vTr5jUwhsxVao1rEITABGhcCYYyX6ZmkA+LJNjwTynj8tFQBXBMzWQQMwFxxObk7NKypateCY5BxIwpWZN6tAzlnFUl8btHRjcNNfWIW7wedqArLmw9VHJqJBLG2mNlUI1NtUM2gNct/0pIpVeCV5Us3RgdkhX72vHGg+iA8muxZYALzyt1RiovWHY0G44i1RQRzP2poVQo6IHoVf7X3+ZOZTa3kDwwHSEN4i+N4AAAAASUVORK5CYII=');
}

[component="TrunkToolbar"] .form-logout {
  display: none;
}

/* Left menu */
[component="TrunkToolbar"] .left {
  display: block;
}

/* Right menu */
[component="TrunkToolbar"] .right {
  display: block;
  float: right;
}

/* Mobile devices */
@media (max-width: 1024px) {

  [component="TrunkToolbar"] .shadow {
    z-index: 9998;
    background-color: rgba(0,0,0,0);
    transition: background-color 0.4s ease;
  }

  [component="TrunkToolbar"] .expand-button {
    display: block;
  }

  [component="TrunkToolbar"] .logo {
    float: none;
  }

  [component="TrunkToolbar"] .user-name {
    display:none;
  }

  [component="TrunkToolbar"] .left {
    margin-left: -400px;
    position: absolute;
    top: 33px;
    left: 0;
    bottom: 0;
    z-index: 9999;
    overflow-y: auto;
    background: #222222;
    width: 300px;
    max-width: 80%;
    box-shadow: 8px 0 8px rgba(0,0,0,0.6);
    transition: margin-left 0.4s ease;
  }

  /* Expanded behaviour */
  [component="TrunkToolbar"].expanded {
    bottom: 0;
  }

  [component="TrunkToolbar"].expanded .shadow {
    position: absolute;
    top: 32px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.8);
  }

  [component="TrunkToolbar"].expanded .left {
    margin-left: 0;
  }

  [component="TrunkToolbar"].expanded .left .link {
    display: block;
    padding: 8px 12px;
    border-top: none;
    border-left-style: solid;
    border-left-width: 2px;
  }

}


/* Special styles to fit the rest of the screen */
[component="TrunkToolbarWorkspace"] {
  position: absolute;
  top: 33px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
}
.docuss {
  font-family: sans-serif;
  max-width: 800px;
  margin: 0 auto;
  padding: 16px;
  overflow-x: hidden;
}

.docuss {
  text-align: justify;
  font-size: 90%;
}

.docuss p {
  line-height: 150%;
}

.docuss:first-letter {
  font-size: 200%;
}

.docuss tt {
  border: solid silver 1px;
  border-radius: 3px;
  background-color: #F8F8F8;
  padding: 1px;
}

/************************************ first-page ************************************/
.first-page {
  padding: 64px 0;
}

.first-page .document-title {
  font-size: 300%;
  font-weight: bold;
  text-align: center;
}

.first-page .document-meta {
  font-size: 60%;
  margin: 32px auto;
  max-width: 400px;
}

.first-page .document-meta .title {
  text-align: right;
  color: silver;
  text-transform: capitalize;
  vertical-align: top;
}

.first-page .document-meta .title:after {
  content: ':';
}

.first-page .document-meta .contents {
  color: gray;
}

/************************************ headers ************************************/
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  color: black;
  text-decoration: none;
}

h1 .identation,
h2 .identation,
h3 .identation,
h4 .identation,
h5 .identation,
h6 .identation {
  color: silver;
  padding-right: 0.5em;
}

h1:hover .identation,
h2:hover .identation,
h3:hover .identation,
h4:hover .identation,
h5:hover .identation,
h6:hover .identation {
  text-decoration: underline;
}

h1:target .identation,
h2:target .identation,
h3:target .identation,
h4:target .identation,
h5:target .identation,
h6:target .identation {
  color: dodgerblue;
}

/************************************ code ************************************/
.code-frame {
  padding: 16px 0;
}

.code-title {
  border: solid gray 1px;
  background-color: gray;
  color: white;
  font-size: 14px;
  padding: 2px;
}

.code-frame pre {
  display: block;
  margin: 0;
  border: dashed gray 1px;
  border-top: none;
  overflow: hidden;
}

.code-frame:hover pre {
  overflow: auto;
}

/************************************ index ************************************/
.index {
  border: solid silver 1px;
  background: #F5F5F5;
  padding: 16px;
}

.index a {
  color: dodgerblue;
  text-decoration: none;
}

.index a:hover {
  text-decoration: underline;
}

.index .identation {
  padding-right: 0.5em;
}

.index ol {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.index ol ol {
  padding-left: 32px;
}

blockquote {
  border: solid silver 1px;
  padding: 16px 16px 16px 48px;
  font-style: oblique;
  background-color: #F4F4F4;
  margin: 0;
}

.comentario {
  display: inline-block;
  margin-left: 4px;
  position: absolute;
  max-width: 600px;
  border-radius: 3px;
  overflow: hidden;

  transition: all 0.3s ease;
}

.comentario-ver {
  font-size: 10px;
  padding: 3px;
  cursor: pointer;
  background-color: silver;
  color: white;
  width: auto;
  min-width: 90px;
  text-align: center;

  transition: all 0.3s ease;
}

.comentario-texto {
  display: none;
  padding: 8px;
  border: solid orange 1px;
  max-height: 400px;
  overflow-y: auto;
}

.comentario:hover {
  z-index: 999;
  box-shadow: 2px 2px 2px rgba(0,0,0,0.4);
}

.comentario:hover .comentario-ver {
  width: 100%;
  background-color: orange;
}

.comentario:hover .comentario-texto {
  display: block;
  background-color: rgba(255,255,255, 0.85);

}[component="TrunkTab"] {
  border-bottom: solid silver 1px;
}

[component="TrunkTab"] [component="TrunkButton"] {
  margin-right: 2px;
  margin-bottom: -1px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-color: white;
}

[component="TrunkTab"] [component="TrunkButton"]:hover {
  background-color: white;
  border-bottom-color: white;
}

[component="TrunkTab"] [component="TrunkButton"].none,
[component="TrunkTab"] [component="TrunkButton"].none:hover {
  border-bottom-color: transparent;
}
[component=TrunkInputButton] {
  text-align: center;
  padding: 0;
  margin: auto;
  max-width: 400px;
}

[component=TrunkInputButton] .input-border {
  padding: 0;
  margin: 0;
  border: solid silver 1px;
  border-right: none;
  margin-right: 50px;
  background-color: white;
}

[component=TrunkInputButton] input {
  padding: 8px 0;
  margin: 0;
  height: 19px;
  border: none;
  display: block;
  width: 100%;
}

[component=TrunkInputButton] button {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  display: block;
  float: right;
  width: 50px;
  height: 37px;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAHNJREFUOMvtlEEKgDAMBLf9xoL4E+vL7U9EYR/QF+hJ6SEHsQE9dG8JYchmaYGuVgWrKWkguT8BSDrqOhoDI4Dt7YbRgK0tlqMn7L6hpAlAdsikBEeYHcr/LFehJADLVZMMTZZJZgCz6w29oNZzSv1X+k4nXy4pS4KwuvEAAAAASUVORK5CYII=');
}

[component=TrunkInputButton].search button {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAWBJREFUSMetlc11g0AMhD94uTt3HUw6oAR34HQA7oASXILTAXTgEijB7oAcdCcd5CLyNmL5e2ZuwK5GGklDwgRUtQROQOY+tUAtIh0rkEQCfwI34LhwtwEqEelXE6hqDRSsxw9wEpHHIsFE8G/gDgxZ5sB5C8lbIEvhLlUiUkckzEzCgegA1EYer0BVu0DzxbInKr7EEkptWsKGVkvBAUSkNAkHXGPnUhvFP81jWcwgDHo0+UYE4cs72+DPRwlC9FuiL+1AjGB3eIJ8y2VVzdcQtMHzOdaoGVROsjZG4KfmtiH7wnnTuAJzxcZVUa8I3s6M7GiT34HO1j70oStwH6bFAlcThtjY8k2a3ZDV4YWhGZGkQYMettXPFwgKL2/qpuAhIjlwcT7j7bkBPiYa+48kWWhm5tffj+LMT6oRkTLZY1tnSL52sQprbEyuLNnTd1wlT+CU7G1uqnqzvpUi0v8CaSmPya/yj2AAAAAASUVORK5CYII=');
}

[component=TrunkInputButton].new button {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAFdJREFUOMtjZCAAnj59+oGBgYEfyv0oLS0tgE89EwNhwI+DTbaBJIFRAwehgYxPnz79T0XzPlLbhfw0CcOP1PQyIxF5GSWMpaWlGUfT4aiBRKQtHGysAABkgRG24U1vqQAAAABJRU5ErkJggg==');
}
[component="TrunkButton"] {
  display: inline-block;
  text-decoration: none;
  padding: 8px 12px;
  margin: 0px;
  border-radius: 4px;
  cursor: pointer;
  border: solid 1px;
  text-transform: capitalize;
  font-size: 14px;
  text-align: center;
  background-image: none;
  background-repeat: no-repeat;
  background-position: center center;

  /* custom styles */
  color: #333;
  background-color: white;
  border-color: #adadad;
}

[component="TrunkButton"]:hover {
  background-color: #ebebeb;
  border-color: #adadad;
}

[component="TrunkButton"].blue {
  color: #fff;
  background-color: #428bca;
  border-color: #357ebd;
}

[component="TrunkButton"].blue:hover {
  color: #fff;
  background-color: #3276b1;
  border-color: #285e8e;
}

[component="TrunkButton"].green {
  color: #fff;
  background-color: #5cb85c;
  border-color: #4cae4c;
}

[component="TrunkButton"].green:hover {
  color: #fff;
  background-color: #47a447;
  border-color: #398439;
}

[component="TrunkButton"].aqua {
  color: #fff;
  background-color: #5bc0de;
  border-color: #46b8da;
}

[component="TrunkButton"].aqua:hover {
  color: #fff;
  background-color: #39b3d7;
  border-color: #269abc;
}

[component="TrunkButton"].orange {
  color: #fff;
  background-color: #f0ad4e;
  border-color: #eea236;
}

[component="TrunkButton"].orange:hover {
  color: #fff;
  background-color: #ed9c28;
  border-color: #d58512;
}

[component="TrunkButton"].red {
  color: #fff;
  background-color: #d9534f;
  border-color: #d43f3a;
}

[component="TrunkButton"].red:hover {
  color: #fff;
  background-color: #d2322d;
  border-color: #ac2925;
}

[component="TrunkButton"].purple {
  color: #fff;
  background-color: #ca8bca;
  border-color: #bd7ebd;
}

[component="TrunkButton"].purple:hover {
  color: #fff;
  background-color: #b176b1;
  border-color: #8e5e8e;
}

[component="TrunkButton"].gray {
  color: #fff;
  background-color: #888888;
  border-color: #777777;
}

[component="TrunkButton"].gray:hover {
  color: #fff;
  background-color: #555555;
  border-color: #555555;
}

[component="TrunkButton"].none {
  color: #428bca;
  background-color: transparent;
  border-color: transparent;
}

[component="TrunkButton"].none:hover {
  color: #2a6496;
  border-color: #2a6496;
}

[component="TrunkButton"]:focus,
[component="TrunkButton"]:focus {
  outline: none;
  box-shadow: 0 0 4px dodgerblue;
}

[component="TrunkButton"][disabled] {
  opacity: 0.65;
  cursor: none;
}[component] {
   font-family: sans-serif;
}

.TrunkMargin {
   margin: 16px;
}

/* Mobile devices */
@media (max-width: 1024px) {

   .TrunkMargin {
      margin: 0;
   }

}
.trunk-logo {
  cursor: none;
  color: #555;
}

.trunk-logo .t,
.trunk-logo .c {
  border-bottom: solid 2px transparent;
  border-radius: 4px;
  padding: 0 2px;
  transition: all 0.6s ease;
}

.trunk-logo .t {
  border-bottom-color: dodgerblue;
}

.trunk-logo:hover .t {
  border-bottom-color: transparent;
}

.trunk-logo:hover .c {
  border-bottom-color: dodgerblue;
}/* Your CSS here */#tools {
	padding: 32px;
	display: block;
	margin: auto;
	max-width: 800px;
	list-style-type: none;
	text-align: center;
}

#tools LI {
	display: inline-block;
	margin:8px;
}

#tools LI [component] {
	width:200px;
}