@font-face {
    font-family: 'Dear Joe 5 Casual';
    src: url('../webfonts/DJ5CTRIAL.ttf');
}

/************************
* Global
*************************/
.DearJoe5Casual{
    font-family: 'Dear Joe 5 Casual';
}

body {
    background-color: #ffffff;
}

[cursor="pointer"]{
    cursor: pointer;
}

hr{
    border-top: 2px solid #b3b6c3;
}

/************************
* Buttons
*************************/  
.btn-lightblue{
    background-color: #b2e2f6;
    padding: 10px 15px;
    border-color: #b2e2f6;
    border-radius: 0;
}

.btn-lightblue:hover {
    color: #FFF;
background-color: #051039;
    border-color: #adadad;
}
/************************
* Radio
*************************/  
.pretty-radio-wrapper{
    margin: 50px 0;
}

/************************
* Menu main
*************************/
#menuMain .navbar-nav{
    margin: auto;
    display: inline-block;
    float:none;
}

#menuMain .nav>li{
    border-top: 1px solid #acafbd;
    margin-top: 48px;
    padding: 0 32px;
}

#menuMain .nav>li.item-logo{
    border-top: 0;
    padding: 0;
    margin: 0 30px;
}
 
#menuMain .nav>li>a{
    padding: 12px 0;
    font-size: 12px;
}

#menuMain .nav>li.item-logo a{
    padding: 0;
}

#menuMain .nav>li>a{
    border-bottom: 4px solid #FFFFFF;  
}

#menuMain .nav>li>a:hover,
#menuMain .nav>li.active>a{
    text-decoration: none;
    background-color: #FFFFFF;
    border-color: #c90663;
}

#menuMain .nav>li.item-logo>a:hover,
#menuMain .nav>li.item-logo>a{
    border-color: #FFFFFF;
}

#menuMain .navbar-brand{
   padding: 0 15px;
}

#menuMain .navbar-toggle {
    background-color: #212652;
}


@media screen and (max-width: 768px) {
    #menuMain .navbar-nav{
        display: block;
    }
    
    #menuMain .nav>li{
        margin-top: 0;
    }
    
    #menuMain .nav>li{
        border-top: 0;
    }
}

/************************
* Menu user
*************************/
#usermenu .navbar-nav>li>a{
    color: #fff;
    font-size: 16px;
}


#menuUser .navbar-toggle{
    background-color: #212652;    
}

/************************
* Quiz
*************************/
.quiz-banner-wrapper{
    position: relative;
    margin-bottom: 80px;
}

.quiz-banner-wrapper .logo-animation{
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: -50px;
  background-color: #FFFFFF;
}
.quiz-headtitles {
    font-size:16px;
}
.quiz-intro{
    font-size:14px;
    margin-top: 15px;
    padding:25px 25px 25px 25px;
    line-height:1.6em;
    color:#051039;
}
.infoplus{
    font-size:14px;
    margin-top: 15px;
    padding:1px 1px 50px 25px;
    line-height:2em;
}
.infoplus > p{
    font-size:14px;
}

.quiz-content{
    padding:0;
}


.qs-row{
    border-top: 2px solid rgba(5, 16, 57, 0.3);
    padding: 30px 0;
    font-size: 16px;    
    margin:0;
}

.qs-row .ic-required{
    display: none;
}

.qs-row label{
    color: #051039;
    font-size: 20px;
}

.qs-row p{
    font-size: 16px;
}

.qs-row .answer-title{
    color: #009ee0;
    font-size: 18px;
    font-weight: bold;
}

.qs-row .alert-success, 
.qs-row .alert-danger{
    background-color: transparent;
    padding: 0;
    color: #000000;
    border: none;
}

.preffix-answered-wrapper{
   display: inline-block;
   position: relative;   
}

.preffix-answered-wrapper .square{
    display: block;
    height: 55px;
    width: 55px;
    background-color: #FFFFFF;
    border: 1px solid #000000;
}

.preffix-answered-wrapper .ic-check{
    display: block; 
    position: absolute;
    bottom: 5px;
    left: 10px;    
    height:63px;
    width: 63px;
    background-image: url('../images/valide.png');
    background-repeat: no-repeat;
    z-index: 999;
}

.preffix-answered-wrapper .ic-cross{
    display: block; 
    position: absolute;
    bottom: 5px;
    left: 5px;    
    height:49px;
    width: 63px;
    background-image: url('../images/check-valide.png');
    background-repeat: no-repeat;    
    z-index: 999;    
}

 .qs-row .text-answer{
    display: inline-block;
    vertical-align: top;
    margin: 20px;
    font-size: 14px;
}

/************************
* Quiz map agent
*************************/
.quizmap-container{
    background-color: #d5edf1;
}

#quizMap{
    margin-bottom: 45px;
    width: 100%; 
    background-color:#d5edf1; 
    height: 800px;    
}

@media only screen and (max-width: 768px) {
    #quizMap{
        height: 465px;
    }
}

.quizmap-container .banner{
    width: 100%;
}

.quizmap-container .text-title.DearJoe5Casual{
    color: #051039;
    font-size: 30px;    
}

.panel-score{
    padding: 15px 15px 0;
    border-radius: 0;
}

