/*
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 : Oct 11, 2018, 10:43:29 PM
    Author     : FACULTY
*/
html{
    overflow: auto;
}
html, .body, .main{
    position:relative;
    margin: 0px;
    width:100%;
    height:100%;
    background-color: #dcdcbc;
    border: 0.25px solid white;
}

.main .companyOverview {
    float:left;
    width:100%;
    height:10%;
    background-color:#dcdcbc;
    position:relative;
    z-index:500;
    font-family: Georgia;
    font-size: medium;
    text-align: center;
}


.companyOverview .overview-grid{
    display: grid;
    grid-template-columns: 12% 12% 12% 12% 12% 12% 15% 8% 5%;
    width:100%;
    height:100%;
}

.overview-grid .logo {

    grid-column: 1;
    height:100%;
    margin:0px;
    float:left;
    position:relative;
}

.home  {
    float:left;
    grid-column:2;
    margin:0px;
    position:relative;
}

.aboutUs {
    float:left;
    grid-column:3;
    margin:0px;
    position:relative;
}

.contact {
    grid-column:4;
    margin:0px;
    float:left;
    position:relative;
}

.compteClient {
    grid-column:5;
    margin:0px;
    float:left;
    position:relative;
}

ul{
    list-style-type: none;
    margin:0px;
}

.compteClient ul li a{
    text-decoration: none;
    color:black;
    position: relative;
}

.compteClient>ul{
    height:100%;
    margin-top:4%;
    position:relative;
    text-align: center;
}

.compteClient>ul>li{
    float:left;
    position:relative;
    z-index:350;
    margin:0px;
    top:15%;
}

.compteClient>ul ul{
    display: none;
}

.compteClient>ul>li:hover>ul{
    width:100%;
    display:block;
    text-align: center;
}

.compteClient  ul ul li{
    float:left;
    margin-left:1px;
    padding-top:2px;
    font-weight:normal;
    font-style: italic;
    font-size: medium;
    position:relative;
    z-index:340;
}

.cart{
    float:right;
    width:98%;
    height:49px;
    grid-column:9;
    margin-left:3%;
}

.cartIcon{
    width:98%;
    height:98%;
}

#cartID p{
    position:absolute;
    text-justify: auto;
    font-family: Georgia;
    font-size: medium;
    margin:0%;
    color:red;
    padding-left:1.5%;
    margin-top:-4.2%;
}


.english {
    grid-column:6;
    margin:0px;
    float:left;
    position:relative;
}

.home a, .aboutUs a, .contact a, .english a{
    text-decoration: none;
    top:15%;
    color:black;
    position:relative;
}

a.active {
    color: white;
}

a:hover:not(.active) {
    background-color: cornflowerblue;
    color: white;
}

.search {
    grid-column:7;
    margin:0px;
    float:left;
    position:relative;
}

.searchTextButton{
    width:100%;
    height:50%;
    position:relative;
    float:left;
    display: inline-block;
}

.searchText {
    width:90%;
    height:70%;
    margin-top:2%;
    font-family: Georgia;
    font-size: medium;
    position:relative;
    float:left;
}

.searchIcon{
    position:relative;
    float:right;
    width:10%;
    height: 100%;
    margin-top:2%;
    margin-left:-10%;
    z-index: 1;
}

.labelText{
    float:left;
    font-family: Georgia;
    font-size: smaller;
    color:blue;
    margin:0%;
    padding:0%;
}

.menu{
    float:left;
    width:100%;
    height: 7%;
    padding-bottom:1%;
    background-color: #EBF8BD;
    position:relative;
    z-index:450;
}

.menu-grid{
    display:grid;
    grid-template-columns: 15% 15% 15% 15% 15% 25%;
    width:100%;
    height:100%;
}

.menu ul{
    margin:0;
    /*margin-left: 30px;*/
    width:100%;
    padding: 0;
    list-style-type: none;
}

.menu ul li a{
    padding-right: 1%;
}


.menu li a.active {
    background-color: chocolate;
    color: white;
}

.menu li a:hover:not(.active) {
    background-color: cornflowerblue;
    color: white;
}

.menu ul li a {
    text-decoration: none;
    color:black;
}

.menu>ul>li{
    float:left;
    width:100%;
    text-align: center;
    font-weight:bold;
    font-style: normal;
    font-family: Georgia;
    font-size: 17px;
    position:relative;
    margin:0;
    padding:0.5%;
}

