/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
    Created on : 1 oct. 2015, 16:25:40
    Author     : afaidide
*/


@max-width-input: 300px;
@max-width-header : 964px;
@default-color-border:  #C0C0C0;

// Very extra small screen / phone
//** Deprecated `@screen-xs` as of afaidide
@screen-xxs:                200px;
// Extra small screen / phone
//** Deprecated `@screen-xs` as of v3.0.1
@screen-xs:                  500px;
//** Deprecated `@screen-xs-min` as of v3.2.0
@screen-xs-min:              @screen-xs;
//** Deprecated `@screen-phone` as of v3.0.1
@screen-phone:               @screen-xs-min;

// Small screen / tablet
//** Deprecated `@screen-sm` as of v3.0.1
@screen-sm:                  768px;
@screen-sm-min:              @screen-sm;
//** Deprecated `@screen-tablet` as of v3.0.1
@screen-tablet:              @screen-sm-min;

// Medium screen / desktop
//** Deprecated `@screen-md` as of v3.0.1
@screen-md:                  992px;
@screen-md-min:              @screen-md;
//** Deprecated `@screen-desktop` as of v3.0.1
@screen-desktop:             @screen-md-min;

// Large screen / wide desktop
//** Deprecated `@screen-lg` as of v3.0.1
@screen-lg:                  1440px;
@screen-lg-min:              @screen-lg;
//** Deprecated `@screen-lg-desktop` as of v3.0.1
@screen-lg-desktop:          @screen-lg-min;

// So media queries don't overlap when required, provide a maximum
@screen-xxs-max:             (@screen-xs-min - 1);
@screen-xs-max:              (@screen-sm-min - 1);
@screen-sm-max:              (@screen-md-min - 1);
@screen-md-max:              (@screen-lg-min - 1);

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

@zindex-draggable:          1100;
@zindex-navbar:             2000;
@zindex-pop-up:             2999;
@zindex-boite-magique:      @zindex-pop-up;


body {
    width: 60%;

    @media (max-width: @screen-sm-max){
        width: 90%;
    }
    margin: auto;
    background-color:  ? ;
    font-family: Verdana, Arial;
}
#langues {position: absolute; top: 3px; right: 3px;}
#langues img {border: 1px solid black;}
header, footer {
    margin: 0 !important;
    padding: 0 !important;
}
header .row, footer .row{
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}
header img#baniere, footer img#pied_page {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

.mentions
{
    margin-top: 50px;
    padding-top: 7px;
    margin-bottom: 10px;
    font-size: 0.7em;
    text-align: center;
    border-top: 1px dotted black;
}

nav#menu-principal {
    div#bs-navbar-collapse {
        max-width: @max-width-header;
        margin: auto;
        a.lien-menu {
            padding: 15px 10px 15px 10px;
        }
    }
    z-index: @zindex-navbar;
}

.navbar-inverse .nav li.dropdown.open > .dropdown-toggle,
.navbar-inverse .nav li.dropdown.active > .dropdown-toggle,
.navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle,
.navbar,
.navbar-inverse .navbar-inner {
    filter: none;
    background-image: none;
}

h3, .h3 { font-weight: bold; color: #3d3c3d; text-transform: uppercase; margin-top: 5px !important; margin-bottom:5px !important;}
h5, .h5 { font-weight: bold; color: #3d3c3d;}
h1, .h1 { text-align: center; }
.invisible { display: none; }
.left { float: left; }
.right { float: right; }

.btn-style-blanc {
    -moz-box-shadow: 1px 3px 2px -1px #c2c2c2;
    -webkit-box-shadow: 1px 3px 2px -1px #c2c2c2;
    box-shadow: 1px 3px 2px -1px #c2c2c2;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #ffffff) );
    background:-moz-linear-gradient( center top, #ffffff 5%, #ffffff 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff');
    background-color:#ffffff;
    -webkit-border-radius:2px 2px 2px 2px;
    -moz-border-radius:2px 2px 2px 2px;
    border-radius:2px 2px 2px 2px;
    text-indent:-0.99px;
    border:1px solid #807d80;
    display:inline-block;
    color: #3d3c3d;
    font-size:13px;
    font-weight:bold;
    font-style:normal;
    padding : 3px 13px;
    text-decoration:none;
    text-align:center;
    cursor: pointer;
}

.btn-style-blanc:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #e8e8e8) );
    background:-moz-linear-gradient( center top, #ffffff 5%, #e8e8e8 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e8e8e8');
}

#boite_magique{
    position: absolute;
    border: 1px solid black;
    background-color: white;
    padding: 0px;
    -moz-opacity:1;
    opacity: 1;
    filter:alpha(opacity=100);
    display: none;
    overflow: auto;
    z-index : @zindex-boite-magique;
}


#contenu_boite_magique{
    padding: 10px;
}

#annule_bm{
    float: right;
    cursor: pointer;
}

