@charset "utf-8";


.title {
text-align: left;
}




.compare_bar * {vertical-align: middle;}
.compare_bar {
    overflow: hidden;
    margin: 0 0 10px 0;
    height: 20px;
    border: 1px solid #BFB;
    border-radius: 5px;
    background-color: #222;
    color:#BFB;
    padding-left: 4px;
}
.compare_bar a {
    margin-right: 10px;
    padding: 1px 5px;
    background-color: #555;
    border-radius:5px;
}
.compare_bar a:hover {
    background-color: #444;
    color:#FFB;
}



/* --------------- Rankings Spécifique GT ----------------------- */
.trial_level {
    font-size: 1em;
    position: relative;
    display: inline-block;
    width: 12em;
    height: 15.4em;
    margin: 0 .5em;
    font-family: Tahoma, Geneva, sans-serif;
    background-color: #F00;
    border: .5em solid #FFF;
    border-radius: 5px;
    box-shadow: 0em 0em .8em #ffF;
}
.trial_level.tdrift {background-color: #77F;}

.trial_www {
    position: absolute;
    top: -.3em;
    padding-bottom: .2em;
    text-align: center;
    width: 100%;
    color: #222;
    background-color: white;
    line-height: 1.1em;
}
:root .trial_www {
  width: 101%\9;
}
.trial_www, x:-moz-any-link, x:default { }

.trial_player {
    position: absolute;
    bottom: -.3em;
    padding: .2em 0 .3em 0;
    text-align: center;
    width: 100%;
    line-height: 1.1em;
    color: #444;
    background-color: white;
    font-weight: bold;
}
:root .trial_player {
  width: 101%\9;
}

.trial_score {
    font-size: 10em;
    position: absolute;
    width: 100%;
    top: .07em;
    left: -.06em;
    font-weight: bold;
    line-height: .85em;
    letter-spacing: -.1em;
    color: white;
    text-align: center;
    text-shadow: 2px 2px .05em #333;
}
.trial_score em {
    font-size: .2em;
    position: absolute;
    bottom: -1.2em;
    letter-spacing: normal;
    right: 0px;
    line-height: normal;
    text-shadow: none;
}

.trial_type {
    font-size: 1.5em;
    position: absolute;
    display: block;
    bottom: .8em;
    width: 7em;
    background-color: #FFF;
    color: #999;
    font-weight: bold;
    text-align: right;
    padding: .3em 0.2em .2em 1em;
    font-family: Arial,Helvetica,sans-serif;
    line-height: .7em;
    letter-spacing: -.1em;
}

.trial_type_T {
    position: absolute;
    font-size: 2.9em;
    left: -.1em;
    bottom: .25em;
    color: #F00;
    font-weight: bold;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: -.1em;
    text-shadow: 0 0 1px #F99;
}
.trial_level.tdrift .trial_type_T {
    color: #77F;
    text-shadow: 0 0 1px #CCF;
}
.trial_notrel {
    font-size: 2.8em;
    position: absolute;
    left: -0.1em;
    bottom: 1.2em;
    width: 1em;
    line-height: 1em;
    text-align: center;
    color: #333;
    font-weight: bold;
    background-color: #FFB;
    border: 3px solid #555;
    border-radius: 5px;
    box-shadow: 1px 1px .2em #333;
}
.trial_notrel_legend {
    margin-top: .6em;
    position: relative;
    background-color: #666;
    border-radius: 5px;
    letter-spacing: -1px;
}
.trial_notrel_legend .trial_notrel {
    font-size: 2.8em;
    position: relative;
    display: inline-block;
    top:0;
    left:0;
    margin-right: 0.3em;
    vertical-align: -18%;
}
.trial_notrel_legend em {
    font-size: 1.3em;
    font-style: normal;
}

.pp {
	/* font-size: 1.5em; */
        position:relative;
	display: inline-block;
	border: 1px solid;
	padding: 0em 0.5em;
	border-radius: 1em;
	font-weight: bold;
}

.oldpp {
    color:#aaa;
    border-color:#FFF;
    background-color: #333;
}
.oldpp::before {
    font-size:9px;
    content:'Obsolete';
    position:absolute;
    top:-4px;
    left: 2px;right: 2px;text-align: center;color:#000;
    background-color:#FFF
    ;
    padding:var(--sticker-padding);
    height: 0.6em;
    line-height: 0.6em;
}

.car_tags {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 3px;
}
.car_tags b {
    color: var(--signature-color-1);
    background-color: var(--textin-signature-color-3);
    padding: var(--sticker-padding);
}

.car_source {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

.car_source:before {
    display: flex;
    width: 3em;
    content: "Source";
    align-items: center;
    line-height: 1em;
    font-weight: bold;
    background-color: var(--signature-color-3);
    color: var(--textin-signature-color-3);
    padding: var(--sticker-padding);
    -webkit-clip-path: polygon(0 0, 0 100%, 80% 100%, 100% 50%, 85% 0);
    clip-path: polygon(0 0, 0 100%, 80% 100%, 100% 50%, 85% 0);
    padding-right: 1.4em;
}
.car_source b {
    background-color: var(--textin-signature-color-3);
    color: var(--signature-color-3);
    padding: var(--sticker-padding);
}
.source_note {
    font-weight: bold;
    margin: 5px 0;
    background-color: var(--signature-color-3);
    color: var(--textin-signature-color-3);
    padding: var(--sticker-padding);
}
.source_note a {
    text-decoration:underline;
}
.source_current {
    font-size: 1.2em;
    background-color: var(--textin-signature-color-3);
    color: var(--signature-color-3);
    padding: var(--sticker-padding);
}

.tyres {
    font-size: 2.6em;
    display: inline-grid;
    grid-template-columns: .85em .85em 1.1em .85em .85em 1.1em .85em .85em 1.1em .85em 1.1em 1em;
    max-height: 1em;
    line-height: .8em;
}
.phone .tyres {
    font-size:3.6em;
    line-height: 0.6em;
}
.tyres.tyres_full {
    font-size: 3.6em;
    /* grid-template-columns: 2.4em 2.4em 3em 2.4em 2.4em 3em 2.4em 2.4em 3em 2.4em 3em 2.4em; */
    max-height: initial;
}
.tyres b {
    font-size:0.35em;
    position: relative;
    display: inline-block;
    text-align: center;
    color:white;
    border: 0.25em solid;
    border-radius: 50%;
    /* padding: 10px;*/
    width: 1.8em;
    height: 1.8em;
    line-height: 1.80em;
    opacity:.5;
    cursor: pointer;
}

.tyres.tyres_full b { 
    /* padding: 10px; */
    /* letter-spacing: -1px; */
    /* text-shadow: 1px 1px black; */
    /* box-shadow: 0px 0px 2px 0px #000; */
}
.tyres b.own,.tyres b.def {opacity: 1;}
.tyres b.own::before, .tyres b.def::before {
    content: "done";
    position: absolute;
    font-family: 'Material Icons';
    font-size: 1.9em;
    color: #fff;
    top: -0.45em;
    left: 0em;
    text-shadow: 1px 1px 4px #000;
}
.tyres.tyres_full b.own::before, .tyres.tyres_full b.def::before {
    font-size: 2em;
    color: #fff;
    top: -0.55em;
    left: 0em;
    text-shadow: 1px 1px 4px #000;
}
.tyres b.def::before {content: "done_all";}
.tyres b:nth-child(1) {color:#FAFAFA;}
.tyres b:nth-child(2) {color:#FFFB08;}
.tyres b:nth-child(3) {color:#FE2F06;}
.tyres b:nth-child(4) {color:#FAFAFA;}
.tyres b:nth-child(5) {color:#FFFB08;}
.tyres b:nth-child(6) {color:#FE2F06;}
.tyres b:nth-child(7) {color:#FAFAFA;}
.tyres b:nth-child(8) {color:#FFFB08;}
.tyres b:nth-child(9) {color:#FE2F06;}
.tyres b:nth-child(10) {color:#71C355;}
.tyres b:nth-child(11) {color:#4487F2;}
.tyres b:nth-child(12) {color:#FE932C;}

/******** Computer *********/

/******** Mobile **********/
.phone .car_source {
    font-size: 1.3em;
}
.phone .source_current {
    font-size: 1.6em;
}
.phone .car_tags {
    font-size: 1.3em;
}