.menu>ul ul{
    display: none;
}

.menu>ul>li:hover>ul{
    width:100%;
    display:block;
    background-color: #e5e7e9;
}

.menu ul ul li{
    float:none;
    width:150px;
    margin-left:15px;
    padding-top:4px;
    font-weight:normal;
    font-style: normal;
    font-family: Georgia;
    font-size: medium;
    position:relative;
}

.sectionMenu{
    float:left;
    width:14.75%;
    height:100%;
    background-color: #dcdcbc;
    margin:0%;
    position:relative;
    z-index:400;
}

sectionMenu-grid{
    display:grid;
    grid-template-rows: 50% 50%;
    width:100%;
    height:100%;
}

.sectionMenu>ul{
    margin-left:0.1%;
    margin-top:1%;
    width:100%;
    list-style-type: none;
}

.sectionMenu>ul>li{
    margin-left:0.1%;
    margin-top:10%;
    font-family: Georgia;
    font-size:  medium;
    font-style: normal;
    font-weight: bold;
    position:relative;
    padding-left:0%;
    padding-bottom:2%;
}

.sectionMenu ul li a {
    text-decoration: none;
    color:black;
}

.sectionMenu li .active {
    background-color: transparent;
    color: chocolate;
    font-weight: bold;
}

.sectionMenu li :hover:not(.active) {
    background-color:  #dcdcbc;
    color: white;
}

.sectionMenu>ul ul{
    display: none;
}

.sectionMenu>ul>li:hover>ul{
    width:100%;
    display:block;
    background-color: #dcdcbc;
}

.sectionMenu ul ul li{
    width:90%;
    text-align:left;
    font-weight: normal;
    font-style: italic;
    font-family: Georgia;
    border: 0.5px solid brown;
    border-radius: 5px;
    box-shadow: 1px 2px darkgoldenrod;
    font-size: 18px ;
    position:relative;
    margin:1%;
    padding:1%;
}

.ui-datagrid .ui-datagrid-content{
    border:none;
    background-color: #dcdcbc;
}

.sectionMenuTable{
    background-color: #dcdcbc;
    margin-left:1%;
    width:95%;
    height:auto;
    text-align:left;
    font-weight: normal;
    font-style: italic;
    font-family: Georgia;
    font-size: 18px ;
    position:relative;
    padding:0px;
    border: none;
}

.sectionMenuTable .discover-grid{
    display:grid;
    grid-auto-rows: 40%;
    margin-top:1%;
    gap: 1%;
    width:100%;
    height:auto;
}


.sectionMenuGrid{
    background-color: #dcdcbc ;
    width:100%;
    height:auto;
    text-align:left;
    font-weight: normal;
    font-style: italic;
    font-family: Georgia;
    font-size: 18px ;
    position:relative;
    margin:0;
    padding:0px;
    border: none;
}

.sectionContent{
    float:left;
    width:70%;
    background-color:  beige;
    border-left: 0.25px solid white;
    border-right: 0.25px solid white;
    position:relative;
    z-index:350;
    font-family: Georgia;
    font-size: large;
    text-align: justify;
    overflow-y:  visible;
}

.sectionContentTable{
    background-color: beige !important;
    width:auto;
    text-align:left;
    font-weight: normal;
    font-style: normal;
    font-family: Georgia;
    font-size: 16px ;
    position:relative;
    margin:0;
    padding:5%;
    border: none;
}

.sectionContentTitle{
    align-content: center;
    font-size: xx-large;
    text-align: center;
    color: chocolate;
}

.sectionContent p{
    padding-left:60px;
    padding-right:60px;
    padding-bottom:5px;
    line-height:30px;
}

.sectionContent ul{
    margin-left:100px;
    margin-right: 60px;
    line-height:30px;
}

.sectionContent ul>li{
    list-style-type:square;
}

.sectionContent ul>li{
    list-style-type:square;
}

.sectionContent .trainingSummary{
    float:left;
    width:96%;
    height:20%;
    position:relative;
    background-color: #e2da8a;
    font-family: Georgia;
    font-size: large;
    margin-bottom:0%;
    padding:0px;
    padding-left: 2%;
    padding-right: 2%;
    border: 0.1px solid white;
}

