html, body { 
    height: 100%;
}

.CodeMirror{
    border-style: solid;
    border-width: 1px;
    height: 10em !important; /* FOR BROWSERS LIKE SAFARI WHICH DO NOT KNOW vh AND vw */
    height: 20vh !important;
    
}

/* TO HAVE THE SCROLL BAR AT THE TOP OF THE TABLE CONTAINING THE ANSWERS */
.Container
{
    overflow-y: auto;
}
.Content
{
    overflow-y: auto;
}

.Flipped, .Flipped .Content
{
    transform:rotateX(180deg);
    -ms-transform:rotateX(180deg); /* IE 9 */
    -webkit-transform:rotateX(180deg); /* Safari and Chrome */
}


header{
    /*    background: url("https://dsi.wp.telecom-sudparis.eu/wp-content/themes/TSP-dpt/images/fd_haut.png") no-repeat top center;  */
    background: url("img/background-top.png") no-repeat top center;  
    position: relative;
    top:0;
    /* height: 184px; */
    height: 109px;
    width: 100%;
    z-index: 400;
}

header #logoTSP{
    margin-right: 50vw;
    
}

header #logoTSP A {
    position: absolute;
    /*  left: 8%; 
    left: 5vw;
   
    top: 11%;
    top: 2vh; */
    left: 52px;
    top: 13px;

    width: 86px;
    height: 86px;
    
    /*background: url("https://dsi.wp.telecom-sudparis.eu/wp-content/themes/TSP-dpt/images/logos/logo_TSP_86.png")  center no-repeat #ffffff;*/
    background: url("img/logo_TSP_86.png")  center no-repeat #ffffff;
}

header #logoTSP span {
    display: none;
}

body{
    cursor: default;
    /*margin: 0px; */
    margin-left: 1%;
    margin-right: 1%;
    margin-top: 0px;
    margin-bottom: 0px;
    color: #000000;
    /* min-height: 100%; */
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    padding: 0px;
    background: #FFFFFF url("img/fd_body_haut.png") repeat-x top;
    overflow-x: hidden;
}


* {-moz-box-sizing: border-box; box-sizing: border-box;}

#res{
    min-height: 10em;
    min-height: 30vh;
    
}

#answers{
    height: 35%;
    margin: 4%;
    
}

/* NAVBAR TO NAVIGATE BETWEEN ANSWERS */

ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}

ul.pagination li {display: inline;
                  cursor: pointer;
                  color: black;
                  float: left;
                  padding: 8px 16px;
                  text-decoration: none;
                  transition: background-color .3s;
                  border: 1px solid #ddd;
                 }

ul.pagination li.active {
    background-color: rgb(39,73,145);
    color: white;
    border: 1px solid rgb(39,73,145);
}

ul.pagination li:hover:not(.active) {background-color: #ddd;}

#nav {text-align: center;}

/* DISPLAY LANGUES */
#langues {
    position: absolute;
    top: 1vh;
    right: 3.2em;
    margin-bottom: 0px;
    /*    width: 64px; */
    
}   
#langues SPAN {
    display: none;
}
#langues A {
    display: inline-block;
    width: 2em;
    height: 1em;
    background-position: center center;
    background-repeat: no-repeat;
}

#langues A.fr {
    background-image: url("img/fr.png");
}
#langues A.en {
    background-image: url("img/en.png");
}
#langues UL LI {
    float: left;
    
    padding: 0px;
    padding-top: 4px;
    
    height: 15px;
    text-align: center;
    list-style: none;
}

langues UL {
    margin: 0px;
    padding: 0px;
    height: 15px;
    display: inline;
    list-style: none;
}

.table{
    
}

#executeRequest{
    overflow-x: auto;
    overflow-y: auto;
    height: 10%;
}

#result{
    height: 70%;
}

#center{
    overflow: hidden; 
    float: right;
    width: 48%;
    /*    height: 70%; */
    
    margin-right: 0.7%;
    margin-left: 1%;
}

#memo{
    float: right;
    overflow: auto;    
}

#info{
    position: absolute;
    overflow: hidden;
}

#info-container{
    width: 100%;
    height: 100%;
}

#info-container, #memo-container{
    overflow-x: auto;
    overflow-y: auto;
    position: absolute;
}

#info {
    width: 25%;
    height: 68%;
}

#memo, #memo-container {
    width: 25%;
/*    height: 68%;*/
}

#container {
    /* min-height: 100vh; */     
}

#titre{
    position: absolute;
    color: #ffffff;
    
    top: 20px;
    
    left: 180px;
}

