@import "bootstrap";

@import "fontawesome/font-awesome";
@import "magnific-popup";


@import "public/grid";
@import "public/popover";
@import "public/general";
@import "public/search";
@import "public/binary";
@import "public/account";
@import "public/affiliation";
@import "public/need";





#main{
position:relative;
  .body-container{

    background-color: #ededed;
    padding-top:50px;
    padding-bottom:30px;
  }
  .footer{
    height:500px;
    background-color: #777777;
  }

}



.top{

  //margin-bottom:10px;
  position:relative;
  background:rgba(2,43,71,1) ;
  background-size:100%;
  background-size:cover;


  #menu{
    a{
      color:white;

    }
    .btn-primary{

      color:white;
    }

    background:white;

  }

}
.top_home{

  background:black url("/fond1.jpg") no-repeat center center  ;
  background-size:100%;
  background-size:cover;

  position:relative;
  #search_form{
    margin-top:40px;

  }
  #specific_search{
    color:white;
    background:rgba(0,0,0,0.5);
    .inner{
      padding:10px;

    }


  }


  h1, h2{
    text-align:center;


    color:white;
    width:100%;
    padding:0;
    margin:0;
  }

  h1{
    font-size:2.3em;
    margin-top:400px;
    margin-bottom:100px;
    font-weight:normal;
  }
  h2{

    font-size:1.4em;

    img{
      width:60px;
      display:block;
      margin:1em auto;


    }
  }
}



#menu{

  background:rgba(0,0,0,0) !important;
  width:100%;

  z-index:10;

  -webkit-transition: background-color 1000ms linear;
  -moz-transition: background-color 1000ms linear;
  -o-transition: background-color 1000ms linear;
  -ms-transition: background-color 1000ms linear;
  transition: background-color 1000ms linear;

  a{
    color:white;

  }

  ul{
    margin:0;
    padding:2px 10px;
    float:right;
    li{
      padding:0;
      margin:0;
      display:inline;
      display:inline-block;
      padding:8px 0px;

    }

  }

}

.public-table{
   td, th{
      vertical-align:middle !important;
    }
}

.bottom{
  background:#323232;
  min-height:300px;
  padding:10px 10px;
  position:relative;
  text-align:left;
  #nb{
    position:absolute;

    right:20px;
    height:25px;
    bottom:20px;
    opacity:0.4;

    &:hover{
      opacity:1;

    }

  }
  ul{
    margin-left:0;
    list-style:none;
    padding:0;
    li{

    }

  }
  a,h4{
    font-weight:normal;
    color:rgb(255, 255, 255);

  }
  a{
    display:block;
    padding: .2em 0 0.6em;

  }

  h4{

    padding: .5em 0;
    border-bottom: 1px solid #656565;
  }

}

.page{
  padding-bottom:150px;
  table{
    margin:1em auto;
    tr:nth-child(even) {


        background:rgba(210,222,237,1);


    }
    td{
      padding:5px;
      border:1px solid rgba(77,128,186,1);

    }

  }

}



.layus{
  color:white;
  background:rgba(77,128,186,1);
  text-align:center;
  h1, h2,h3{
    font-weight:400;
    text-align:center;
  }
  h1{
    font-size:45px;

  }
  h2{
    font-size:32px;

  }
  padding:2em 10px;

}

.customer_message_li{
  &.active, &:hover{
    background:#3677AF;
    color:white;
    text-decoration:none;
    border-color:transparent;
    .time{
      color:white;

    }
  }
  display:block;
  text-align:left;
  padding:10px 10px;
  color:#454340;

  img{
    float:left;
    border-radius:50%;
    height:60px;
    margin-right:5px;

  }
  .new{

    display:inline-block;
    width:10px;
    height:10px;
    background:#3677AF;
    border-radius:50%;
  }
  .pseudo{

    font-weight:bold;
    margin-bottom:10px;

  }
  .time{
    font-size:0.8;
    color:rgba(120,118,115,1);
    float:right;
    margin-left:10px;

  }
  border-radius:0;
  border-bottom:1px solid gray;

}
.customer_message_show{
  background:white;min-height:600px;
  padding-top:10px;
  padding-bottom:10px;

  .message_annonce{
    color:white;
    background:#4F81B8;
    padding:10px;
    margin-bottom:10px;
    a{
      color:white;

    }

  }
}

