woodpecker/server/app/styles/drone.css

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  list-style: none;
}
.hidden {
  display: none !important;
  visibility: hidden;
}
.invisible {
  visibility: hidden;
}
.clearfix {
  *zoom: 1;
}
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}
.nowrap {
  white-space: nowrap;
}
.border_box {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}
.fix3d {
  -webkit-transform: translate3D(0, 0, 0);
}
.border_box {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}
.invert {
  -webkit-filter: invert(100%);
  -moz-filter: invert(100%);
  -ms-filter: invert(100%);
  -o-filter: invert(100%);
  filter: invert(100%);
}
html {
  height: 100%;
}
body {
  font-family: 'Open Sans';
  font-weight: normal;
  margin: 0px;
  color: #262626;
  background: #fff;
  font-size: 13px;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
  height: 100%;
  position: relative;
}
[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
  display: none;
}
#container {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  padding-top: 55px;
  position: relative;
  min-width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}
#header {
  background: #262626;
  position: fixed;
  height: 55px;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9;
  color: #fff;
  font-size: 15px;
  line-height: 55px;
  text-align: center;
}
#header .brand {
  display: inline-block;
  font-family: 'Orbitron';
  font-size: 26px;
  line-height: 55px;
  text-decoration: none;
  text-transform: uppercase;
  color: #CCC;
}
#header .burger {
  position: absolute;
  top: 0px;
  left: 31px;
  height: 55px;
  font-size: 22px;
  color: #CCC;
}
#header .burger i.fa {
  line-height: 55px;
}
#header .login,
#header .user {
  position: absolute;
  right: 0px;
  top: 0px;
  bottom: 0px;
  white-space: nowrap;
  margin-right: 20px;
  display: inline-block;
}
#header .login a,
#header .user a {
  color: #CCC;
  text-decoration: none;
  text-transform: uppercase;
  line-height: 55px;
  font-size: 15px;
}
#header .login a img,
#header .user a img {
  border-radius: 50%;
  float: right;
  width: 32px;
  height: 32px;
  margin-top: 10px;
  margin-left: 20px;
}
#body {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  display: flex;
  min-width: 100%;
  flex-direction: row-reverse;
  justify-content: space-between;
}
#body article {
  width: 100%;
}
#drawer {
  visibility: hidden;
  position: fixed;
  z-index: 10;
  left: 0px;
  top: 55px;
  bottom: 0px;
  width: 255px;
  background: #363636;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
  -webkit-transform: translate3d(-100%, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(-100%, 0, 0);
}
#drawer ul {
  margin-top: 20px;
}
#drawer ul a {
  color: #CCC;
  text-decoration: none;
  padding: 10px 0px 10px 30px;
  display: block;
  font-size: 14px;
}
#drawer ul a i {
  margin-right: 10px;
  font-size: 16px;
  opacity: 0.3;
  min-width: 16px;
  display: inline-block;
}
#drawer ul span.divider {
  display: block;
  height: 1px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 15px;
  margin-bottom: 15px;
}
#drawer .signout {
  position: absolute;
  bottom: 20px;
  right: 30px;
  color: #CCC;
  font-size: 16px;
  text-transform: uppercase;
  text-decoration: none;
}
#drawer .signout i {
  margin-left: 20px;
}
#drawer-checkbox {
  position: fixed;
  top: 7px;
  left: 10px;
  width: 45px;
  height: 40px;
  display: block;
  z-index: 9999;
  opacity: 0;
  background: none;
  border: none;
  cursor: pointer;
}
#drawer-checkbox:checked ~ #drawer {
  visibility: visible;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
#drawer-checkbox:checked ~ #drawer {
  visibility: visible;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