h1{
    white-space: nowrap;
    font-size: 2em;
    font-weight: bold;
    text-shadow: 2px 2px 0px #000000;
/*
    	font-weight: bold;
	font-size: 30px;
        text-align: center;  */
/*  display: inline-block; 
    margin-left: 43%; */

    
}


h2{
    /*	display: block; */
    
    border: 1px solid #db7904;
    min-height: 22px;
    line-height: 22px;
    font-weight: bold;
    font-size: 14px;
    background: #FFA500; 
    
    color: #ffffff;
    padding: 3px;
    /*	margin-bottom: 5px; */
    text-transform: uppercase;
    /*	clear: both; */
}
h3{
    font-size: 1.5em;
    font-weight: bold;
    /*	margin-bottom: 10px;*/
    color: #0d3082;
    clear: both;
/*	margin-top: 10px;
	margin-bottom: 10px; */
}
h3 a{
    /*color: #0d3082;*/
    color: #000000;
}
p{
    margin-top: 6px;
    margin-bottom: 12px;
}
h4{
    font-size:15px;
    font-weight:bold;
    margin: 0px;
    padding: 0px;
    margin-top: 10px;
    margin-bottom: 10px;
    color:#0d3082;
    color:#000000;
    /*	clear: both;*/
}
h5{
    font-size:14px;
    font-weight:bold;
    margin: 0px;
    padding: 0px;
    margin-top: 10px;
    margin-bottom: 10px;
    color:#0d3082;
    /*	clear: both;*/
}
h6{
    font-size:13px;
    font-weight:bold;
    margin: 0px;
    padding: 0px;
    margin-top: 10px;
    margin-bottom: 10px;
    color:#0d3082;
    color:#000000;
    /*	clear: both;*/
}



ACRONYM {
    border-bottom: 1px dotted #CCCCCC;
    cursor: help;
}
ABBR{
    border-bottom: 1px dashed #CCCCCC;
    cursor: help;
}
.clear{
    clear: both;
}
ol, ul{
    margin-left: 30px;
    margin-bottom: 12px;
}

li{
    color:#333333;
    margin-top: 3px;
    list-style-position: inside;
}
li ol,
li ul{
    margin-bottom: 0px;
}

INPUT, SELECT, TEXTAREA{
    /*	border: 1px solid; */
    font-family: inherit !important;
    font-weight: 100 !important;
}



.obligatoire{
    color: #FF0033;
    font-style:italic;
}

#initDBnmav{
    text-align: center;
}

#schemaDB{
    
}

/* PersonnalDBNav */
.image-upload > input
{
    display: none;
}


#personalDBnav{
    right: 1em;
    top: 60px;
    position: absolute;
    
}

.btn{
    
    float:left;
    padding:0;
    
    
}


#personalDBnav img{
    border:0; 
    text-decoration:none;
    cursor: pointer;
    
    height: 2.5em;
    width: 2.5em;
    
}
#loader{
    background : url('img/ajax-loader.gif') 50% 50% no-repeat rgba(255, 255, 255, 0.8);
    cursor: wait;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;   
}

.signature{
    font-style: italic;
    text-align: right;
}



TABLE{
    text-align: left;
    margin: 2px;
    margin-left: auto;
    margin-right: auto;
    border-collapse: collapse;
    border: 1px solid #0d3082;
    border: 1px solid #7e7e7e;
}


TH{
    border: 1px solid #0d3082;
    border: 1px solid #7e7e7e;
    padding: 2px;
    padding-left: 4px;
    padding-right: 4px;
    text-align: center;
}

THEAD TH{
    /*	background-color: #0d3082;
	color:#FFFFFF; */
    text-align: center;
}

TBODY TH{
    color: #0d3082;
    text-align: right;
}



TD{
    border: 1px solid #0d3082;
    border: 1px solid #7e7e7e;
    padding: 2px;
}
TD P{
    margin-bottom: 0px;
}
CAPTION{
    font-style: italic;
    caption-side:top;
    color: #0d3082;
}