.sectionContent .trainingDetails{
    float:left;
    width:96%;
    height:80%;
    position:relative;
    padding: 2%;
    border: 0.1px solid white;
    background-color: #f7f4c3;
    font-family: Georgia;
    font-size: medium;
    vertical-align: middle;
    align-items: center;
}

.sectionContent .trainingDetails p{
    padding:0px;
    line-height:30px;
}


.sectionIllustration{
    float:left;
    width:14.75%;
    height:100%;
    background-color: #dcdcbc;
    position:relative;
    z-index:300;
}

.sectionIllustration .sectionIllustration-grid{
    display:grid;
    grid-template-rows: 33.33% 33.33% 33.33%;
    width:100%;
    height:100%;
}

.searchResults{
    width: 80%;
    height:100%;
    margin-top:0.5%;
    font-size: medium;
    position:relative;
    padding:0px;
    margin:0px;
    float: left;
    font-family: Georgia;
    border-radius: 5%;
    background-color: #EEE8AA;
    /*color: #fff;*/
}

.searchPanelResults{
    width:100%;
    height:50%;
    padding:0%;
    margin:0%;
    margin-left: 0%;
    left:0%;
    float:left;
    position:relative;
    background-color: #EEE8AA;
    z-index:306;
    border:0px transparent;
}

.searchResultList{
    width: 100%;
    height: 70px;
    font-size: medium;
    position:relative;
    top:0%;
    margin-left:0%;
    padding:0%;
    left:0%;
    float: left;
    font-family: Georgia;
    z-index:305;
}

#attendeePanelGroupID {
    width:100%;
    height:30%;
    float:left;
    position:relative;
    border: chocolate solid 2px;
}

#attendeeIdentityPanelGroupID {
    width:50%;
    height:100%;
    float:left;
    position:relative;
}

#addressPanelGroupID {
    width:50%;
    height:100%;
    float:left;
    position:relative;
}
.outputLabel{
    width:150px;
    color:black;
    font-family: Georgia;
    font-size: medium;
    font-style: normal;
    font-weight: bold;
}

.panelClientInfos{
    margin-left: 3%;
    padding:0.5%;
    border: blueviolet solid 1px;
}

.sectionContent .panelAddressInfos{
    margin-left: 3%;
    padding:0.5%;
    border: coral solid 1px;
}

.sectionContent .panelButton{
    margin: 3%;
    padding:0.5%;
    border: cornflowerblue solid 1px;
}

.buttonStyle{
    color:black;
    font-family: Georgia;
    font-size: medium;
    font-style: normal;
    font-weight: normal;
}

.panelAttendeeInfos{
    margin-left: 3%;
    padding:0.5%;
    border: blueviolet solid 1px;
}

.columnLabel{
    width: 20%;
    position: relative;
}


.columnContent{
    width: 250px;
    position: relative;
}

.buttonStyle{
    color:black;
    font-family: Georgia;
    font-size: medium;
    font-style: normal;
    font-weight: normal;
}