#drawer-checkbox:checked ~ #header .fa-bars:before {
  content: "\f00d";
  color: #999;
}
nav {
  padding-left: 30px;
  background: #FFF;
  min-height: 77px;
  max-height: 77px;
  line-height: 77px;
  font-family: 'Open Sans';
  font-size: 22px;
  white-space: nowrap;
  color: rgba(0, 0, 0, 0.7);
  border-bottom: 1px solid #EEE;
  position: relative;
  z-index: 2;
}
nav a {
  text-decoration: none;
  color: rgba(0, 0, 0, 0.7);
}
nav a:last-child {
  color: #000;
}
nav a span.fa {
  margin-right: 20px;
}
nav div.options {
  float: right;
  margin-right: 20px;
}
nav div.options .pure-button {
  color: #FFF;
  text-transform: lowercase;
  font-size: 14px;
  background: #f2f5f8;
  padding: 10px 30px;
  color: rgba(0, 0, 0, 0.5);
}
nav div.options .pure-button i {
  margin-right: 10px;
  margin-left: -10px;
}
@supports (position:sticky) {
  nav {
    position: sticky;
    top: 55px;
  }
}
@supports (position:-moz-sticky) {
  nav {
    position: -moz-sticky;
    top: 55px;
  }
}
@supports (position:-webkit-sticky) {
  nav {
    position: -webkit-sticky;
    top: 55px;
  }
}
.cards .card {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  padding-right: 20px;
  padding-bottom: 20px;
  text-decoration: none;
  position: relative;
  color: #262626;
  font-family: 'Open Sans';
}
.cards .card[data-status="Success"] em {
  border-top: 5px solid #68c598;
}
.cards .card[data-status="Killed"] em,
.cards .card[data-status="Failure"] em,
.cards .card[data-status="Error"] em {
  border-top: 5px solid #e97041;
}
.cards .card[data-status="Killed"] .l-box,
.cards .card[data-status="Failure"] .l-box,
.cards .card[data-status="Error"] .l-box {
  border: 1px solid #e97041;
}
.cards .card[data-status="Killed"] .l-box:hover,
.cards .card[data-status="Failure"] .l-box:hover,
.cards .card[data-status="Error"] .l-box:hover {
  border: 1px solid #262626;
}
.cards .card[data-status="Killed"]:after,
.cards .card[data-status="Failure"]:after,
.cards .card[data-status="Error"]:after {
  font-family: 'FontAwesome';
  font-size: 16px;
  position: absolute;
  right: 12px;
  top: -8px;
  content: "\f111";
  color: #e97041;
  min-width: 16px;
  text-align: center;
}
.cards .card .l-box {
  background: #FFF;
  border: 1px solid #DDD;
  position: relative;
  padding: 30px 20px;
  height: 200px;
  -webkit-transition: 0.4s border linear;
  -moz-transition: 0.4s border linear;
  -ms-transition: 0.4s border linear;
  -o-transition: 0.4s border linear;
  transition: 0.4s border linear;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}
.cards .card .l-box:hover {
  border: 1px solid #262626;
}
.cards .card .l-box em {
  position: absolute;
  bottom: 20px;
  right: 20px;
  left: 20px;
  height: 30px;
  line-height: 30px;
  vertical-align: middle;
  text-align: right;
  padding-right: 45px;
  padding-top: 20px;
  font-size: 14px;
  color: #666;
}
.cards .card .l-box img {
  position: absolute;
  right: 20px;
  bottom: 20px;
  border-radius: 50%;
  width: 30px;
  height: 30px;
}
.cards .card .l-box .timeago {
  position: absolute;
  bottom: 85px;
  left: 25px;
  right: 25px;
  text-align: right;
  font-size: 14px;
  color: #849299;
  display: none;
}
.cards .card h2 {
  font-size: 18px;
  font-weight: normal;
  min-height: 52px;
  max-height: 52px;
  height: 52px;
  text-align: center;
  vertical-align: middle;
  line-height: 26px;
  color: #262626;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}
.cards .card h2 .separator {
  margin: 0px 0px;
}
.cards .card.card-inactive .l-box {
  position: relative;
  box-shadow: none;
  background: #4ab1ce;
  color: #FFF;
  height: 180px;
  border-color: #4ab1ce;
}
.cards .card.card-inactive .l-box:hover {
  background: #3197b4;
}
.cards .card.card-inactive .l-box:hover:before {
  background: #3197b4;
}
.cards .card.card-inactive h2 {
  padding-top: 10px;
  color: #FFF;
}
.cards .card.card-inactive em {
  position: absolute;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  bottom: 15px;
  font-size: 13px;
  left: 25px;
  right: 25px;
  line-height: 1.3;
  padding: 0px;
  padding-top: 20px;
  text-align: center;
  display: block;
  height: 30px;
  text-transform: uppercase;
  color: #FFF;
}
.cards .card.card-browse-inactive,
.cards .card.card-browse {
  text-align: center;
  color: #4ab1ce;
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
}
.cards .card.card-browse-inactive .l-box,
.cards .card.card-browse .l-box {
  padding-top: 75px;
  background: #FFF;
  height: 180px;
}
.cards .card.card-browse-inactive .l-box {
  box-shadow: none;
}
.cards .progressContainer {
  height: 5px;
  background-color: #e97041;
  position: absolute;
  bottom: 65px;
  left: 20px;
  right: 20px;
}
.cards .progressContainer .activeProgress,
.cards .progressContainer .secondaryProgress {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
}
.cards .progressContainer .activeProgress {
  background-color: #68c598;
}
.cards .progressContainer .secondaryProgress {
  background-color: #68c598;
}
#commitpage {
  max-width: 1180px;
  margin: 0px auto;
  margin-bottom: 50px;
  margin-top: 70px;
}
#commitpage section {
  margin-top: 30px;
}
#commitpage section .commits {
  border: 1px solid #DDD;
  border-bottom: 0px solid #DDD;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}