/* page des actus */
.actu h3{
    margin-top: 2px !important;
    margin-bottom: 3px !important;
    color: #0d3082;
    font-size: 13px;
    font-weight: bold;
}
.actu{
    clear: both;
    position: relative;
    border-top: 1px solid #667ba9;
    margin-top: 10px;
}
.entry-readmore{
    position: relative;
    height: 20px;
    clear: left;
}
.entry-readmore a{
    border: 1px solid #ee8d17;
    background:url(../images/fd_titre_orange.png) repeat-x center #ee8d17;
    display: block;
    position: absolute;
    right: 0px;
    width: 70px;
    height: 18px;
    line-height: 18px;
    padding-right: 5px;
    vertical-align:middle;
    color: #FFFFFF;
    text-decoration:none;
    text-transform:uppercase;
    font-size: 13px;
    text-align: right;
    font-weight:bold;
}
.entry-categories{
}
.entry-summary, .entry-content{
    text-align: justify;
}
.entry-content{
    clear: both;
}
.entry-thumbnail{
    display: inline-block;
    margin-top: 6px;
    margin-right: 12px;
    float: left;
}
.entry-thumbnail IMG{
    padding: 0px;
    margin: 0px;
    box-shadow: 2px 2px 2px #000000;
}
.alignleft{
    margin-right: 6px;
    margin-bottom: 6px;
    float: left;
}
.alignright{
    margin-left: 6px;
    margin-bottom: 6px;
    float: right;
}
.aligncenter{
    margin-left :auto;
    margin-right :auto;
    text-align: center;
}
.post-date{
    text-align: right;
    font-size: 11px;
    font-style: italic;
}
.navigation{
}
#nav-above{
}
#nav-below{
    clear: both;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #667ba9;
}
.post-previous,
.nav-previous{
    float: left;
    width: 50%;
    text-align: left;
    margin-bottom: 12px;
}
.post-next,
.nav-next{
    float: left;
    width: 50%;
    text-align: right;
    margin-bottom: 12px;
}
.post-categories{
    margin-top: 10px;
    clear: both;
}
.post-categories SPAN{
    display: none;
}
.post-categories A{
    display: block;
    width: 30px;
    height: 30px;
    float: left;
    margin-right: 10px;
    background: #FFFFCC;
}
.entry-date{
    font-size: 11px;
    font-style: italic;
}



/* FOOTER */

footer{
    bottom: 0;
    text-align: center;
    clear: both; 
    
    background: url("https://dsi.wp.telecom-sudparis.eu/wp-content/themes/TSP-dpt/images/fd_body_bas.png") repeat-x bottom; 
    position: relative;
    /* bottom: 0;
    margin: 0;
 left: 0; */
    height: 50px;
}


#copyright a {
    color: #000000;
    text-decoration: none;
}

#copyright {
    
}

#DBorigin {
    
}


// TO HIGHLIGHT KEYWORDS
.keyword{
    color: red;
    text-transform: uppercase;
}



@media only screen and (max-width:600px) {
    
    #executeRequest{
        overflow-x: auto;
        overflow-y: auto;
        height: 10%;
    }


    #result{
        height: 70%;
    }
    #center{
        clear: both;
        display: block;
        width: 100%;
        position: static;
    }

    #memo{
        
        clear: both;
        display: block;
        width: 100%;
        position: static;
    }
    #info{
        clear: both;
        display: block;
        width: 100%;
        position: static;
    }

    
    #info-container, #memo-container{

        position: static;
        width: 100%   
    }
    #memo, #info, #memo-container {
        
        height: 100%;
        
        
    }



    #titre{
        position: absolute;
        color: #ffffff;
        top: 1px;
        left:90px;  
        
        display: block;  
    }



    h1{
        
        font-size: 2em;
        font-weight: bold;
        text-shadow: 2px 2px 0px #000000;


        
    }
    

    footer{
        
        background: url("https://dsi.wp.telecom-sudparis.eu/wp-content/themes/TSP-dpt/images/fd_body_bas.png") repeat-x bottom; 
        position: static;
/* bottom: 0;
    margin: 0;
 left: 0; */
    }
    
    
    header{
        /*    background: url("https://dsi.wp.telecom-sudparis.eu/wp-content/themes/TSP-dpt/images/fd_haut.png") no-repeat top center;  */
        background: url("img/background-top.png") no-repeat top center;  
        position: static;
        top:0;
        /* height: 184px; */
        height: 109px;
        width: 100%;
        z-index: 400;
    }

    header #logoTSP{
        display: block;
    }

    header #logoTSP A {
        position: absolute;
        /*  left: 8%; 
    left: 5vw;
   
    top: 11%;
    top: 2vh; */
        left: 5%;
        top: 4%;

        width: 55px;
        height: 55px;
        
        background: url("img/logo_TSP_min.png")  center no-repeat #ffffff;
    }

    header #logoTSP span {
        display: none;
    }
    
    /* DISPLAY LANGUES */
    #langues {
        position: absolute;
        top: 4%;
        right: 3.2em;
        margin-bottom: 0px;
        /*    width: 64px; */
        
    }   
    #langues SPAN {
        display: none;
    }
    #langues A {
        
        width: 2em;
        height: 1em;
        background-position: center center;
        background-repeat: no-repeat;
    }

    #langues A.fr {
        background-image: url("img/fr.png");
    }
    #langues A.en {
        background-image: url("img/en.png");
    }
    #langues UL LI {
        
        
        padding: 0px;
        padding-top: 4px;
        
        height: 15px;
        text-align: center;
        list-style: none;
    }

    langues UL {
        margin: 0px;
        padding: 0px;
        height: 15px;
        display: inline;
        list-style: none;
    }

}

