ultimate-comparisons/ultimate-comparison-BASE

@import url("https://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,500italic,700,700italic");
@import url("https://fonts.googleapis.com/css?family=Roboto+Mono:400,700");

:host {
    font-family: 'Roboto', 'Noto', sans-serif;
}

pdialog {
    z-index: 5000;
    display: grid;
}

.floatThead-container {
    z-index: 3000;
}

.ltable {
    display: none;
}

/* github corner */
.github-corner {
    z-index: 1000;
}

.github-corner svg {
    z-index: 999;
}

.github-corner:hover .octo-arm {
    animation: octocat-wave 560ms ease-in-out;
}

@keyframes octocat-wave {
    0%,
    100% {
        transform: rotate(0);
    }
    20%,
    60% {
        transform: rotate(-25deg);
    }
    40%,
    80% {
        transform: rotate(10deg);
    }
}

@media (max-width: 500px) {
    .github-corner:hover .octo-arm {
        animation: none;
    }

    .github-corner .octo-arm {
        animation: octocat-wave 560ms ease-in-out;
    }
}

.search-indicator {
    color: rgba(255, 0, 0, 0.52);
    font-size: 8pt;
    opacity: 80;
}

.grid-container {
    display: grid;
    grid-column-gap: 10px;
    grid-row-gap: 15px;
    grid-template-columns: 80px auto 1fr 80px;
    grid-template-rows: 60px auto;
    grid-template-areas: "corner header . ." ". content . ." ". large large ." ". content-end . ." ". latex . ." "footer footer footer ."

}

.grid-header {
    grid-area: header;
    -webkit-font-smoothing: antialiased;
    white-space: nowrap;
    overflow: visible;
    text-overflow: ellipsis;
    line-height: 28px;
    border-bottom: 1px solid #eee;
}

.grid-corner {
    grid-area: corner;
    display: inline-flex;
    justify-content: flex-start;
}

.grid-content {
    grid-area: content;
    display: grid;
    grid-auto-flow: row;
    grid-row-gap: 15px;
}

.grid-large-content {
    padding: 0 10px 0 0;
    grid-area: large;
    display: grid;
    margin-right: auto;
}

.grid-content-latex {
    grid-area: latex;
}

.grid-content-end {
    grid-area: content-end;
    display: grid;
    grid-auto-flow: row;
    grid-row-gap: 15px;
}

.grid-footer {
    grid-area: footer;
    background-color: #f5f5f5;
}

.grid-text {
    padding: 16px 16px 16px 16px;
    position: relative;
}

.select-grid {
    display: grid;
    grid-auto-flow: row;
    grid-column-gap: 15px;
}

@media only screen and (min-width: 400px) {
    .select-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media only screen and (min-width: 800px) {
    .grid-container {
        grid-template-columns: 82px 840px 1fr 78px;
    }
}

@media only screen and (min-width: 1160px) {
    .grid-container {
        grid-template-columns: 82px 980px 1fr 80px;
    }
}

.shrink-expand {
    justify-self: right;
    transform: translate(0, -50px);
}

.description > :first-child {
    margin-top: 0;
}

.description > :last-child {
    margin-bottom: 0;
}

.form-group:hover ::ng-deep input.ui-select-search {
    position: relative;
    height: 26px !important;
    margin-bottom: 2px !important;
}