.panel-score .panel-body{
    background-color: #051039;
    color: #FFFFFF;
    line-height: 1;
}

.panel-score .panel-body .text-date{
    font-size: 20px;
}

.panel-score .panel-body .text-pts{
    font-size: 60px;
}

.panel-score .panel-body .text-currency{
    font-size: 25px;
}

.panel-score .panel-footer{
    background-color: #FFFFFF;
    padding: 15px 0 0;
}

.panel-mapdesc{
    padding: 0;
    margin-bottom: 0;
}

.panel-mapdesc p{
    font-size: 12px;
}

.panel-mapdesc .panel-heading{
    padding: 5px 0;
    font-size: 12px;
}

.panel-mapdesc .panel-body{
    padding:5px 0;
}

.panel-mapdesc .panel-footer{
    padding: 5px 0;
    background-color: #FFFFFF;
}

.panel-progression{
    border-radius: 0;
    border:none;
    box-shadow: none;
    background-color: transparent;
    background-image: url('../images/quiz/bg_progression.png');
    background-position: center top;
    background-size: 100% 100%;
    min-height: 400px;
    padding: 15px 50px 50px 15px;
}

.panel-progression:before{
    display: block;
    content: "";
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: -20px;
    width: 47px;
    height: 49px;
    background: transparent url('../images/quiz/deco_point.png') no-repeat;     
}

.panel-progression .data-line{
    margin-bottom: 20px;
}

.panel-progression .title{
    color: #051039;
    font-size: 16px;
}

.panel-progression .data{
    font-weight: bold;
    font-size: 26px;
    color: #b1c903;
}

.progress-rate{
    background-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
    height: 35px;
}

.progress-rate .progress-bar{
    background-color: #b1c903;
    height: 23px;
    border-radius: 15px;
    margin-top: 6px;
    margin-right: 15px;
    transition: none;
    -webkit-transition: none;
    box-shadow: none;
    -webkit-box-shadow: none;    
}

.progress-rate .progress-bar .data{
    color: #FFFFFF;
    font-size: 20px;
}

.progress-level{
    height: 27px;
    border-radius: 15px;
    margin-bottom: 5px;
    border: 2px solid #000000;
    position: relative;
    width: 80%;
    margin: auto;
}

.progress-level .progress-bar-novice{
    background-color: #fdc400;
}

.progress-level .progress-bar-pro{
    background-color: #ffed00;
}

.progress-level .threshold-vertical{
    position: absolute;
    height: 23px;
    width: 2px;
    background-color: #000000;
}

.progress-level .threshold-vertical.pro{
    left: 33%;
}

.progress-level .threshold-vertical.specialiste{
    left: 66%;    
}

/************************
* Quiz map salesman
*************************/
.team-results .average{
    font-size: 20px;
    font-weight: bold;
}

.team-results .pts{
    font-size: 16px;
    font-weight: bold;    
}

.team-results .range{
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
    padding: 0 10px;
}

.team-results .ratebar{
    width: 50px;
    margin: auto;
    max-width: 100%;
    position: relative;
}

.team-results .ratebar .filler{
    position: absolute;
    bottom: 0;
    width: 100%;
}

.team-results .ratebar .legend{
    position: absolute;
    bottom: 5px;
    width: 100%;
}

.team-results.novice .average,
.team-results.novice .pts{
    color: #ee7f01;
}

.team-results.pro .average,
.team-results.pro .pts{
    color: #fecc00;    
}

.team-results.specialiste .average,
.team-results.specialiste .pts{
    color: #c8d200;    
}

.team-results.expert .average,
.team-results.expert .pts{
    color: #79b51c;    
}

.team-results.novice .ratebar .filler{
    background-color: #ee7f01;
}

.team-results.pro .ratebar .filler{
    background-color: #fecc00;
}

.team-results.specialiste .ratebar .filler{
    background-color: #c8d200;
}

.team-results.expert .ratebar .filler{
    background-color: #79b51c;
}

.panel-team-part{
    border-radius: 0;
    border:none;
    box-shadow: none;
    background-color: transparent;
    background-image: url('../images/quiz/bg_team_part.png');
    background-position: center top;
    background-size: 100% 100%;
    min-height: 375px;
    padding: 50px 60px;
}

.panel-team-part .title{
    color: #051039;
    font-size: 20px
}

.panel-team-part .title .text{
    display: inline-block;
    margin: 0 30px;
    font-weight: bold;
}

.table-part>thead>tr>th{
  color: #FFFFFF;
  background-color: #051039;
  border-bottom: 0;
}

.table-part>tbody {
    display:block;
    height:165px;
    overflow:auto;
}
.table-part>thead, 
.table-part>tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;/* even columns width , fix width of table too*/
}

.table-part>thead>tr>th, 
.table-part>tbody>tr>th, 
.table-part>tfoot>tr>th, 
.table-part>thead>tr>td, 
.table-part>tbody>tr>td, 
.table-part>tfoot>tr>td{
    padding: 5px 8px;
    font-size: 14px;
}


/************************
* Unauthened page
*************************/  
.login-form-container #page-default{
    border: 2px #9fa1a2 solid;
    background-color: #ebebed;
    padding: 15px;
}

.login-form-container #page-default h1{
    color: #212652;
    font-size: 16px;
    font-weight: bold;
}