.am{
  .badge{

    background:#3677AF;
  }

}

#categories{
  background:#F0F0F0;
  color:#525252;
  h2{
    font-size:1.2em;
    font-weight:normal;

  }
  h3{
    font-size:1.1em;
    font-weight:bold;
    border-bottom:1px solid #DBDBDB;
    padding-bottom:10px;
  }

  ul{
    list-style:none;
    padding:0;
    li{
      margin-left:0;
      font-size:0.9em;
      padding-bottom:5px;
      a{
        color:#525252;
      }
    }

  }

}

.customer_dashboard{

  .panel{

    min-height:260px;
  }

}

#annonce_menu{
  border-bottom: 1px solid #C8CBCC;
  padding-bottom:10px;
  text-align:center;
  .menu_icon{
    text-align:center;
    font-size:30px;
    background:white;
    display:block;
    border-radius:50%;
    margin:auto;
    padding:10px;
    width:70px;
    margin-bottom:5px;

  }

  .active{
    color:orange ;
    a{

      color:orange;
    }
    .menu_icon{

      background:orange;
      color:white;

    }

  }

  .ok{
    color:green;
    a{

      color:green;
    }
    .menu_icon{

      background:green;
      color:white;

    }

  }

}

.next_step{

  padding:20px 10px;
  text-align:center;
  margin-bottom:50px;
}

.connexion_form{
  h1{
    text-align:center;
  }
  padding:10px;

  max-width: 420px;
  padding: 10px 20px;
  margin: 20px auto 20px;
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid #e5e5e5;
  border-radius: 5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

}

#new_customer_form_container{

  h1{
    text-align:center;
  }
  padding:10px;

  max-width: 600px;
  padding: 10px 20px;
  margin: 20px auto 20px;
  background-color: rgba(255, 255, 255, 0.95);
  border: 1px solid #e5e5e5;
  border-radius: 5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

}

.fav{
  padding:5px;
  &.active, &:hover{
    color:#ffcc17;

  }
  color:#dddddd;
  font-size:18px;
  position:absolute;top:20px;right:20px;
}

.white{
  padding:20px;
  background:white;
  margin-bottom:20px;

  tr:nth-child(odd){

    background:#F7F9FA;
  }
  td{
    border:0 !important;

  }
}


.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.aff_table{
  width:100%;
  th, td{
    padding:5px;
    border:1px solid rgba(170,170,170,1);
    background:white;
    border-collapse : collapse;
    text-align:center;
  }
  th{

    background:rgba(220,240,248,1);

    font-weight:normal;
  }
  .header_tr{

    th{
      color:white;
      background:rgba(58,59,86,1) !important;
    }
  }

  .orange{
    background:#c8de84;
    //color:black;

  }
}


#flashs{
  position:fixed;
  bottom:0px;

  right:2em;
  min-width:600px;
  width:50%;
  z-index:3;

}



@media screen and (max-width:740px) {
#annonce{

  #corps, #infos{

    width:auto;
    float:none;
  }

  #infos{
    padding:10px;

  }


}


#default_image{

  height:300px;
  border-radius:0;
}




  .annonce_header{
      .localisation{
        padding:5px 10px;
        float:none;
      }
      .price{
        text-align:right;
        font-size:1.5em;
        font-weight:600;
        float:none;
        padding-left:20px;
      }
      .fav{

        float:none;
        position:static;
        display:inline;
        cursor:pointer;
      }

  }


  #menu{
    text-align:center;
    .add_annonce{

      display:block;

      .btn{
        width:200px;
        display:block;
        margin:6px auto;
        margin-top:0;
      }
    }



    ul{

    float:none;
  }
}



  #search_form{ #general_search{
    display:block;
    .place_search{

      float:none;
    }
    #q, #place, #annonce_cat_id{
    border: 1px solid #c4c4c4;
    float:none;
    width:96%;
    display:block;
    border-radius:8px;
    margin:5px auto;
  }

  #search_button{

  float:none;
  width:200px;
  display:block;
  border-radius:8px;
  margin:5px auto;
  margin-top:10px;
}



}}

