body {height: 100vh; padding: 0;}
.flex {display: flex;}
.mt-2 {margin-top: 10px;}
.mt-4 {margin-top: 20px;}
.mx-20 {margin-left: 20px; margin-right: 20px;}
.mt-60 {margin-top: 60px;}
.mt-30 {margin-top: 30px;}
.border-none {border: none;}
.flex-content {display: flex; flex: none; flex-direction: column;}

#container {top: 0; right: 0; bottom: 0; left: 0; display: flex; justify-content: center; align-items: center; background-color: #010417; color: #fff; background-size: cover; overflow: auto;}
#container:before {content: ' '; display: block; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; opacity: 0.9; background: #010419;}
#main {position: relative; width: 1360px; z-index: 10; padding: 0 35px; background-size: cover; padding-bottom: 20px;}
#main section header {height: 24px; margin: 16px 0 20px;}
#main section header > h2 {line-height: 24px; font-size: 18px; padding: 0 16px; float: left; margin: 0; position: relative; position: relative; font-weight: normal;}
#loadIndicator {position: fixed; left: 0; right: 0; bottom: 0; top: 0; z-index: 1000; visibility: hidden;}
#loadIndicator.loading {visibility: visible;}
#loadIndicator:before {background-color: rgba(50,50,50,.65);}
#loadIndicator:after {font-size: 30px;}
.title-tail {padding-top: 7px; padding-right: 27px;}
.bottom-line {background: url(/static/images/line_right.png); background-size: contain; width: 1500px; height: 11px; background-repeat: no-repeat; background-position: bottom;}

#header {margin-bottom: 45px;}
#header > h1 {width: 500px; margin: 40px auto 0; height: 58px; font-weight: normal; text-align: center; font-size: 20px; display: block; line-height: 58px; position: relative; left: -30px;}
#toolbar {position: absolute; right: 33px; top: 80px; text-align: center; width: 1280px;}
#toolbar .form-control {width: 100px; display: inline-block; margin-left: 5px; padding-top: 5px; border-color: #1a77a5; background-color: transparent; color: #fff;}

.icon-help {float: left; margin-right: 10px; margin-top: 5px; margin-left: -12px; position: relative;}

section {border: 1px solid rgb(0, 117, 169); float: left; border-radius: 5px;}
section.active {border: 1px solid rgb(0, 166, 255);}
.base-info {width: 380px; height: 170px; border-radius: 5px; background: #091B37; border: 1px solid rgb(0, 117, 169);}
.info-list {margin: 6px 16px 16px; display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap;}
.info-list > div {display: flex; align-items: center; width: 30%; border: 1px solid #065484; border-radius: 5px; padding: 20px 0; background: linear-gradient(to right, #092857, #09223E);}

#actionData {width: 500px; height: 360px; margin: 0px 15px; background: #091B37;}
#actionData > div {margin-top: 13px;}
.summary-block {flex-wrap: wrap; row-gap: 40px; column-gap: 5px; margin-top: 50px;}
.summary-block > .flex-content {width: 31%; flex: none;}

#pipeline {width: 350px; height: 300px;}

#repoData {width: 100%; height: 350px; margin-top: 20px; position: relative;}
#repoData div.has-table {margin-top: 45px; height: 260px; overflow: auto;}
#repoData div.table-header-fixed {position: absolute; left: 0px; top: 35px; right: 10px;}
#repoData table {margin-top: 10px;}
#repoData table td {height: 30px; line-height: 30px;}
#repoData table tr > th {color: #fff !important; background: #165896; height: 30px; line-height: 30px;}
#repoData .c-repo {width: 280px; padding-left: 50px;}
.table-hover>tbody>tr:hover>td {background-color: #888 !important;}

.chosen-container > .chosen-single > span {padding-top: 5px; height: 28px;}
.chosen-container .chosen-drop {background: #141414; text-align: left;}
.chosen-container-single .chosen-search input[type=text] {background: #141414; color: #fff;}
.chosen-results .no-results {background: #141414 !important;}
#repo, #repo_chosen, #repo_chosen > .chosen-single {width: 200px !important; display: inline-block; margin-right: 5px; padding-top: 0px; border-color: #1a77a5; background-color: transparent; color: #fff;}

#repoChart {width: 1286px; margin-top: 20px;}
#repoChart .canvas {width: 620px; height: 400px; margin: 0 20px;}
