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 .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; } #homepage { width: 100%; background: #f2f5f8; } #homepage section { padding: 40px 0px 20px 0px; border-bottom: 1px solid #EEE; } #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; } #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="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="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: ''; } @-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: "!"; } #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); }