html { width:100%; height:100%; box-sizing: border-box; }
body { width:100%; height:100%; margin: 0px; font-size: 14px;}
*, *:before, *:after { box-sizing: inherit; line-height: 1.414;}

.pt-table {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-size: 1em;
}

.pt-package-row {
    display: flex;
    flex-direction: row;
    margin-bottom: 10px;
}

.pt-package-row-header {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 20%;
    min-width: 250px;
    min-height: 60px;
    margin: 10px;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);
    transition: box-shadow 200ms cubic-bezier(0.4, 0.0, 0.2, 1);
}

.pt-package-row-header:hover {
    box-shadow: 0 3px 8px 0 rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.08);
}

.pt-package-name {
    width: 100%;
    text-align: center;
    cursor: pointer;
    user-select: none;
    font-size: 1.414em;
}

.pt-package-name-passing {
    /*color: #009e0f;*/
}

.pt-package-name-failing {
    /*color: #b45f06*/
    color: rgb(237, 54, 59);
}


.pt-status-square {
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    border-radius: 15%;
    margin-left: 7px;
    margin-bottom: -2.5px;
}

.pt-status-square-passing {
    background-color: #009e0f;
}

.pt-status-square-failing {
    background-color: #b45f06;
}

.pt-package-version {
    text-align: center;
    width: 100%;
    font-size: 0.9em;
    color: #464646;
    justify-content: center;
    align-items: center;
    cursor: default;
}

.pt-package-name:hover {
    color: #818dcc;
}

.pt-liabilities-row {
    flex: 0 1 80%;
}

.pt-liabilities-row-inner {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 5px;
}

.pt-liability {
    flex: 0 0 calc((100% / 6) - 10px);
    height: 60px;
    line-height: 60px;
    color: #009e0f;
    margin: 5px;
    text-align: center;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);
    transition: box-shadow 200ms cubic-bezier(0.4, 0.0, 0.2, 1);
}

.pt-liability:hover {
    color: #818dcc;
    box-shadow: 0 3px 8px 0 rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.08);
}

@media (max-width: 1360px) {
    .pt-liability {
        flex-basis: calc((100% / 5) - 10px);
    }
}

@media (max-width: 1160px) {
    .pt-liability {
        flex-basis: calc((100% / 4) - 10px);
    }
}

@media (max-width: 960px) {
    .pt-package-row {
        flex-direction: column;
    }

    .pt-liability {
        flex-basis: calc((100% / 3) - 10px);
    }
}

@media (max-width: 800px) {
    .pt-package-row {
        flex-direction: column;
    }

    .pt-liability {
        flex-basis: calc((100% / 2) - 10px);
    }
}

@media (max-width: 650px) {
    .pt-package-row {
        flex-direction: column;
    }

    .pt-liability {
        flex-basis: calc((100% / 1) - 10px);
    }
}


/*.pt-package-stats {*/
    /*width: 50%;*/
/*}*/

.pt-failing { /*color: #b45f06;*/ color: rgb(237, 54, 59);}
.pt-passing { color: #009e0f; }
.pt-total { color: #2b78e4; }

/*.pt-package-links {*/
    /*width: 50%;*/
/*}*/