@media only screen and (max-width:300px) {
    
    #executeRequest{
        overflow-x: auto;
        overflow-y: auto;
        height: 10%;
    }


    #result{
        height: 70%;
    }
    #center{

        clear: both;
        display: block;
        width: 100%;
        position: static;
        overflow: auto;
    }

    #memo{
        
        clear: both;
        display: block;
        width: 100%;
        position: static;
    }
    #info{
        clear: both;
        display: block;
        width: 100%;
        position: static;
    }

    
    #info-container, #memo-container{

        position: static;
        width: 100%   
    }
    #memo, #info, #memo-container {
        
        height: 100%;
        
        
    }



    #titre{
        position: absolute;
        color: #ffffff;
        top: 4%;
        left:4%;  
        margin: auto;
        display: block;  
    }



    h1{
        
        font-size: 1.2em;
        font-weight: bold;
        text-shadow: 1px 1px 1px #000000;


        
    }
    

    footer{
        
        background: url("https://dsi.wp.telecom-sudparis.eu/wp-content/themes/TSP-dpt/images/fd_body_bas.png") repeat-x bottom; 
        position: static;
/* bottom: 0;
    margin: 0;
 left: 0; */
    }
    
    
    header{
        /*    background: url("https://dsi.wp.telecom-sudparis.eu/wp-content/themes/TSP-dpt/images/fd_haut.png") no-repeat top center;  */
        background: url("img/background-top.png") no-repeat top center;  
        position: static;
        top:0;
        /* height: 184px; */
        height: 109px;
        width: 100%;
        z-index: 400;
    }

    header #logoTSP{
        display: block;
    }

    header #logoTSP A {
        position: absolute;
        /*  left: 8%; 
    left: 5vw;
   
    top: 11%;
    top: 2vh; */
        left: 5%;
        top: 1%;

        width: 20px;
        height: 20px;
        
        background: url("img/logo_TSP_mini.png")  center no-repeat #ffffff;
    }

    header #logoTSP span {
        display: none;
    }
    
    /* DISPLAY LANGUES */
    #langues  ul{
        margin: 0;
    }
    #langues {
        position: absolute;
        top: 0;
        left: 0;
        margin-bottom: 0px;
        /*    width: 64px; */
        
    }   
    #langues SPAN {
        display: none;
    }
    #langues A {
        display: inline-block;
        width: 1.5em;
        height: 1em;
        background-position: center center;
        background-repeat: no-repeat;
    }

    #langues A.fr {
        background-image: url("img/fr.png");
    }
    #langues A.en {
        background-image: url("img/en.png");
    }
    #langues UL LI {
        float: left;
        
        padding: 0px;
        padding-top: 4px;
        
        height: 15px;
        text-align: center;
        list-style: none;
    }

    langues UL {
        margin: 0px;
        padding: 0px;
        height: 15px;
        display: inline;
        list-style: none;
    }
    
    
    /* NAVBAR TO NAVIGATE BETWEEN ANSWERS */

    ul.pagination {
        display: inline-block;
        padding: 0;
        margin: 0;
    }

    ul.pagination li {display: inline;
                      cursor: pointer;
                      color: black;
                      float: left;
                      padding: 2px 4px;
                      text-decoration: none;
                      transition: background-color .3s;
                      border: 1px solid #ddd;
                     }

    ul.pagination li.active {
        background-color: rgb(39,73,145);
        color: white;
        border: 1px solid rgb(39,73,145);
    }

    ul.pagination li:hover:not(.active) {background-color: #ddd;}

    #nav {text-align: center;}

}



/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 5; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
#personalDBnav .modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
#personalDBnav .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

#personalDBnav .close:hover,
#personalDBnav .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
#personalDBnav .modal-header {
    padding: 2px 1em;
    background-color: #0d3082;
    color: white;
}

/* Modal Body */
#personalDBnav .modal-body {padding: 2px 16px;}
#listOfDB{
}

/* Modal Footer */
#personalDBnav .modal-footer {
    padding: 2px 1em;  
    height: 50px;
    background-color: #0d3082;
    color: white;
}

.increase {
    width:2em;
    height:2em;
}

.increase_min{
    width: 1.3em;
    height: 1.3em;    
}

.modalButton{
    float: right;
    margin-top: -10;
    top: 0; 
}


#DBorigin a{
    color: #000000;
    text-decoration: none;
}