body {
    padding-top: 0px;
    padding-bottom: 20px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

:root {
    --bleuMoyen: #0080c1;
    --bleuFonce: #0c1d8d;
    --vert: #28a745;
}

.nav-image {
    background: url(/Images/Logo_Portail.png) no-repeat top right;
    background-size: 69px auto;
}

@media screen and (min-width: 980px) /* Desktop */ {
    .imgMobile {
        height: auto;
    }

    .imgMobileFleche {
        height: 15px;
        width: 200px;
    }

    .Hauteur-Saisie-Mobile {
        height: 110px !important;
    }
}

@media screen and (max-width: 979px) /* Tablet */ {
    *,
    *::before,
    *::after {
        box-sizing: border-box; /* Bascule Saisie 2 colonnes */
    }

    .imgMobile {
        height: 50px;
    }

    .imgMobileFleche {
        height: 15px;
        width: 100px;
    }

    .imgMobileLogoGTC {
        height: 50px;
    }

    .Text-Taille-Mobile {
        font-size: 1rem;
    }

    .Hauteur-Saisie-Mobile {
        height: 110px;
    }
}

@media screen and (max-width: 800px) /* Bascule Saisie 1 colonne */ {
    *,
    *::before,
    *::after {
        box-sizing: content-box; /* Bascule Saisie 1 colonne */
    }

    .imgMobile {
        height: 50px;
    }

    .imgMobileFleche {
        height: 15px;
        width: 100px;
    }

    .imgMobileLogoGTC {
        height: 50px;
    }

    .Text-Taille-Mobile {
        font-size: 0.9rem;
    }

    .Hauteur-Saisie-Mobile {
        height: 110px;
    }
}

@media screen and (max-width: 580px) /* Bascule Navigation */ {
    *,
    *::before,
    *::after {
        box-sizing: content-box; /* Bascule Saisie 1 colonne */
    }

    .imgMobile {
        height: 50px;
    }

    .imgMobileFleche {
        height: 15px;
        width: 100px;
    }

    .imgMobileLogoGTC {
        height: 50px;
    }

    .Text-Taille-Mobile {
        font-size: 0.75rem;
    }

    .Hauteur-Saisie-Mobile {
        height: 110px;
    }
}

@media screen and (max-width: 500px) /* Mobile */ {
    *,
    *::before,
    *::after {
        box-sizing: content-box; /* Bascule Saisie 1 colonne */
    }

    .imgMobile {
        height: 50px;
    }

    .imgMobileFleche {
        height: 15px;
        width: 50px;
    }

    .Text-Taille-Mobile {
        font-size: 0.6rem;
    }

    .Hauteur-Saisie-Mobile {
        height: 110px;
    }
}

@media screen and (max-width: 360px) /* Petit Mobile */ {
    *,
    *::before,
    *::after {
        box-sizing: content-box; /* Bascule Saisie 1 colonne */
    }

    .imgMobile {
        height: 40px;
    }

    .imgMobileFleche {
        height: 15px;
        width: 40px;
    }

    .Text-Taille-Mobile {
        font-size: 0.4rem;
    }

    .Hauteur-Saisie-Mobile {
        height: 110px;
    }
}

.amitel-neutre-label {
    padding-bottom: 0px;
    padding-top: 0px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-top-width: 1px;
    border-top-style: solid;
    margin-bottom: 5px;
    padding-left: 5px;
    margin-left: -5px;
    padding-right: 5px;
}

.amitel-neutre {
    float: none;
    margin: 0 auto
}

.amitel-padding-left-neutre {
    padding-left: 0 initial
}

.amitel-padding-right-neutre {
    padding-right: 0 initial
}

.amitel-padding-neutre {
    padding-left: 0 initial;
    padding-right: 0 initial
}

.amitel-padding-left-10 {
    padding-right: 10px
}

.amitel-padding-left-15 {
    padding-right: 15px
}

.amitel-padding-SaisieDroite {
    border-radius: 0 3px 3px 0;
}

.amitel-jumbotron {
    margin-bottom: 1rem;
    padding: 1rem 1rem;
    padding-top: 25px;
    padding-bottom: 11px;
    border-radius: 15px 15px 15px 15px;
    background-color: rgba(var(--bs-secondary-bg-rgb));
}

.amitel-margin-right-10 {
    margin-right: 10px;
}

.amitel-margin-right-15 {
    margin-right: 15px;
}

.amitel-margin-left-10 {
    margin-left: 10px;
}

.amitel-margin-left-15 {
    margin-left: 15px;
}

.amitel-width-neutre {
    width: 0;
}

.amitel-hauteurfine {
    height: 3px;
    width: 0;
}

.amitel-position-relative {
    position: relative;
}

.amitel-colonne-max {
    max-width: 100%;
}

.amitel-height-200 {
    height: 200px;
}

.amitel-height-190 {
    height: 190px;
}

.amitel-height-180 {
    height: 180px;
}

.amitel-height-170 {
    height: 170px;
}

.amitel-height-160 {
    height: 160px;
}

.amitel-height-150 {
    height: 150px;
}

.amitel-height-140 {
    height: 140px;
}

.amitel-height-130 {
    height: 130px;
}

.amitel-height-120 {
    height: 120px;
}

.amitel-height-110 {
    height: 110px;
}

.amitel-height-100 {
    height: 100px;
}

.amitel-height-90 {
    height: 90px;
}

.amitel-height-80 {
    height: 80px;
}

.amitel-height-70 {
    height: 70px;
}

.amitel-height-60 {
    height: 60px;
}

.amitel-height-50 {
    height: 50px;
}

.amitel-height-40 {
    height: 40px;
}

.amitel-height-30 {
    height: 30px;
}

.amitel-height-20 {
    height: 20px;
}

.amitel-height-10 {
    height: 10px;
}

.amitel-height-05 {
    height: 5px;
}

.amitel-height-03 {
    height: 3px;
}

.amitel-height-01 {
    height: 1px;
}

.amitel-font-size-10 {
    font-size: 10px;
}

.amitel-font-size-11 {
    font-size: 11px;
}

.amitel-font-size-12 {
    font-size: 12px;
}

.amitel-font-size-13 {
    font-size: 13px;
}

.amitel-font-size-14 {
    font-size: 14px;
}

.amitel-font-size-15 {
    font-size: 15px;
}

.amitel-image-information {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

.amitel-MargeDG5 {
    padding-left: 5px;
    padding-right: 5px;
}

.amitel-MargeDG10 {
    padding-left: 10px;
    padding-right: 10px;
}

.switch.ios ,  .switch-on.ios ,  .switch-off.ios {
    border-radius: 20rem;
}

    .switch.ios .switch-handle {
        border-radius: 20rem;
    }

/* Alertes Standardisées */
.alert:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 25px;
    margin: 0 30px 0 10px;
}

.alert-danger {
    background-color: #f8d7da;
    color: #58151c;
}

    .alert-danger:before {
        content: "\f071";
    }

.alert-success {
    background-color: #d1e7dd;
    color: #0a3622;
}

    .alert-success:before {
        content: "\f058";
    }

.alert-info {
    background-color: #cfe2ff;
    color: #052c65;
}
/*
    .alert-info:before {
        content: "\f05a";
    }
*/
.alert-warning {
    /*background-color: #f8d7da;
  color: #58151c;*/
}

    .alert-warning:before {
        content: "\f071";
    }


/* Cadre Image */
.bdr-bleuMoyen {
    border: 4px solid var(--bleuMoyen);
}

.bdr-bleuFonce {
    border: 4px solid var(--bleuFonce);
    /*color: #495057;*/
}

.bdr-btn-info {
    border: 4px solid var(--vert);
}

/* Bouton Couleur de logo des GTC HORS Lyon */
.text-bleuMoyen {
    color: var(--bleuMoyen) !important;
}

a.text-bleuMoyen:hover, a.text-bleuMoyen:focus {
    color: #19692c !important;
}

/* Bouton Couleur de logo des GTC QUE Lyon */
.text-bleuFonce {
    color: var(--bleuFonce) !important;
}

a.text-bleuFonce:hover, a.text-bleuFonce:focus {
    color: #19692c !important;
}


/* Bouton Couleur de logo des GTC HORS Lyon */
.btn-bleuMoyen {
    color: #fff;
    background-color: var(--bleuMoyen);
    border-color: var(--bleuMoyen);
}

    .btn-bleuMoyen:hover {
        color: #fff;
        background-color: #138496;
        border-color: #117a8b;
    }

    .btn-bleuMoyen:focus, .btn-bleuMoyen.focus {
        color: #fff;
        background-color: #138496;
        border-color: #117a8b;
        box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);
    }

    .btn-bleuMoyen.disabled, .btn-bleuMoyen:disabled {
        color: #fff;
        background-color: var(--bleuMoyen);
        border-color: var(--bleuMoyen);
    }

    .btn-bleuMoyen:not(:disabled):not(.disabled):active, .btn-bleuMoyen:not(:disabled):not(.disabled).active,
    .show > .btn-bleuMoyen.dropdown-toggle {
        color: #fff;
        background-color: #117a8b;
        border-color: #10707f;
    }

        .btn-bleuMoyen:not(:disabled):not(.disabled):active:focus, .btn-bleuMoyen:not(:disabled):not(.disabled).active:focus,
        .show > .btn-bleuMoyen.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);
        }