#commitpage section .commits a {
  padding: 20px 45px;
  display: block;
  border-bottom: 1px solid #dadcdd;
  color: #262626;
  text-decoration: none;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}
#commitpage section .commits a h2 {
  font-family: 'Open Sans';
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 5px;
}
#commitpage section .commits a img {
  border-radius: 50%;
  margin-right: 10px;
  float: left;
  display: none;
}
#commitpage section .commits a p {
  color: #363636;
  line-height: 22px;
  vertical-align: middle;
}
#commitpage section .commits a[data-status]:before {
  background: transparent;
  width: 7px;
  min-width: 7px;
  max-width: 7px;
  position: absolute;
  left: -1px;
  top: 0px;
  bottom: 0px;
  text-align: left;
  color: #fff;
  font-size: 20px;
  line-height: 50px;
  font-family: 'Open Sans';
  padding-left: 2px;
  overflow: hidden;
  content: " ";
}
#commitpage section .commits a[data-result="Killed"],
#commitpage section .commits a[data-status="Error"],
#commitpage section .commits a[data-status="Failure"] {
  background: #fff9f5;
}
#commitpage section .commits a[data-result="Killed"]:before,
#commitpage section .commits a[data-status="Error"]:before,
#commitpage section .commits a[data-status="Failure"]:before {
  background: #e97041;
  content: "!";
}
#commitpage section .commits a[data-status="Success"]:before {
  background: #68c598;
}
#commitpage .date span {
  display: inline-block;
  text-align: right;
  font-size: 14px;
  width: 100%;
  padding-right: 30px;
  margin-top: 15px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}
#loginpage .pure-g {
  padding: 30px;
  border: 1px solid #DDD;
  max-width: 400px;
  margin: 0px auto;
  margin-top: 50px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}
