vspd/internal/webapi/public/css/vspd.css

html, body {
    height: 100%;
}
body {
    background-color: #F3F5F6;
    color: #3D5873;
    display: flex;
    flex-direction: column;
}

/* Bootstrap adds ugly outlines to search inputs. Setting outline-offset and
appearance makes them look the same as text inputs. */
input[type="search"] {
    outline-offset: 0;
    appearance: auto;
}

.navbar {
    background-color: #F9FAFA;
}

.navbar a {
    text-decoration: none;
}

.page-content {
    flex: 1 0 auto;
}

.logo--logo {
    padding-right: 5px;
    border-right: 0.3px solid #091440;
}
.logo--text {
    padding: 0 5px;
    font-size: 15px;
    line-height: 1;
    color: #091440;
}

.vsp-overview {
    color: #8997A5;
    background-color: #ffffff;
    font-size: 16px;
}

.vsp-overview h1 {
    color: #3D5873;
    font-size: 28px;
}

.vsp-stats .stat-title {
    font-size: 14px;
    color: #596D81;
}

.vsp-stats .stat-value {
    font-size: 24px;
    color: #091440;
}

.vsp-stats .stat-value .text-muted{
    font-size: 18px;
    color: #8997A5;
}

.orange {
    color: #ed6d47;
}

footer {
    flex-shrink: 0;
    font-size: 0.8rem;
    background-color: #091440;
    color: #8997a5;
    width: 100%;
}

footer .code {
    word-break: break-word;
}

.footer__credit {
    background-color: rgba(237,239,241,.1);
    text-align: right;
    color: #8997a5;
}

@media (max-width: 768px) {
  .footer__credit {
        text-align: center;
    }
}

.btn-primary, .btn-secondary {
    outline: 0;
    -webkit-box-shadow: 1px 3px 14px 0px rgba(0,0,0,0.19);
            box-shadow: 1px 3px 14px 0px rgba(0,0,0,0.19);
}

.btn:focus, .btn:active,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
    border-color: transparent;
}

.block__content h1 {
    color: #091440;
    font-size: 24px;
    padding-bottom: 10px;
}

.block__content {
    background-color: #ffffff;
    padding: 20px 30px; 
    color: #3D5873;
    line-height: 1.4;
}


.block__content table td ,
.block__content table th {
    padding: 10px 16px;
}
.block__content table td {
    word-break: break-word;
    font-family: "vspd-code";
}

.block__content table th {
    white-space: nowrap;
    font-family: "vspd";
    vertical-align: top;
    font-weight: normal;
    background-color: #edeff1;
}


#ticket-table th,
#ticket-table td {
    border-top: 1px solid #dee2e6;
}

#ticket-table th {
    text-align: right;
}
#ticket-table td {
    font-size: 14px;
    text-align: left;
    padding-right: 0;
    width: 100%;
}

#ticket-table details table td {
    font-size: 12px;
}

#ticket-table .small-text {
    padding: 10px 16px;
    font-size: 12px;
}

#ticket-table pre {
    color: #3D5873;
    font-size: 12px;
    white-space: pre-wrap;
}

.vsp-status {
    padding: 10px;
}

.vsp-status table {
    margin-bottom: 28px;
}

.vsp-status table th,
.vsp-status table td {
    border: 1px solid #edeff1;
    vertical-align: middle;
    text-align: center;
}

.vsp-status table .center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.vsp-status table .status {
    height: 30px;
    padding-left: 30px;
}

.vsp-status table .good {
    background: url(/public/images/success-icon.svg) no-repeat center center;
}

.vsp-status table .bad {
    background: url(/public/images/error-icon.svg) no-repeat left center;
}

.vsp-status table .with-text {
    padding-left: 40px;
}

table.missed-tickets th,
table.missed-tickets td {
    border: 1px solid #edeff1;
    vertical-align: middle;
    text-align: center;
}

.tabset > input {
    display:block; /* "enable" hidden elements in IE/edge */
    position:absolute; /* then hide them off-screen */
    left:-100%;
}

.tabset > ul {
    position:relative;
    z-index:999;
    list-style:none;
    display:flex;
    padding: 0;
    margin: 0 0 25px;
}

.tabset > ul label {
    display:inline-block;
    padding: 10px 20px;
}

.tabset > div {
    position:relative;
}

.tabset > input:nth-child(1):focus ~ ul li:nth-child(1) label,
.tabset > input:nth-child(1):hover ~ ul li:nth-child(1) label,
.tabset > input:nth-child(2):focus ~ ul li:nth-child(2) label,
.tabset > input:nth-child(2):hover ~ ul li:nth-child(2) label,
.tabset > input:nth-child(3):focus ~ ul li:nth-child(3) label,
.tabset > input:nth-child(3):hover ~ ul li:nth-child(3) label,
.tabset > input:nth-child(4):focus ~ ul li:nth-child(4) label,
.tabset > input:nth-child(4):hover ~ ul li:nth-child(4) label,
.tabset > input:nth-child(5):focus ~ ul li:nth-child(5) label,
.tabset > input:nth-child(5):hover ~ ul li:nth-child(5) label {
    cursor: pointer;
    color: #091440;
}

.tabset > input:nth-child(1):checked ~ ul li:nth-child(1) label,
.tabset > input:nth-child(2):checked ~ ul li:nth-child(2) label,
.tabset > input:nth-child(3):checked ~ ul li:nth-child(3) label,
.tabset > input:nth-child(4):checked ~ ul li:nth-child(4) label,
.tabset > input:nth-child(5):checked ~ ul li:nth-child(5) label {
    border-bottom: 5px solid #2ed8a3;
    color: #091440;
    cursor: default;
}

.tabset > div > section,
.tabset > div > section h2 {
    position:absolute;
    top:-999em;
    left:-999em;
}
.tabset > div > section {
    padding: 0 10px 10px 10px;
}

.tabset > input:nth-child(1):checked ~ div > section:nth-child(1),
.tabset > input:nth-child(2):checked ~ div > section:nth-child(2),
.tabset > input:nth-child(3):checked ~ div > section:nth-child(3),
.tabset > input:nth-child(4):checked ~ div > section:nth-child(4),
.tabset > input:nth-child(5):checked ~ div > section:nth-child(5) {
    position:static;
}