.border-bleuMoyen {
    border-color: var(--bleuMoyen) !important;
}


/* Bouton Couleur de logo des GTC QUE Lyon */
.btn-bleuFonce {
    color: #fff;
    background-color: var(--bleuFonce);
    border-color: var(--bleuFonce);
}

    .btn-bleuFonce:hover {
        color: #fff;
        background-color: #138496;
        border-color: #117a8b;
    }

    .btn-bleuFonce:focus, .btn-bleuFonce.focus {
        color: #fff;
        background-color: #138496;
        border-color: #117a8b;
        box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);
    }

    .btn-bleuFonce.disabled, .btn-bleuFonce:disabled {
        color: #fff;
        background-color: var(--bleuFonce);
        border-color: var(--bleuFonce);
    }

    .btn-bleuFonce:not(:disabled):not(.disabled):active, .btn-bleuFonce:not(:disabled):not(.disabled).active,
    .show > .btn-bleuFonce.dropdown-toggle {
        color: #fff;
        background-color: #117a8b;
        border-color: #10707f;
    }

        .btn-bleuFonce:not(:disabled):not(.disabled):active:focus, .btn-bleuFonce:not(:disabled):not(.disabled).active:focus,
        .show > .btn-bleuFonce.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);
        }

.border-bleuFonce {
    border-color: var(--bleuFonce) !important;
}