#loginpage .pure-g a {
  display: block;
  background: #45494b;
  color: #fff;
  padding: 14px 20px;
  font-size: 15px;
  border-radius: 5px;
  text-decoration: none;
}
#loginpage .pure-g a:hover {
  background: #262626;
}
#loginpage .pure-g [class*="fa-"] {
  float: left;
  font-size: 20px;
  position: relative;
  top: -3px;
  left: -3px;
  padding-right: 10px;
  min-width: 27px;
  min-height: 20px;
}
#loginpage .pure-g .pure-u-1 a {
  margin-bottom: 10px;
}
#loginpage .pure-g .pure-u-1:last-child a {
  margin-bottom: 0px;
}
#syncpage {
  width: 100%;
}
#syncpage section {
  padding: 40px 0px 20px 0px;
}
#syncpage section h1 {
  text-align: center;
  font-size: 24px;
  margin-bottom: 20px;
}
#syncpage section h1 i {
  font-size: 32px;
  margin-top: 20px;
}
#homepage {
  width: 100%;
  background: #f2f5f8;
}
#homepage section {
  padding: 40px 0px 20px 0px;
  border-bottom: 1px solid #EEE;
}
#homepage section h1 {
  text-align: center;
  font-size: 24px;
  margin-bottom: 20px;
}
#homepage section h1 i {
  font-size: 32px;
  margin-top: 20px;
}
#homepage section div {
  max-width: 1180px;
  margin: 0px auto;
}
#homepage section:nth-child(2) {
  background: #FFF;
  padding: 40px 0px 20px 0px;
}
#homepage section:nth-child(3) {
  border-bottom: 0px solid #EEE;
}
#homepage section .card[data-status="Killed"] .l-box,
#homepage section .card[data-status="Failure"] .l-box,
#homepage section .card[data-status="Error"] .l-box {
  border: 1px solid #e97041;
}
#homepage section .card[data-status="Killed"] .l-box:hover,
#homepage section .card[data-status="Failure"] .l-box:hover,
#homepage section .card[data-status="Error"] .l-box:hover {
  border: 1px solid #262626;
}
#repospage {
  width: 100%;
}
#repospage section {
  border-bottom: 1px solid #eee;
  max-width: 768px;
  margin: 0px auto;
  margin-top: 30px;
  margin-bottom: 30px;
}
#repospage section .search {
  margin-bottom: 25px;
}
#repospage section .search input[type="text"],
#repospage section .search input[type="search"] {
  -webkit-transition: 0.4s border linear;
  -moz-transition: 0.4s border linear;
  -ms-transition: 0.4s border linear;
  -o-transition: 0.4s border linear;
  transition: 0.4s border linear;
  border: 1px solid #ccc;
  border-radius: 0px;
  box-shadow: none;
  padding: 12px;
}
#repospage section .search input[type="text"]:focus,
#repospage section .search input[type="search"]:focus {
  border-color: #129FEA;
}
#repospage section .repo {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  text-decoration: none;
}
#repospage section .repo:last-child > div {
  border-bottom: 1px solid #fff;
}
#repospage section .repo > div {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #eee;
  border-bottom: 1px solid #fff;
  -webkit-transition: 0.4s border linear;
  -moz-transition: 0.4s border linear;
  -ms-transition: 0.4s border linear;
  -o-transition: 0.4s border linear;
  transition: 0.4s border linear;
}
#repospage section .repo > div > div {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  padding: 20px 25px;
}
#repospage section .repo > div > div:last-child div {
  text-align: right;
}
#repospage section .repo > div:hover {
  border: 1px solid #262626;
}
#repospage section .repo h4 {
  font-size: 20px;
  margin-bottom: 2px;
  color: #262626;
}
#repospage section .repo span {
  color: #666;
  font-size: 14px;
}
#repospage section .repo i {
  color: #DDD;
  font-size: 22px;
  margin-left: 20px;
  margin-top: 15px;
}
#repospage section .repo i.fa-check-circle-o {
  color: #68c598;
}
#userspage {
  width: 100%;
}
#userspage section {
  border-bottom: 1px solid #eee;
  max-width: 768px;
  margin: 0px auto;
  margin-top: 30px;
  margin-bottom: 30px;
}
#userspage section .search {
  margin-bottom: 25px;
}
#userspage section .search input[type="text"],
#userspage section .search input[type="search"] {
  -webkit-transition: 0.4s border linear;
  -moz-transition: 0.4s border linear;
  -ms-transition: 0.4s border linear;
  -o-transition: 0.4s border linear;
  transition: 0.4s border linear;
  border: 1px solid #ccc;
  border-radius: 0px;
  box-shadow: none;
  padding: 12px;
}
#userspage section .search input[type="text"]:focus,
#userspage section .search input[type="search"]:focus {
  border-color: #129FEA;
}
#userspage section .user {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  text-decoration: none;
}
#userspage section .user:last-child > div {
  border-bottom: 1px solid #fff;
}
#userspage section .user > div {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #eee;
  border-bottom: 1px solid #fff;
  -webkit-transition: 0.4s border linear;
  -moz-transition: 0.4s border linear;
  -ms-transition: 0.4s border linear;
  -o-transition: 0.4s border linear;
  transition: 0.4s border linear;
}
#userspage section .user > div > div {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  padding: 20px 25px;
  padding-right: 0px;
}
#userspage section .user > div:hover {
  border: 1px solid #262626;
}
#userspage section .user img {
  border-radius: 50%;
  width: 48px;
  height: 48px;
}
#userspage section .user h4 {
  font-size: 20px;
  margin-bottom: 2px;
  color: #262626;
}
#userspage section .user h4 small {
  font-size: 16px;
  color: #666;
  margin-left: 5px;
}
#userspage section .user span {
  color: #666;
  font-size: 14px;
}
#repoconfpage {
  width: 100%;
}
#repoconfpage section {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #eee;
  max-width: 768px;
  margin: 0px auto;
  margin-top: 30px;
  margin-bottom: 30px;
  padding: 20px;
}
#repoconfpage section h2 {
  font-size: 16px;
  margin-bottom: 15px;
}
#repoconfpage section .markdown,
#repoconfpage section .params,
#repoconfpage section .key {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  min-height: 50px;
  margin-top: 10px;
  font-family: 'Droid Sans Mono';
  border: 1px solid #eee;
  padding: 20px;
  width: 100%;
  max-width: 100%;
  color: #666;
}
#repoconfpage section .markdown:focus,
#repoconfpage section .params:focus,
#repoconfpage section .key:focus {
  border-color: #129FEA;
  outline: 0;
}
#repoconfpage section .pure-button-primary {
  color: #FFF;
  background: #4ab1ce;
  padding: 10px 20px;
  margin-top: 20px;
}
#accountpage {
  width: 100%;
}
#accountpage section {
  position: relative;
  max-width: 768px;
  margin: 0px auto;
  margin-top: 30px;
  border: 1px solid #eee;
}
#accountpage section.profile > div:first-child {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  padding: 20px;
  text-align: center;
}
#accountpage section.profile > div:last-child {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  padding: 20px;
}
#accountpage section.profile .fullname {
  font-size: 14px;
  margin-bottom: 2px;
  color: #666;
  display: block;
}
#accountpage section.profile .email {
  font-size: 14px;
  color: #666;
  display: block;
}
#accountpage section.token > div:first-child div {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  padding: 20px;
  color: #666;
  font-size: 16px;
  line-height: 22px;
}
#accountpage section.token > div:first-child i {
  margin-right: 7px;
}
#accountpage section.token > div:last-child {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  padding: 20px;
  color: #666;
  line-height: 22px;
  font-size: 14px;
}
#accountpage section h4 {
  margin: 10px 0px;
  font-size: 22px;
}
#accountpage section h4 small {
  opacity: 0.6;
  font-size: 16px;
  margin-left: 10px;
}
#accountpage section img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
}
#accountpage section .notifications {
  position: absolute;
  top: 0px;
  right: 0px;
  margin: 20px;
}
#accountpage section .button-error {
  color: #FFF;
  background: #ca3c3c;
  padding: 10px 20px;
  float: right;
}
#accountpage section .pure-button-primary {
  color: #FFF;
  background: #4ab1ce;
  padding: 10px 20px;
  margin-top: 10px;
}
#repopage {
  width: 100%;
  background: #f2f5f8;
}
#repopage section {
  padding: 40px 0px 20px 0px;
  border-bottom: 1px solid #EEE;
}
#repopage section > div {
  max-width: 1180px;
  margin: 0px auto;
}
#repopage section:nth-child(even) {
  background: #FFF;
}
#repopage section:first-child {
  background: #FFF;
}
#repopage section .card[data-status="Success"]:nth-child(2) .l-box {
  border-color: #68c598;
}
#repopage section .card[data-status="Success"]:nth-child(2) .l-box:hover {
  border: 1px solid #262626;
}
#repopage section .card[data-status="Killed"]:nth-child(2) .l-box,
#repopage section .card[data-status="Failure"]:nth-child(2) .l-box,
#repopage section .card[data-status="Error"]:nth-child(2) .l-box {
  border-color: #e97041;
}
#repopage section .card[data-status="Killed"]:nth-child(2) .l-box:hover,
#repopage section .card[data-status="Failure"]:nth-child(2) .l-box:hover,
#repopage section .card[data-status="Error"]:nth-child(2) .l-box:hover {
  border: 1px solid #262626;
}
#repopage section .card[data-status="Started"] em:before,
#repopage section .card[data-status="Pending"] em:before {
  -webkit-animation: progress 1s linear infinite;
  -moz-animation: progress 1s linear infinite;
  animation: progress 1s linear infinite;
  position: absolute;
  content: ' ';
  height: 5px;
  top: -5px;
  left: 0px;
  right: 0px;
  margin: 0px;
  background: #fee172;
  background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.55) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0.55) 75%, transparent 75%, transparent);
  background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.55) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0.55) 75%, transparent 75%, transparent);
  background-repeat: repeat-x;
  background-size: 30px 30px;
}
#repopage section .l-box:after {
  font-family: 'FontAwesome';
  content: "\f104";
  content: "\f0d9";
  position: absolute;
  right: -20px;
  width: 20px;
  text-align: center;
  color: rgba(0, 0, 0, 0.1);
  font-size: 22px;
}
#repopage section .card:last-child .l-box:after {
  content: '';
}
#repopage section.nobuilds,
#repopage section.inactive {
  text-align: center;
  padding-bottom: 50px;
}
#repopage section.nobuilds h1,
#repopage section.inactive h1 {
  font-size: 26px;
  color: #262626;
}
#repopage section.nobuilds p,
#repopage section.inactive p {
  font-size: 16px;
  color: #666;
}
#repopage section.nobuilds i,
#repopage section.inactive i {
  font-size: 32px;
  margin-top: 20px;
  margin-bottom: 20px;
}
#repopage section.nobuilds i.fa-file-code-o,
#repopage section.inactive i.fa-file-code-o {
  font-size: 42px;
  margin-top: 30px;
}
#repopage section.nobuilds .pure-button-primary,
#repopage section.inactive .pure-button-primary {
  font-size: 14px;
  text-transform: uppercase;
  background: #4ab1ce;
  padding: 10px 30px;
}
@-webkit-keyframes progress {
  to {
    background-position: 30px 0;
  }
}
@-moz-keyframes progress {
  to {
    background-position: 30px 0;
  }
}
@keyframes progress {
  to {
    background-position: 30px 0;
  }
}
#sidebar {
  width: 240px;
  min-width: 240px;
  position: relative;
  display: block;
  z-index: 5;
  padding: 30px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}
