/* 1920 x 1080 - large desktop 16:9 */ /* 1920 */
/* 1600 x 1200 - large desktop  */ /* 1600 */
/* 1280 x 1024 - medium desktiop  */ /* 1280 */
/* 1136 x 640  - iphone 5 */
/* 1024 x 768  - ipad mini */ /* 1024*/
/* 480*/

/************************************ RESPONSIVE *******************************************/

.menuResponsive {
    display: none;
    margin: 10px;
}

/* plus grand ou egal a 1600 */
@media (min-width: 1600px) {
    .container {
        width: 1600px;
    }
    .fullRow {
        width: 1600px;
    }

    #divTeleformation #divTag label {
        width: 180px;
    }
}

/* plus grand que 1820 */
@media (min-width: 1820px) {
    .container {
        width: 1820px;
    }
    .fullRow {
        width: 1820px;
    }

    #divTeleformation #divTag label {
        width: 180px;
    }

    main #container-filtres-ressources {
        -ms-grid-columns: 1fr 10px 1fr 10px 1fr;
        -ms-grid-rows: 1fr 75px;
    }

    main #container-filtres-ressources .conteneurArborescence {
        max-height: 240px;
    }

    /*Note: Plus besoin lorsqu'on ne supportera plus IE11*/
    main #container-filtres-ressources #sectionSelectionRessource {
        -ms-grid-row: 1;
        -ms-grid-row-span: 3;
        -ms-grid-column: 1;
    }

    /*Note: Plus besoin lorsqu'on ne supportera plus IE11*/
    main #container-filtres-ressources #sectionPeriode {
        -ms-grid-row: 1;
        -ms-grid-column: 5;
    }

    /*Note: Plus besoin lorsqu'on ne supportera plus IE11*/
    main #container-filtres-ressources #sectionBoutonsFiltre {
        margin-top: -60px; /*Mauvaise pratique mais c'est dû à IE*/
    }

    /*Note: Code principal pour les autres navigateurs*/
    @supports not (display: -ms-grid) {
        main #container-filtres-ressources {
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: 1fr 75px;
            grid-template-areas:
                "sectionSelectionRessource sectionCaracteristiques sectionPeriode"
                "sectionSelectionRessource sectionBoutonsFiltre .";
            grid-column-gap: 10px;
        }

        /*Note: Plus besoin lorsqu'on ne supportera plus IE11*/
        main #container-filtres-ressources #sectionBoutonsFiltre {
            margin-top: 0;
        }
    }
}

/* entre 1279 et 1600 */
@media (max-width: 1600px) {
    main #container-filtres-ressources {
        display: -ms-grid;
        -ms-grid-columns: 1fr 10px 1fr;
        -ms-grid-rows: 1fr auto 75px;
    }

    main #container-filtres-ressources .conteneurArborescence {
        max-height: 490px;
        height: 490px;
    }

    /*Note: Plus besoin lorsqu'on ne supportera plus IE11*/
    main #container-filtres-ressources #sectionSelectionRessource {
        -ms-grid-row: 1;
        -ms-grid-row-span: 3;
        -ms-grid-column: 1;
    }

    /*Note: Plus besoin lorsqu'on ne supportera plus IE11*/
    main #container-filtres-ressources #sectionCaracteristiques {
        -ms-grid-row: 1;
        -ms-grid-column: 3;
    }

    /*Note: Plus besoin lorsqu'on ne supportera plus IE11*/
    main #container-filtres-ressources #sectionPeriode {
        -ms-grid-row: 2;
        -ms-grid-column: 3;
    }

    /*Note: Plus besoin lorsqu'on ne supportera plus IE11*/
    main #container-filtres-ressources #sectionBoutonsFiltre {
        -ms-grid-row: 3;
        -ms-grid-column: 3;
    }

    /*Note: Code principal pour les autres navigateurs*/
    @supports not (display: -ms-grid) {
        main #container-filtres-ressources {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: 1fr auto 75px;
            grid-template-areas:
                "sectionSelectionRessource sectionCaracteristiques"
                "sectionSelectionRessource sectionPeriode"
                "sectionSelectionRessource sectionBoutonsFiltre";
            grid-column-gap: 10px;
        }

        main #container-filtres-ressources #sectionSelectionRessource {
            grid-area: sectionSelectionRessource;
        }

        main #container-filtres-ressources #sectionCaracteristiques {
            grid-area: sectionCaracteristiques;
        }

        main #container-filtres-ressources #sectionPeriode {
            grid-area: sectionPeriode;
        }

        main #container-filtres-ressources #sectionBoutonsFiltre {
            grid-area: sectionBoutonsFiltre;
        }
    }
}

