.progressbar-container {
    width: 100%;
    height: 1px;
    background-color:white;
    margin:0;
    clear: both;
    overflow:hidden;
}

.col_desktop{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.lista_atleti .flex div {padding: 5px 10px;display: flex;}

div.lista_atleti{  
    animation-timing-function: linear;
    animation-duration: 3s;
}		  

div.lista_atleti.green{  
    animation-name: animateElementGreen;
    animation-duration: 3s;
}
div.lista_atleti.red  {  
    animation-name: animateElementRed;
    animation-duration: 3s;
}

@keyframes animateElementGreen{
    0% 
    {
        background: #1f1f1f;
    }
    25% 
    {
        background: green;
    }
    50% 
    {
        background: green;
    }
    75% 
    {
        background: green;
    }
    100% 
    {
        background: #1f1f1f;
    }
}

@keyframes animateElementRed{
    0% 
    {
        background: #1f1f1f;
    }
    25% 
    {
        background: red;
    }
    50% 
    {
        background: red;
    }
    75% 
    {
        background: red;
    }
    100% 
    {
        background: #1f1f1f;
    }
}

.rotateimg180 {
    -webkit-transform:rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

/* GARA */
section.race-live .flex {display: inline-flex; flex-wrap: nowrap; width: 100%; justify-content: space-between;}
/*legenda*/
.legenda_gara {font-size: 15px; font-weight: 900; box-sizing: border-box; background: #000; margin: 0 auto 2px;}
.legenda_gara .flex div {padding: 5px 10px; display: flex; align-items: center;}
.cl_position_legenda {width: 8.3%; text-align: right;}
.legenda_gara .cl_position_legenda {justify-content: flex-end;}
.cl_position_legenda span {margin: 0 10px 0 0; display: inline-block;}
.cl_position_legenda img{width: 15px;}
.cl_numero_legenda {width: 8.3%; text-align: center; justify-content: center;}
.cl_driver_legenda {flex-grow: 2; min-width: 20%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}       
.cl_class_legenda { width: 10.3%; justify-content: flex-end;}
.cl_laps_legenda { width: 5.3%; justify-content: flex-end;}
.cl_last_lp_legenda {width: 12.8%; text-align: right; justify-content: flex-end;}
.cl_best_lap_legenda {width: 12.8%; text-align: right; justify-content: flex-end;}
.cl_second_legenda {width: 8.3%; text-align: right; justify-content: flex-end;}
.cl_last_bl_legenda { width: 5.3%; justify-content: flex-end; text-align: right;}
.cl_diff_legenda {width: 8.3%; text-align: right; justify-content: flex-end;}
.cl_pits {width: 5.3%; text-align: right; justify-content: flex-end;}
.cl_sector {width: 11.3%; text-align: right; justify-content: flex-end;}
.cl_mytime {width: 8%; font-size: 11px;}


.lista_atleti {font-size: 18px; box-sizing: border-box;}
.lista_atleti.row {height: 40px;}
/*.lista_atleti.row {background: #2f3744; }
.lista_atleti.row:nth-child(even) {background: #192231;}*/
.lista_atleti:hover, .lista_atleti.row:nth-child(even):hover {background:#4f6384;}

.lista_atleti .cl_numero_legenda span {font-size: 13px; font-weight: 600; color: #ffa500; padding: 3px 5px; border: 1px solid; border-radius: 5px; min-width: 40px; display: inline-block;}
.lista_atleti .cl_last_lp_legenda, .lista_atleti .cl_best_lap_legenda { font-weight: 600;}
.lista_atleti .cl_last_lp_legenda {color: #e8ff6a;}
.lista_atleti .cl_class_legenda, .lista_atleti .cl_laps_legenda, .lista_atleti .cl_last_bl_legenda { font-size: 15px; display: flex; align-items: center; justify-content: flex-end;}
.lista_atleti .cl_class_legenda {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.lista_atleti .cl_pits, .lista_atleti .cl_sector {font-size: 16px; display: flex; align-items: center;}
.cl_btn_more p {display: inline-block;}


.cl_dettaglio_pilota_legenda { width: 8%; float:left; text-align: center; height: 100%; padding-top: 6px !important;}
.cl_dettaglio_pilota_legenda p, .cl_dettaglio_pilota_legenda i {display: inline-block;}
.cl_dettaglio_pilota_legenda p {margin: 0 3px 0 0;}
.cl_dettaglio_pilota_legenda i {margin: 2px 0 0;}
.cl_dettaglio_pilota_legenda .cl_btn_more{ background-color: #007cff; color: #fff; width: 55px; margin: 0 auto; padding: 2px 3px !important; border-radius: .3rem;}

/* DETTAGLIO PILOTI LIVE */
#legenda_pilota.legenda_gara .flex {flex-wrap: nowrap;}
.lista_posizioni.row {background: #2f3744;}
.lista_posizioni.row .flex {flex-wrap: nowrap;}
.lista_posizioni.row:nth-child(even) { background: #192231;}
.lista_posizioni .flex div {padding: 5px 10px;}
.cl_position_pilota_legenda { width: 7%; text-align: right; justify-content: flex-end;}
.cl_position_pilota_legenda img { width: 15px;}
.cl_laps_pilota_legenda, .cl_additional_pilota_legenda, .cl_class_pilota_legenda, .cl_last_pilota_lp_legenda, .cl_diff_pilota_legenda, .cl_tp_pilota_legenda, .cl_timeofday_pilota_legenda {width: 13%; flex-grow: 2; text-align: right; justify-content: flex-end;}


/*.legenda_pilota {width:100%; font-weight:bold; border:none; background:#0e0e0e; color:#fff; margin:1px auto; clear: both; }
.legenda_pilota div { text-align: center; color:#fff; font-size:14px !important; }
.legenda_pilota div.legenda_titolo { padding-top: 10px !important; padding-bottom: 10px !important; }

.lista_posizioni {cursor:pointer; position:relative; height:39px; width:100%; padding:0; border:none; background:#d0d6db; color:#0e0e0e; clear: both;border-top: 1px solid #000; }
.lista_posizioni div{ font-size:13px; font-weight: bold; padding-top: 9px; height:100%;  position: relative; }
.lista_posizioni:hover {background:#484848; color:#fff;}

.cl_position_pilota_legenda {float:left; font-size:18px !important; font-weight: bold; text-align: right; width: 6%; height:100%!important; padding: 3px 5px 0 0 !important;  border-right: 1px solid #000; }
.cl_position_pilota_legenda img{ width: 25px; vertical-align: middle; }

.cl_numero_pilota_legenda {float:left; text-align: center; width: 4%; border-right: 1px solid #000;}
.cl_driver_pilota_legenda { float:left; width:30%; padding-left: 10px; border-right: 1px solid #000; white-space: nowrap; overflow: hidden; text-overflow:ellipsis;}      
.cl_laps_pilota_legenda {float:left; text-align: center; width: 10%; border-right: 1px solid #000;}
.cl_additional_pilota_legenda {float:left; text-align: center; width: 10%; border-right: 1px solid #000;}                    
.cl_class_pilota_legenda {float:left; text-align: center; width: 11%; border-right: 1px solid #000;}
.cl_last_lp_pilota_legenda {float:left; text-align: center; width: 13%; border-right: 1px solid #000;}
.cl_diff_pilota_legenda {float:left; text-align: center; width: 13%; }*/


@media screen and (max-width: 1280px) {
	.cl_mytime { width: 3%;}
	.cl_btn_more p {display: none;}
	.lista_atleti { font-size: 16px;}
	.cl_position_legenda span { margin: 0 5px 0 0;}
	.cl_sector { width: 10%;}
	.lista_atleti .cl_pits, .lista_atleti .cl_sector { font-size: 14px;}
	.cl_last_lp_legenda, .cl_best_lap_legenda { width: 11.2%;}
	.lista_atleti .flex div.cl_second_legenda, .legenda_gara .flex div.cl_second_legenda {display: none;}
}

@media screen and (max-width: 1024px) {
	.lista_atleti { font-size: 14px;}
	.legenda_gara .flex div {padding: 5px;}
	.cl_laps_legenda { width: 5.5%;}
	.lista_atleti .flex div { padding: 5px; display: flex; align-items: center;}
	.lista_atleti .flex div.cl_class_legenda, .legenda_gara .flex div.cl_class_legenda {display: none;}
	.cl_position_legenda {justify-content: flex-end;}
	
	.lista_posizioni .flex div { padding: 5px;}
	.cl_position_pilota_legenda { width: 10%;}
}

@media screen and (max-width: 768px) {
	.lista_atleti .flex div.cl_diff_legenda, .legenda_gara .flex div.cl_diff_legenda {display: none;}
	.lista_atleti .flex div.cl_last_bl_legenda, .legenda_gara .flex div.cl_last_bl_legenda {display: none;}
	.cl_driver_legenda { min-width: 30%}
	.cl_numero_legenda { width: 7.5%;}
	.lista_atleti .cl_numero_legenda span { font-size: 10px; padding: 3px; min-width: 30px;}
	.cl_laps_legenda { width: 7%;}
	.cl_last_lp_legenda, .cl_best_lap_legenda { width: 15%;}
	.cl_mytime { width: 22px;}
	.cl_sector { width: 13%;}
	.cl_position_legenda { min-width: 55px;}	
	.legenda_gara .flex div.cl_class_pilota_legenda, .lista_posizioni .flex div.cl_class_pilota_legenda {display: none;}
	.col_tablet_hide {display: none!important;}
}

@media screen and (max-width: 580px) {
	.lista_atleti { font-size: 13px;}
	.legenda_gara { font-size: 10px;}
	.lista_atleti .flex div.cl_pits, .legenda_gara .flex div.cl_pits {display: none;}
	.lista_atleti .flex div.cl_sector, .legenda_gara .flex div.cl_sector {display: none;}
	.cl_driver_legenda { flex-grow: 0; min-width: inherit; width: 20%; }
	.lista_atleti .cl_class_legenda, .lista_atleti .cl_laps_legenda, .lista_atleti .cl_last_bl_legenda {
		font-size: 13px;}
	
	.legenda_gara .flex div.cl_additional_pilota_legenda, .lista_posizioni .flex div.cl_additional_pilota_legenda {display: none;}
	.cl_position_pilota_legenda { width: 15%;}
	.cl_laps_pilota_legenda {width: 5%;}
	.col_smart_hide {display: none!important;}
}

@media screen and (max-width: 400px) {
	section.race-live .flex {align-items: flex-start;}
	.legenda_gara .flex div { padding: 3px;}
	.lista_atleti .flex div { padding: 5px 3px;}
	.cl_numero_legenda {min-width: 30px;}
	.lista_atleti .cl_numero_legenda span {min-width: inherit; color: #fff; border: none; background: #ffa500;}
	.cl_position_legenda { min-width: 47px;}
	.cl_position_legenda span {font-size: 10px;}
	.lista_atleti .cl_last_lp_legenda, .lista_atleti .cl_best_lap_legenda {font-size: 10px;}
	
	.legenda_gara .flex div.cl_tp_pilota_legenda, .lista_posizioni .flex div.cl_tp_pilota_legenda {display: none;}
	

}