#sidebar h1 {
  font-size: 28px;
  font-weight: 300;
}
#sidebar h2 {
  font-size: 22px;
  font-weight: 300;
  margin-bottom: 20px;
}
#sidebar dl {
  padding-top: 23px;
  border-top: 1px solid #ddd;
  margin-top: 5px;
}
#sidebar dl:first-child {
  padding-top: 0;
  border-top: none;
  margin-top: 0;
}
#sidebar dl dt {
  font-size: 12px;
  color: #849299;
  text-transform: uppercase;
  padding: 3px 0;
}
#sidebar dl dd {
  font-size: 14px;
  padding: 3px 0 20px;
}
#sidebar dl a {
  text-transform: none;
}
#sidebar dl small {
  font-size: 12px;
}
#sidebar dl .large {
  font-size: 18px;
  padding-bottom: 5px;
}
#sidebar dl .time {
  float: right;
  margin-left: 8px;
}
#sidebar dl .photo {
  margin-right: 4px;
}
#sidebar dl .negative {
  color: #e97041;
}
#sidebar dl .photoline {
  display: inline-block;
  position: relative;
  top: -10px;
  font-weight: bold;
}
#sidebar dl .small {
  padding-bottom: 5px;
  font-weight: bold;
  font-size: 12px;
}
#sidebar .status {
  border: 1px solid transparent;
  display: block;
  text-align: center;
  padding: 5px 20px;
  border-radius: 50px;
  text-transform: uppercase;
  margin: 0 -5px 10px;
  font-weight: bold;
}
#sidebar .status:before {
  float: left;
  margin-left: -5px;
}
#sidebar .status.status_ok {
  color: #68c598;
  border-color: #68c598;
}
#sidebar .status.status_ok:before {
  content: "\f00c";
  font-family: 'FontAwesome';
}
#sidebar .status.status_error {
  color: #e97041;
  border-color: #e97041;
}
#sidebar .status.status_error:before {
  content: "!";
}
#sidebar .result {
  background: #4ab1ce;
  background: #68c598;
  color: #fff;
  margin: -30px -30px -6px;
  padding: 30px;
  position: relative;
}
#sidebar .result .status {
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
}
#sidebar .result .status:before {
  content: "\f00c";
  font-family: 'FontAwesome';
}
#sidebar .result dl dd {
  padding: 7px 0;
}
#sidebar .result dl dd strong {
  font-size: 16px;
}
#sidebar .result[data-result="Killed"],
#sidebar .result[data-result="Failure"],
#sidebar .result[data-result="Error"] {
  background: #e97041;
}
#sidebar .result[data-result="Killed"] .status:before,
#sidebar .result[data-result="Failure"] .status:before,
#sidebar .result[data-result="Error"] .status:before {
  content: "!";
}
#sidebar .result[data-result="Pending"],
#sidebar .result[data-result="Started"] {
  background: #4ab1ce;
}
#main {
  flex-grow: 2;
}
#main.output {
  background: #525252;
}
#main.output pre {
  margin: 0px auto;
  padding: 30px;
  color: #FFF;
  font-family: 'Droid Sans Mono';
  font-size: 13px;
  white-space: pre-wrap;
  overflow: hidden;
}
.pure-form.pure-form-stacked label {
  font-size: 14px;
  color: #666;
  margin-top: 20px;
  margin-bottom: 5px;
}
.pure-form.pure-form-stacked label:first-child {
  margin-top: 0px;
}
.pure-form.pure-form-stacked input[type="text"],
.pure-form.pure-form-stacked select {
  min-width: 300px;
  box-shadow: none;
  padding: 10px 10px;
  border: 1px solid #ccc;
  border-radius: 0px;
}
.toggle {
  margin-bottom: 10px;
}
.toggle:nth-child(2) {
  margin-top: 40px;
}
.toggle span {
  line-height: 32px;
  vertical-align: middle;
  display: inline-block;
  margin-left: 10px;
}
.toggle input[type='checkbox'] {
  max-height: 0;
  max-width: 0;
  opacity: 0;
}
.toggle input[type='checkbox'] + label {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  box-shadow: inset 0 0 0px 1px #d5d5d5;
  text-indent: -5000px;
  height: 30px;
  width: 50px;
  border-radius: 15px;
}
.toggle input[type='checkbox'] + label:before {
  content: "";
  position: absolute;
  display: block;
  height: 30px;
  width: 30px;
  top: 0;
  left: 0;
  border-radius: 15px;
  background: rgba(19, 191, 17, 0);
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.toggle input[type='checkbox'] + label:after {
  content: "";
  position: absolute;
  display: block;
  height: 30px;
  width: 30px;
  top: 0;
  left: 0px;
  border-radius: 15px;
  background: white;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.2);
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.toggle input[type='checkbox']:checked + label:before {
  width: 50px;
  background: #4ab1ce;
}
.toggle input[type='checkbox']:checked + label:after {
  left: 20px;
  box-shadow: inset 0 0 0 1px #4ab1ce, 0 2px 4px rgba(0, 0, 0, 0.2);
}
.toast {
  position: fixed;
  bottom: 50px;
  left: 20%;
  right: 20%;
  background: #363636;
  border-radius: 3px;
  z-index: 999;
  color: #FFF;
  padding: 15px 20px;
  font-size: 14px;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}
.toast a,
.toast a:visited,
.toast a:hover,
.toast a:active {
  color: #FFF;
}
.toast button {
  float: right;
  background: transparent;
  border: none;
  color: #EEFF41;
  text-transform: uppercase;
  margin-left: 10px;
}