/* entre 1024 et 1279*/
@media (max-width: 1279px) {
    .container {
        width: 1024px;
        margin: 0 auto;
    }
    .fullRow {
        width: 1024px;
    }

    /*Note: Plus besoin lorsqu'on ne supportera plus IE11*/
    #container-formCalendrier {
        -ms-grid-columns: 1fr;
        -ms-grid-rows: 1fr 24px 1fr;
    }

    /*Note: Plus besoin lorsqu'on ne supportera plus IE11*/
    main #container-formCalendrier #calendrierFiltres {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
    }

    /*Note: Plus besoin lorsqu'on ne supportera plus IE11*/
    main #container-formCalendrier #titreDate {
        -ms-grid-row: 2;
        -ms-grid-column: 1;
    }

    /*Note: Plus besoin lorsqu'on ne supportera plus IE11*/
    main #container-formCalendrier #calendrierListe {
        -ms-grid-row: 3;
        -ms-grid-column: 1;
    }

    main #container-formCalendrier #calendrierFiltres {
        width: 660px;
    }

    /*Note: Plus besoin lorsqu'on ne supportera plus IE11*/
    main #container-filtres-ressources {
        -ms-grid-columns: 1fr 10px 1fr;
        -ms-grid-rows: 1fr 10px 1fr 10px 75px;
    }

    /*Note: Plus besoin lorsqu'on ne supportera plus IE11*/
    main #container-filtres-ressources #sectionSelectionRessource {
        -ms-grid-row-span: 1;
        -ms-grid-column-span: 3;
    }

    /*Note: Plus besoin lorsqu'on ne supportera plus IE11*/
    main #container-filtres-ressources #sectionCaracteristiques {
        -ms-grid-row: 3;
        -ms-grid-column: 1;
    }

    /*Note: Plus besoin lorsqu'on ne supportera plus IE11*/
    main #container-filtres-ressources #sectionPeriode {
        -ms-grid-row: 3;
        -ms-grid-column: 3;
    }

    /*Note: Plus besoin lorsqu'on ne supportera plus IE11*/
    main #container-filtres-ressources #sectionBoutonsFiltre {
        -ms-grid-row: 5;
        -ms-grid-column: 1;
    }

    main #container-filtres-ressources .conteneurArborescence {
        max-height: 240px;
    }

    /*Note: Plus besoin lorsqu'on ne supportera plus IE11*/
    main #container-formMonProfil > div {
        display: block;
        width: 100%;
    }

    #divTeleformation #divTag label {
        width: 120px;
    }

    /*Note: Code principal pour les autres navigateurs*/
    @supports not (display: -ms-grid) {
        main #container-formCalendrier {
            grid-template-columns: 1fr;
            grid-template-rows: auto 24px auto;
            grid-template-areas:
                "calendrierFiltres"
                "titre"
                "calendrierListe";
        }

        main #container-filtres-ressources {
            grid-template-columns: 1fr;
            grid-template-rows: 1fr auto auto 75px;
            grid-template-areas:
                "sectionSelectionRessource"
                "sectionCaracteristiques"
                "sectionPeriode"
                "sectionBoutonsFiltre";
            grid-row-gap: 10px;
        }
    }
}