.top_home h1{
  width:96%;
  margin:auto;
  margin-top:30px;
  margin-bottom:30px;
}

}

#likebox-wrapper * {
   width: 100% !important;
}

#logo{

  margin:20px auto;
  display:block;
  height:200px;
  margin-bottom:60px;

}
#big-logo{

  margin:20px auto;
  width:400px;
  height:400px;
  display:block;



}

.btn-file {
    position: relative;
    overflow: hidden;
}
.btn-file input[type=file] {

    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

.mfp-iframe-holder .mfp-content {

    width: 90%;
    max-width: 100%;

}


.customer_message_li{
  &.active, &:hover{
    background:#3677AF;
    color:white;
    text-decoration:none;
    border-color:transparent;
    .time{
      color:white;
      
    }
  }
  display:block;
  text-align:left;
  padding:10px 10px;
  color:#454340;
  
  img{
    float:left;
    border-radius:50%;
    height:60px;
    margin-right:5px;
    
  }
  .new{
    
    display:inline-block;
    width:10px;
    height:10px;
    background:#3677AF;
    border-radius:50%;
  }
  .pseudo{
    
    font-weight:600;
    margin-bottom:10px;
    
  }
  .time{
    font-size:0.7em;
    color:rgba(120,118,115,1);
    float:right;
    margin-left:10px;
    
  }
  border-radius:0;
  border-bottom:1px solid gray;
  
}

.message_avertissement{
  padding:10px;
  h3{
    margin-top:0;
  }
  background-color: #fcf8e3;
  border-top: 1px solid #faebcc;
  color: #8a6d3b;
}


.customer_message_show_container{
  padding:0 !important;
  background:white;
  border:1px solid #ddd;
  border-radius:3px;
  .speak_with{
    padding:10px;
    line-height:60px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #ddd;
    img{
      float:left;
      border-radius:50%;
      height:60px;
      margin-right:5px;
    
    }
  }
  
}
.customer_message_list{
  padding:0;
  padding-right:5px;
}
.customer_message_show{
  

  .customer_message_container{
    
    padding:10px;
    margin-bottom:20px;
    .side{
      float:left;
      width:150px;
      text-align:center;
      position:relative;
      .square{
        position:absolute;
        background-color: #f5f5f5;
        top:16px;
        width:12px;
        height:12px;
        right:-6px;
        transform: rotate(45deg);
        
      }
      img{
         
          border-radius:50%;
          height:60px;
          
        
      }
      .pseudo{
          
            font-weight:600;
            margin-bottom:10px;
        
        }
      .time{
          font-size:0.7em;
          color:rgba(120,118,115,1);
          
        
      }
    
      
    }
    .content{
      background-color: #f5f5f5;
      padding:15px;
      margin-left:150px;
      min-height:150px;
      border-radius:10px;
      margin-right:80px;
      
    }
    .ip_country{
      font-size:0.8em;
      margin-left:150px;
      margin-right:80px;
      padding-top:5px;
    }
    
    &.me{
      
      .ip_country{
        font-size:0.8em;
        margin-right:150px;
        margin-left:80px;
      }
      
      .side{
        .square{
          right:auto;
          left:-6px;
          
        }
        
        
        float:right;
      }
      
      .content{
        margin-left:80px;
        margin-right:150px;
        
      }
      
      
    }
    
    &.desactivated{
      
      .side{
        .square{
          background-color: #fcf8e3;
          
        }
        
        

      }
      
      .content{
        background-color: #fcf8e3;
        color: #8a6d3b;
        h3{
          margin-top:0;
        }
        
      }
      
      
    }
  }
  .message_annonce{
    
    background:rgba(252,248,228,0.5);
    padding:10px;
    margin-bottom:10px;
    a{
      //color:white;
      
    }
    
  }
}


@media screen and (max-width:740px) {
  .customer_message_show{
    
    .customer_message_container{
    
    .content{
      margin-right:0px;
      
    }
    
    &.me{
      .content{
        margin-left:0px;
      
      }
      
    }
  
  }
   } 
    
}