@media only screen and (min-width: 200px) and (max-width: 850px)  {
    body{
        font-size:1rem ;
        width:100%;
        height:100%;
    }

    .main{
        width:100%;
        height:100%;
    }


    .main .companyOverview {
        float:left;
        width:100%;
        height:20%;
        background-color:#dcdcbc;
        position:relative;
        z-index:500;
        font-family: Georgia;
        font-size: medium;
        text-align: center;
    }


    .companyOverview .overview-grid{
        display: grid;
        grid-template-columns: 25% 25% 25% 25%;
        grid-template-rows: 33.33% 33.33% 33.33%;
        width:100%;
        height:100%;
    }

    .overview-grid .logo {

        grid-column: 1;
        grid-row:1;
        height:100%;
        margin:0px;
        float:left;
        position:relative;
    }

    .home  {
        float:left;
        grid-column:2;
        grid-row:1;
        margin:0px;
        position:relative;
    }

    .aboutUs {
        float:left;
        grid-column:3;
        grid-row:1;
        margin:0px;
        position:relative;
    }

    .contact {
        grid-column:1;
        grid-row:2;
        margin:0px;
        float:left;
        position:relative;
    }

    .compteClient {
        grid-column:3/span 2;
        grid-row:2;
        margin:0px;
        float:left;
        text-align: center;
        position:relative;
    }

    ul{
        list-style-type: none;
        margin:0px;
    }

    .compteClient ul li a{
        text-decoration: none;
        color:black;
        position: relative;
    }

    .compteClient>ul{
        height:100%;
        position:relative;
        text-align: center;
    }

    .compteClient>ul>li{
        float:left;
        text-align: left;
        position:relative;
        z-index:350;
        margin:0px;
        top:15%;
    }

    .compteClient>ul ul{
        display: none;
    }

    .compteClient>ul>li:hover>ul{
        width:100%;
        display:block;
        text-align: right;
        padding-right:0.5%;
        padding-top:0.5%;
        font-family: italic;
    }

    .compteClient  ul ul li{
        float:left;
        padding-right:0.5%;
        padding-top:0.5%;
        text-align: right;
        font-weight:normal;
        font-style: italic;
        font-size: medium;
        position:relative;
        z-index:380;
    }

    .cart{
        float:right;
        width:98%;
        height:49px;
        grid-column:4;
        grid-row:1;
        margin-left:3%;
    }

    .cartIcon{
        width:98%;
        height:98%;
    }

    #cartID p{
        position:absolute;
        text-justify: auto;
        font-family: Georgia;
        font-size: medium;
        margin:0%;
        color:red;
        padding-left:3.5%;
        margin-top:-7.2%;
    }


    .english {
        grid-column:2;
        grid-row:2;
        margin:0px;
        float:left;
        position:relative;
    }

    .home a, .aboutUs a, .contact a, .english a{
        text-decoration: none;
        top:15%;
        color:black;
        position:relative;
    }

    .search {
        grid-column:1/span 3;
        grid-row: 3;
        margin:0px;
        float:left;
        position:relative;
        z-index:370;
    }

    .searchTextButton{
        width:100%;
        height:50%;
        position:relative;
        float:left;
        display: inline-block;
    }

    .searchText {
        width:90%;
        height:70%;
        margin-top:2%;
        font-family: Georgia;
        font-size: medium;
        position:relative;
        float:left;
    }

    .searchIcon{
        position:relative;
        float:right;
        width:10%;
        height: 100%;
        margin-top:2%;
        margin-left:-10%;
        z-index: 1;
    }

    .labelText{
        float:left;
        font-family: Georgia;
        font-size: smaller;
        color:blue;
        margin:0%;
        padding:0%;
    }

    .menu{
        float:left;
        width:100%;
        height: 15%;
        background-color: #EBF8BD;
        position:relative;
        z-index:450;
    }

    .menu-grid{
        display:grid;
        grid-template-columns: 33.33% 33.33% 33.33%;
        grid-template-rows: 50% 50%;
        width:100%;
        height:100%;
    }

    .menu-item1{
        grid-column: 1;
        grid-row: 1;
        text-align: center;
    }

    .menu-item2{
        grid-column: 2;
        grid-row: 1;
        text-align: center;
    }

    .menu-item3{
        grid-column: 3;
        grid-row: 1;
        text-align: center;
    }

    .menu-item4{
        grid-column: 1;
        grid-row: 2;
        text-align: center;
    }

    .menu-item5{
        grid-column-start:2;
        grid-column-end:span 2;
        grid-row: 2;
        text-align: center;
    }

    .menu ul{
        margin:0;
        /*margin-left: 30px;*/
        width:100%;
        padding: 0;
        list-style-type: none;
    }

    .menu ul li a{
        padding-right: 1%;
    }

    .menu li a.active {
        background-color: chocolate;
        color: white;
    }

    .menu li a:hover:not(.active) {
        background-color: cornflowerblue;
        color: white;
    }

    .menu ul li a {
        text-decoration: none;
        color:black;
    }

    .menu>ul>li{
        float:left;
        width:100%;
        text-align: center;
        font-weight:bold;
        font-style: normal;
        font-family: Georgia;
        font-size: 17px;
        position:relative;
        margin:0;
        padding:0.5%;
    }

    .menu>ul ul{
        display: none;
    }

    .menu>ul>li:hover>ul{
        width:100%;
        display:block;
        background-color: #e5e7e9;
    }

    .menu ul ul li{
        float:none;
        width:150px;
        margin-left:15px;
        padding-top:4px;
        font-weight:normal;
        font-style: normal;
        font-family: Georgia;
        font-size: medium;
        position:relative;
    }

    .sectionMenu{
        float:left;
        width:100%;
        height:100%;
        background-color: #dcdcbc;
        position:relative;
        z-index:400;
    }


    sectionMenu-grid{
        display:grid;
        grid-template-columns: 100%;
        grid-template-rows: 33.33%;
        width:100%;
        height:100%;
    }

    .sectionMenu>ul{
        margin-left:0.5%;
        margin-top:1%;
        width:100%;
        list-style-type: none;
    }

    .sectionMenu>ul>li{
        margin-left:3%;
        font-family: Georgia;
        font-size:  medium;
        font-style: normal;
        font-weight: bold;
        position:relative;
        padding:2%;
    }

    .sectionMenu ul li a {
        text-decoration: none;
        color:black;
    }

    .sectionMenu li .active {
        background-color: transparent;
        color: chocolate;
        font-weight: bold;
    }

    .sectionMenu li :hover:not(.active) {
        background-color: cornflowerblue;
        color: white;
    }

    .sectionMenu>ul ul{
        display: none;
    }

    .sectionMenu>ul>li:hover>ul{
        width:100%;
        display:block;
        background-color: #e5e7e9;
    }

    .sectionMenu ul ul li{
        width:90%;
        text-align:left;
        font-weight: normal;
        font-style: italic;
        font-family: Georgia;
        border: 0.5px solid brown;
        border-radius: 5px;
        box-shadow: 1px 2px darkgoldenrod;
        font-size: 18px ;
        position:relative;
        margin:2%;
        padding:2%;
    }

    .sectionMenuTable{
        background-color: #dcdcbc;
        margin-left:1%;
        width:95%;
        height:auto;
        text-align:left;
        font-weight: normal;
        font-style: italic;
        font-family: Georgia;
        font-size: 18px ;
        position:relative;
        padding:0px;
        border: none;
    }

    .sectionMenuTable .discover-grid{
        display:grid;
        grid-auto-columns: auto;
        margin-top:1%;
        gap: 1%;
        width:auto;
        height:auto;
    }


    .sectionContent{
        float:left;
        width:100%;
        background-color:  beige;
        border-left: 0.25px solid white;
        border-right: 0.25px solid white;
        position:relative;
        z-index:350;
        font-family: Georgia;
        font-size: medium;
        text-align: justify;
        overflow-y:  visible;
    }


    .sectionContentTable{
        background-color: beige !important;
        width:auto;
        text-align:left;
        font-weight: normal;
        font-style: normal;
        font-family: Georgia;
        font-size: 16px ;
        position:relative;
        margin:0;
        padding-left:5px;
        padding:5%;
        padding-top:3%;
        border: none;
    }

    .sectionContentTitle{
        align-content: center;
        font-size: large;
        text-align: center;
        color: chocolate;
    }

    .sectionContent p{
        margin-left:0.5%;
        margin-left:0.5%;
        padding:0.5%;
        line-height:1.6;
    }

    .sectionContent ul{
        margin-left:1%;
        margin-right:1%;
        line-height:1.6;
    }

    .sectionContent .trainingDetails p{
        padding:0px;
        line-height:1.6;
    }


    .sectionIllustration{
        float:left;
        width:100%;
        height:100%;
        background-color: #dcdcbc;
        position:relative;
        z-index:300;
    }

    .sectionIllustration .sectionIllustration-grid{
        display:grid;
        grid-template-columns: 100%;
        grid-template-rows: 33.33%;
        width:100%;
        height:100%;
    }

    .searchResults{
        width: 80%;
        height:100%;
        margin-top:0.5%;
        font-size: medium;
        position:relative;
        padding:0px;
        margin:0px;
        float: left;
        font-family: Georgia;
        border-radius: 5%;
        background-color: #EEE8AA;
        /*color: #fff;*/
    }

    .searchPanelResults{
        width:100%;
        height:50%;
        padding:0%;
        margin:0%;
        margin-left: 0%;
        left:0%;
        float:left;
        position:relative;
        background-color: #EEE8AA;
        z-index:306;
        border:0px transparent;
    }

    .searchResultList{
        width: 100%;
        height: 70px;
        font-size: medium;
        position:relative;
        top:0%;
        margin-left:0%;
        padding:0%;
        left:0%;
        float: left;
        font-family: Georgia;
        z-index:305;
    }

    .columnContent{
        width: 20%;
        position: relative;
    }

    .buttonStyle{
        color:black;
        font-family: Georgia;
        font-size: medium;
        font-style: normal;
        font-weight: normal;
    }

}