body{
    height: 100vh;
    background-image: url('/images/background-flip.jpg');
    background-size: cover;
    background-position: top;
}

.trip-header{
    
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: left;
    background-color: rgba(240, 240, 240, 0.2);;
}

.trip-header .logo{
    flex: 0 0 120px;
    padding: 5px;
}

.trip-header .logo img{
   cursor:pointer;
    width: 120px;
}

.trip-header .infos{
    flex-grow: 1;
    height: 60px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.2rem;
    color:rgba(255, 255, 255, 0.8);
    line-height: 18px;
    padding: 5px;
    
}

.flex-box{
    display: flex;
    flex-direction: column-reverse;
}

.trip-infos{
    
    height: calc( 50vh - 50px );
    padding: 10px 20px 10px 20px !important;
}

.trip-info-bloc{
    background-color: rgba(240, 240, 240, 0.3);;
    height: calc( 50vh - 80px );
    padding: 10px;
    color:rgba(255, 255, 255, 0.8);
    font-size: 1.2rem;
    min-height: 230px;
    position: relative;
}

.trip-map{
   
    height: calc( 50vh - 60px );
    padding: 10px 20px 10px 20px !important;
}

#mapid { 
    height: calc( 50vh - 60px );; 
    width: calc( 100vw - 40px );; 
}

.boat-info, .rental-info, .stats-info{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 50px;
    font-size: 0.9rem;
}

.boat-info .ico, .rental-info .ico{
   flex: 0 0 50px;
}

.boat-info .boat-data, .rental-info .rental-data{
    flex-grow: 1;
    height: 50px;
 }

 .boat-data .name{
    font-size: 1.2rem;
    line-height: 18px;
    margin-top: 8px;
 }

 .boat-data .model{
    font-size: 0.9rem;
    line-height: 16px;
    color:rgba(255, 255, 255, 0.6);
 }

 .rental-data .rental-date {
    font-size: 1rem;
    line-height: 20px;
    margin-top: 5px;
 }

 .rental-data .rental-from-to-hour {
    font-size: 0.9rem;
    line-height: 16px;
    color:rgba(255, 255, 255, 0.6);
}

.img-ico{
    width:40px;
}

.stats-info{
    width: 100%;
}

.bloc-stat{
    margin-top: 10px;
    flex-grow: 1;
    text-align: left;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    padding-left: 5px;
    height: 40px;
}

.title-stat{
    font-size: 0.5rem;
}

.value-stat{
    font-size: 0.9rem;
    color:rgba(255, 255, 255, 1);
}

.unit-stat{
    font-size: 0.6rem;
}

@media (min-width: 374px) { 
    .value-stat{
        font-size: 1rem;
    }
    .unit-stat{
        font-size: 0.7rem;
    }

    .title-stat{
        font-size: 0.6rem;
    }
}

@media (min-width: 400px) { 
    .value-stat{
        font-size: 1.1rem;
    }
    .unit-stat{
        font-size: 0.8rem;
    }

    .title-stat{
        font-size: 0.7rem;
    }
}

.share-btn{
    position: absolute;
    bottom: 10px;
    right: 10px;
}

@media (min-width: 1024px) { 

    .flex-box{
        display: flex;
        flex-direction: row;
    }
    
    .trip-infos{
    
        height: calc( 100vh - 120px );
        padding: 20px !important;
    }
    
    .trip-info-bloc{
        background-color: rgba(240, 240, 240, 0.3);;
        padding: 20px;
        color:rgba(255, 255, 255, 0.8);
        font-size: 1.2rem;
        height: calc( 100vh - 120px );
    }
    
    .trip-map{
        padding: 20px !important;
        height: calc( 100vh - 120px );
        
    }
    
    #mapid { 
        height: calc( 100vh - 120px );; 
        width: calc( 50vw - 60px );; 
    }

    .boat-info, .rental-info, .stats-info{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100px;
    }
    
    .boat-info .ico, .rental-info .ico{
       flex: 0 0 80px;
    
    }
    
    .boat-info .boat-data, .rental-info .rental-data{
        flex-grow: 1;
     
     }
    
    .img-ico{
        width:70px;
    }
    
    .stats-info{
        width: 100%;
    }
    
    .bloc-stat{
        flex: 0 0 25%;
        text-align: left
    }
    
    .title-stat{
        font-size: 0.7rem;
    }
    
    .value-stat{
        font-size: 1.6rem;
    }

    .share-btn{
        position: absolute;
        bottom: 20px;
        right: 20px;
    }

    .trip-header .logo{
        flex: 0 0 200px;
        padding: 5px;
    }
    
    .trip-header .logo img{
        cursor: pointer;
        width: 150px;
    }
    
    .trip-header .infos{
        flex-grow: 1;
        height: 60px;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        font-size: 0.9rem;
        letter-spacing: 0.2rem;
        color:rgba(255, 255, 255, 0.8);
        line-height: 20px;
        padding: 10px;
        
    }

}