form {
    div.well {
        margin-top: 10px;
        margin-bottom: 20px;
        padding-top: 20px;
        padding-bottom: 15px;
    }
    span.radios {
        padding-left: 15px;
    }
    .radio{
        label{
            font-weight: bold;
        }
    }
    .radio.radio-block{
        label{
            display: block;
            margin: 12px 0;
        }
    }
    .radio.radio-inline{
        label{
            margin: 0 10px;
        }
    }
    input.calendar{
        width: auto !important;
    }

    input[type="file"].piece_jointe{
        display: inline-block !important;
    }

    span.lien_file{
        display: inline-block;
        //float: right;
        margin-top: 5px;
    }
}

form#form-connexion {
    padding: 15px;
    fieldset#block-connexion {
        display: block;
        margin-top: 20px;
        padding: 40px 0px 20px 0px;
        legend {
            margin: auto;
            left: 0em;
        }

    }
    @media (max-width: @screen-xs-max){
        padding-top: 5px;
        fieldset#block-connexion {
             margin-top: 5px;
        }
    }
}

.panel-collapse{
    .panel-body{
        padding-top: 20px;
    }
}

a[data-toggle='collapse']:hover,
a[data-toggle='collapse'] > label:hover,
a[data-toggle='collapse'] > label > input:hover
{
    cursor: pointer;
}

.media{
    margin-top : 0;
}

.red_button{
    color: #EE3D3F;
}

.invisible{
    display: none;
}

@-moz-document url-prefix() {
    fieldset { display: table-cell; }
}

@media (max-width: @screen-xs-max){
    .alert{
        margin-bottom: 10px;
    }
}


//////////////////////////////////////////////////
///////////// Style tableau responsif ////////////
//////////////////////////////////////////////////


.table-responsive{
    -webkit-overflow-scrolling: scroll;
}

.rwd-table {
    margin: 0 0;

    @media (min-width: @screen-sm-min){
        tr:nth-child(odd) {
            background-color: white;
        }
    }

    @media (max-width: @screen-xs-max){
        margin-top: 0;
    }

    th {
        display: none; // for accessibility, use a visually hidden method here instead! Thanks, reddit!
    }

    td {
        display: block;

        &:first-child {
          padding-top: .5em;
        }
        &:last-child {
          padding-bottom: .5em;
        }

        &:before {
            content: attr(data-th)" :\00a0"; // who knew you could do this? The internet, that's who.
            font-weight: bold;
            display: inline-block;

            @media (min-width: @screen-sm-min) {
              display: none;
            }
        }

        white-space: normal !important;
    }

    th, td {

        @media (max-width: @screen-xs-max){
            text-align: left !important;
            border-radius: none !important;
            border : none !important;
        }

        @media (min-width: @screen-sm-min) {

            display: table-cell;
            padding: .25em .5em;

            &:first-child {
                padding-left: 0;
            }

            &:last-child {
                 padding-right: 0;
            }
        }
    }
}

////////////////////////////////////////////
///////////// Style inscription ////////////
////////////////////////////////////////////


    //** accueil inscription (page d'information visible) **//

#form-accueil-inscription{
    text-align: center;
    #img-accueil-inscription{
        margin: auto;
    }
}

    //** Multiparticipant (choix) **//

table#ajout-participants,
table#liste-participants{

    tr th,
    tr td{
        text-align: center;
    }
}

table#ajout-participants{
    input[type="text"]{
        min-width: 150px;
    }
     select[name="profil"]{
        min-width: 200px;
    }
}

    //** transport **//

.achemin_label{
    font-weight: bold;
    text-align: right;
}

@media (max-width: @screen-xs-max) {
    .achemin_label{
        text-align: left;
    }
}

.achemin_trajet{
    text-align: center;
}

.ss_titre_achemin{
    text-align: center;
    font-weight: bold;
    margin-bottom: 15px;
    margin-top: 5px;
}

    //** programme **//

.ligne-date{
    margin-bottom: 15px;
}

.ligne-programme{
    margin: auto auto 10px auto !important;
}

.descript_acti{

    color: #807d80;
}

@media (min-width: @screen-md-min){
    .descript_acti{
        padding-left: 35px;
    }
}

.img-programme{
    margin: auto;
}

    //** panier **//

#panier{
    font-size: 0.85em;
    @media (min-width: @screen-sm-max){
        max-width: 330px;
    }

    .panel-heading{
        padding-left: 5px !important;
        @media (max-width:@screen-sm-max){
           padding-top: 3px !important;
           padding-bottom: 3px !important;
           padding-right: 5px;
        }
    }
    .elem_panier{
        margin-left: 10px;
    }
    .panel-collapse .panel-body{
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }
    .panier_montant{
        font-weight: bold;
        font-style: italic;
    }
    a{
        text-decoration: none;
    }
    #accordion{
        margin-bottom: 0;
    }
}

/*#panier :hover{
    cursor: all-scroll;
}*/

#panier a :hover{
    cursor: pointer;
}

.draggable{
    z-index: @zindex-draggable;
    position: absolute;
}

.notation_table input[type="radio"]{
    margin-left: 7px !important;
    margin-right: 7px !important;
}

#pres_quiz_image {
    max-width: 95%;
    max-height: 40vh;
    margin: auto;
}

.next-btn {
    display: block;
    margin: auto;
    text-align: center;
    margin: auto;
    width: 10vw;
    min-width: min-content;
    height: 7vh;
    color: #004085;
    background-color:#cce5ff;
    font-size: 14px;
    margin-bottom: 5px;
}