html {
    height: 100%;
    overflow-x: hidden;
}

body {
    background-color: #F3F5F6;
    width: 100vw;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.vsp-page-content {
    flex: 1 0 auto;
    color: #3D5873;
}

.vsp-text-orange {
    color: #ed6d47;
}

/* 
    Navbar
 */

.vsp-navbar {
    background-color: #F9FAFA;
}

.vsp-logo-logo {
    padding-right: 5px;
    border-right: 0.3px solid #091440;
}

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

/* 
    Text above stats
 */
 
.vsp-overview {
    color: #8997A5;
    background-color: #ffffff;
    font-size: 16px;
}

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

/* 
    VSP stats bar
 */

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

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

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

/*
    Page footer
 */

.vsp-footer {
    line-height: 1.2rem;
    font-size: 0.8rem;
    position: relative;
    background-color: #091440;
    color: #8997a5;
}

.vsp-footer-bg-left,
.vsp-footer-bg-right {
    position: absolute;
    height: 100%;
}

.vsp-footer-bg-right {
    right: 0;
    bottom: 0;
    background-color: #202a52;
}

@media (max-width: 768px) {
    .vsp-footer-bg-left,
    .vsp-footer-bg-right {
        height: 50%;
    }
}

.vsp-footer-left,
.vsp-footer-right {
    display: flex;
    padding-left: 0;
    padding-right: 0;
}

.vsp-footer-left {
    background-color: #091440;
}

.vsp-footer-right {
    background-color: #202a52;
    /* Top & bottom padding to ensure right is same height as left despite
    having one less line of text */
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

/* 
    Buttons
 */

.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;
}

/*
    Admin page collapsible tabset
 */

.vsp-tabset {
    background-color: #ffffff;
    padding: 20px 30px;
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
    color: #3D5873;
    line-height: 1.4;
    width: 100%;
}

.vsp-tabset > ul {
    margin: 0 0 25px;
}

.vsp-tabset > ul label {
    padding: 10px 20px;
}

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

.vsp-tabset .collapsible-tab-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    padding: 0 10px 10px 10px;
}

/* Highlight labels on hover/focus to indicate they are clickable */
.vsp-tabset > input[type="radio"]:nth-child(1):focus ~ ul li:nth-child(1) label,
.vsp-tabset > input[type="radio"]:nth-child(1):hover ~ ul li:nth-child(1) label,
.vsp-tabset > input[type="radio"]:nth-child(2):focus ~ ul li:nth-child(2) label,
.vsp-tabset > input[type="radio"]:nth-child(2):hover ~ ul li:nth-child(2) label,
.vsp-tabset > input[type="radio"]:nth-child(3):focus ~ ul li:nth-child(3) label,
.vsp-tabset > input[type="radio"]:nth-child(3):hover ~ ul li:nth-child(3) label,
.vsp-tabset > input[type="radio"]:nth-child(4):focus ~ ul li:nth-child(4) label,
.vsp-tabset > input[type="radio"]:nth-child(4):hover ~ ul li:nth-child(4) label,
.vsp-tabset > input[type="radio"]:nth-child(5):focus ~ ul li:nth-child(5) label,
.vsp-tabset > input[type="radio"]:nth-child(5):hover ~ ul li:nth-child(5) label,
.vsp-tabset > input[type="radio"]:nth-child(6):focus ~ ul li:nth-child(6) label,
.vsp-tabset > input[type="radio"]:nth-child(6):hover ~ ul li:nth-child(6) label {
    cursor: pointer;
    color: #091440;
}

/* Highlight the label of the currently selected tab */
.vsp-tabset > input[type="radio"]:nth-child(1):checked ~ ul li:nth-child(1) label,
.vsp-tabset > input[type="radio"]:nth-child(2):checked ~ ul li:nth-child(2) label,
.vsp-tabset > input[type="radio"]:nth-child(3):checked ~ ul li:nth-child(3) label,
.vsp-tabset > input[type="radio"]:nth-child(4):checked ~ ul li:nth-child(4) label,
.vsp-tabset > input[type="radio"]:nth-child(5):checked ~ ul li:nth-child(5) label,
.vsp-tabset > input[type="radio"]:nth-child(6):checked ~ ul li:nth-child(6) label {
    border-bottom: 5px solid #2ed8a3;
    color: #091440;
    cursor: default;
}

/* By default the collapsible tabs should all be hidden */
.vsp-tabset .collapsible-tab {
    display: none;
}

/* Show tab when its corresponding radio is checked */
.vsp-tabset > input[type="radio"]:nth-child(1):checked ~ .collapsible-tab-wrapper > .collapsible-tab:nth-child(1),
.vsp-tabset > input[type="radio"]:nth-child(2):checked ~ .collapsible-tab-wrapper > .collapsible-tab:nth-child(2),
.vsp-tabset > input[type="radio"]:nth-child(3):checked ~ .collapsible-tab-wrapper > .collapsible-tab:nth-child(3),
.vsp-tabset > input[type="radio"]:nth-child(4):checked ~ .collapsible-tab-wrapper > .collapsible-tab:nth-child(4),
.vsp-tabset > input[type="radio"]:nth-child(5):checked ~ .collapsible-tab-wrapper > .collapsible-tab:nth-child(5),
.vsp-tabset > input[type="radio"]:nth-child(6):checked ~ .collapsible-tab-wrapper > .collapsible-tab:nth-child(6) {
    display: flex;
}

.vsp-tabset table td ,
.vsp-tabset table th {
    padding: 10px 16px;
}

.vsp-tabset table td,
.vsp-tabset table .btn-link {
    font-size: 14px;
}

.vsp-tabset table td {
    word-break: break-word;
    font-family: "vspd-code";
}

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

/* 
    VSP Status tab
 */

.vsp-status-tab {
    flex-direction: row;
}

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

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

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

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

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

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

/* 
    Ticket Search tab
 */

.ticket-search-tab input[type="search"] {
    font-size: 14px;
    font-family: "vspd-code";
}

.ticket-search-tab input[type="search"]::placeholder {
    font-family: "vspd";
}

.ticket-search-tab table {
    width: 100%;
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
}

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

.ticket-search-tab table th {
    text-align: right;
}

.ticket-search-tab table td {
    text-align: left;
    padding-right: 0;
    width: 100%;
}

.ticket-search-tab table details table td {
    font-size: 12px;
}

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

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

/* 
    Missed tickets tab
 */

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