@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;700&display=swap');
:root{
    --default: #222326;
    --highlight: #3c3e41;
    --light-gray: #eeeeee;
    --gray: #666666;
    --white: #ffffff;
    --blue: #20469c;
}

.hide{display: none;}

.mt-0{margin-top: 0;}

html{padding: 0; margin: 0;}
body{
    margin: 45px 0 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-overflow-scrolling: touch;
    font-family: 'Roboto Condensed', sans-serif;
    color: var(--default);
    background: var(--light-gray);
}


.wrapper{
    padding: 45px;
    max-width: 960px;
    background-color: white;
    margin-left: 45px;
}
.wrapper h1:first-child{margin: 0 0 5px 0;}

#collection{margin-top: 45px;}
ol, ul{list-style: none;}
ol li::before{display: none;}
ol#selection-brand{margin-bottom: 45px;}
ol#selection-brand li.selection-option{
    display: inline-block;
    padding: 15px 30px;
    cursor: pointer;
    border: solid 1px #aaaaaa;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 700;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
ol#selection-brand li.selection-option:not(:first-child){margin-left: 10px;}
ol#selection-brand li.selection-option:not(.active):hover{
    border: solid 1px #cccccc;
    color: var(--highlight);
    background: #e5e5e5;
}
ol#selection-brand li.selection-option.active{
    background: #cccccc;
    border-color: #e5e5e5;
    cursor: default;
}

ol{list-style: none; padding-left: 0;}
ol li.brand{font-size: 1.2rem; font-weight: 700;}
ol li.brand:not(:first-child){margin-top: 45px;}
ol.list li.header span{color: var(--gray); margin-top: 10px; font-size: 0.8rem; font-weight: 400;}
ol.list li.item{
    padding: 5px 0;
    margin: 5px 0;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    position: relative;
}
ol.list li.item:hover{background: rgba(0,0,0,0.075);}
ol.list li.item:nth-child(odd){color: var(--gray);}
ol.list li.header span,
ol.list li.item span{display: inline-block;}
ol.list li.header span.header-model,
ol.list li.item span.model{width: 280px;}
ol.list li.header span.header-release-year,
ol.list li.item span.release-year{width: 120px;}
ol.list li.header span.header-ppi,
ol.list li.item span.ppi{width: 120px;}
ol.list li.header span.header-resolution,
ol.list li.item span.resolution{width: 140px;}
ol.list li.header span.header-viewport,
ol.list li.item span.viewport{width: 160px;}
ol.list li.item .unit{font-size: 0.7rem; font-weight: 700; padding-left: 2.5px; color: #aaaaaa;}
ol.list li.item .unit.est{
    background: var(--blue); 
    color: var(--white);
    border-radius: 15px;
    margin-left: 5px;
    padding: 0 8px;
    vertical-align: 0.1em;
}

ol.list li.item .density{position: relative;}
ol.list li.item .density .tooltip{display: none;}
ol.list li.item .density:hover .tooltip{
    display: block;
    position: absolute; 
    top: -28px; 
    left: -10px;
    width: 150px;
    color: var(--default);
    font-size: 0.8rem;
    background: #fefefe;
    border-radius: 15px;
    border: 1px solid #cccccc;
    text-align: center;
    padding: 5px 10px;
}

.unit.est{
    font-size: 0.7rem; 
    font-weight: 700;
    background: var(--blue); 
    color: var(--white);
    border-radius: 15px;
    padding: 0 8px;
    vertical-align: 0.1em;
}

.density-grade[data-density="xxxhdpi"]{color: #b08110;}
.density-grade[data-density="xxhdpi"]{color: #dca114;}
.density-grade[data-density="xhdpi"]{color: #e3b443;}
.density-grade[data-density="hdpi"]{color: #eac772;}
.density-grade[data-density="mdpi"]{color: #e9c484;}
.density-grade[data-density="ldpi"]{color: #e9cc9a;}
.density-grade[data-density="nodpi"]{color: #cccccc;}

#disclaimer{color: #888888; font-size: 0.9rem;}
#disclaimer a{color: var(--default); text-decoration: none;}
#disclaimer a:hover{color: var(--gray);}