#compteur {
    text-align: right;
    width: 855px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
}

.mauvais {
    color: #cc0000;
}


/**THE SAME CSS IS USED IN ALL 3 DEMOS**/
/**gallery margins**/
ul.gallery {
    margin-left: 3vw;
    margin-right: 3vw;
}

.zoom {
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.35s ease-in-out;
    transition: all 0.35s ease-in-out;
    cursor: -webkit-zoom-in;
    cursor: -moz-zoom-in;
    cursor: zoom-in;
}

    .zoom:hover,
    .zoom:active,
    .zoom:focus {
        /**adjust scale to desired size, 
add browser prefixes**/
        -ms-transform: scale(2.5);
        -moz-transform: scale(2.5);
        -webkit-transform: scale(2.5);
        -o-transform: scale(2.5);
        transform: scale(2.5);
        position: relative;
        z-index: 100;
    }

/**To keep upscaled images visible on mobile, 
increase left & right margins a bit**/
@media only screen and (max-width: 768px) {
    ul.gallery {
        margin-left: 15vw;
        margin-right: 15vw;
    }

    /**TIP: Easy escape for touch screens,
give gallery's parent container a cursor: pointer.**/
    .DivName {
        cursor: pointer
    }
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    line-height: 60px;
    background-color: #f5f5f5;
}