/* entre 768 et 1023*/ /* mini-ipad */
@media only screen and (max-width: 1023px) {
    .container {
        width: 768px;
    }
    .fullRow {
        width: 768px;
    }

    .conteneurDates {
        padding-top: 0;
    }

    .formReservationDate {
        width: 100% !important;
        padding-top: 10px;
    }

    .thCourriel {
        width: 250px !important;
    }
    .thDate {
        width: 75px !important;
    }
    .thDateHeure {
        width: 90px !important;
    }
    .thDateCreation {
        width: 60px !important;
    }
    .thGroupesUtilisateur {
        width: 125px !important;
    }
    .thIdentifiantUtilisateur {
        width: 80px !important;
    }
    .thNom {
        width: 150px !important;
    }
    .thNumero {
        width: 55px !important;
    }
    .thNumeroVisio {
        width: 45px !important;
    }
    .thPrenom {
        width: 150px !important;
    }
    .thPublic {
        width: 45px !important;
    }
    .thStatut {
        width: 50px !important;
    }
    .thActionsIcon {
        width: 80px !important;
    }
    .thRole {
        width: 60px !important;
    }
    .thPontTMS {
        width: 50px !important;
    }

    /*Le menu principal*/

    .menuPrincipal {
        border-bottom: 1px solid white;
    }

    .menuPrincipal ul.nav {
        border-top: 2px solid #78a0c2;
        width: 100%;
    }

    #lnkAllerDirect {
        position: absolute;
        right: 10px;
        top: 3px;
        padding: 0;
    }

    .menuResponsive {
        display: block;
        float: left;
    }

    .menuResponsive .iconeMenu {
        display: inline-block;
        height: 16px;
        width: 16px;
    }

    main #menuMonCompte {
        margin-right: -10px;
    }

    main .menuGauche {
        font-size: 12px;
        width: 100%;
    }

    main .menuGauche li {
        text-align: center;
        font-size: 12px;
        width: 12.5%;
        padding: 0 5px;
        float: left;
        height: 55px;
        border-right: 1px solid #666;
        border-left: 1px solid #666;
    }

    main .menuGauche li.selection {
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAyVBMVEVMaXFQUFBra2tmZmZbW1txcXFQUFBubm5SUlJVVVVubm5xcXFxcXFWVlZQUFBra2tXV1dUVFRtbW1tbW1paWlnZ2dZWVlVVVVpaWlra2tiYmJsbGxZWVlVVVVeXl5gYGBcXFxoaGhZWVlmZmZdXV1kZGRgYGBZWVlXV1ddXV1kZGRiYmJXV1dfX19qampbW1tlZWVdXV1oaGhjY2NiYmJvb29SUlJtbW1VVVVra2tXV1dgYGBpaWlmZmZbW1tZWVlkZGRdXV1iYmLhN7TWAAAANXRSTlMA7w/Pzz8/T0/PD1/vD1/Pzw/vzw8Pzy/P788vD+8Pzw/v7w8P7+8f7+/PLy8vLw8Pzx8P7yL7JuwAAAB4SURBVHgBrcdFAkIhAAXAp6Bgd3d3S/yO+x/KjqULZzf4VbfXPH2/f7DC5ejzGQ2s0CfH19dDN5iefWewfbw299zFZjVx7Ebrdt4xPToG9sQ2igzISm1Wd7iq1A0lUohInW/jrpxTIo24TGTwFC2JGMALeEsy/MMFsWIMZhL8jRkAAAAASUVORK5CYII="); /*Images/arrow_up_small.png*/
        background-position: center bottom;
        border-right: 1px solid #f7f7f7;
        border-left: 1px solid #f7f7f7;
    }

    main .menuGauche li span {
        padding: 0;
    }
}

/* entre 480 et 767*/
@media only screen and (max-width: 767px) {
    .container,
    .menuLeft {
        width: 480px !important;
    }
    .fullRow {
        width: 480px !important;
    }

    .smallScreenStretch100 {
        width: 100% !important;
    }

    .menuResponsive .iconeMenu {
        display: inline-block;
        background-image: url("Images/responsive-menu-blanc.png");
        height: 38px;
        width: 38px;
    }
    /*
      #cacherEnResponsive {
        display: none;
    }
    */
    .menuSecondaire ul.menuGauche {
        height: auto;
    }

    #lnkAllerDirect {
        top: 12px;
    }

    main ul.menuGauche li {
        width: 50%;
        border: 1px solid #666;
        height: 100%;
        float: left;
    }

    main ul.menuGauche li:hover {
        background-color: #666;
    }

    main ul.menuGauche li span {
        padding: 5px;
        margin-top: 0;
    }

    main ul.menuGauche li.selection {
        background-image: none;
    }

    .smallScreenNoPaddingLeftRight {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .smallScreenNoMarginLeftRight {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .smallScreenNoPaddingTopBottom {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}