/* 
 * 
 * David Sanchez
 * Newcastle University. 2017
 * 
 * Generic styles used in the visualiser regarding of colour Deficiency capabilities 
 *
 * Note:
 *
 * # used to select an element by ID
 * . used to select elements by class
 *
 */

html,body{
    padding:00px;
    margin:00px;
    width:100%;
    height:100%;
}

.svg-content-responsive {
    display: inline-block;
    position: absolute;
    top: 10px;
    left: 0;
}

fieldset { 
    display: block;
    margin-left: 2px;
    margin-right: 2px;
    padding-top: 0.35em;
    padding-bottom: 0.625em;
    padding-left: 0.75em;
    padding-right: 0.75em;
    border: 0px groove;
}

#header{
    text-align: center ;
    margin-top: 0;
}

legend{
    padding: 0.2em 0.5em;
    font-size:90%;
}

#panelMain{    
    display: flex ;
    align-items: stretch ;
    flex-flow: row wrap ;
    width: 100%; 
}

#panelLeft{    
    order:1;
    flex-grow: 1;
    float: left;
    width: 100px;
    padding: 2px;
    /*font-family: sans-serif;*/

    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

}

#panelRight{
    flex-direction:column;
    order:2;
    flex-grow: 1;
    float:right;
    width: 300px;
    padding: 2px;
    /*font-family: sans-serif;*/ 

    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

    margin-top: 8px; 
    margin-right:15px; 
    margin-bottom: 8px; 
    margin-left: 8px; 
}

#panelPolicy{
    display: block;
    overflow-y:scroll; 
    overflow-x:hidden;
    /*font-family: sans-serif;*/

    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;


    resize: vertical;
    overflow: auto;

    width:100%;
    height:100%;

    padding-top: 8px; 
    padding-right:8px; 
    padding-bottom: 8px; 
    padding-left: 8px; 
    background: oldlace;
    box-shadow: 2px 2px 10px 0px #000000;
}

#panelPolicyDetails{
    display:flex;
    flex-direction:column;
    /*font-family: sans-serif;*/

    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

    overflow-y:scroll; 
    overflow-x:hidden;
    resize: vertical;
    overflow: auto;

    width:100%;
    height:100%;

    padding-top: 8px; 
    padding-right:8px; 
    padding-bottom: 8px; 
    padding-left: 8px; 
    background: oldlace;
    box-shadow: 2px 2px 10px 0px #000000;
}

#panelConsole{
    color:white;
    display: block;
    overflow-y:scroll; 
    overflow-x:hidden;
    font-family: courier;
    resize: vertical;
    overflow: auto;

    width:100%;
    height:100%;

    /*padding-top: 8px;*/ 
    padding-right:8px; 
    /*padding-bottom: 8px;*/ 
    padding-left: 8px; 
    background: black;
    box-shadow: 2px 2px 10px 0px #000000;
}

#panelControlsLeft{
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin-left: 20px;
    float:left;

    /*border: 1px solid lightgrey;*/
}

#panelControlsRight{
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin-right: 8px;
    float:right;

    /*border: 1px solid lightgrey;*/
}


#panelExtraControls{
    margin-top: 0.5cm;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin-right: 0px;
    float:right;
}

#container {
    display: inline-block;
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* aspect ratio */
    vertical-align: middle;
    overflow: hidden;
}

.evalButton{
    font-weight: bold;
    text-align: center; 
}

.button{
    text-align: center; 
}

.child div:nth-of-type(2n+1){
    background-color:#ccc;

}

.child div:nth-of-type(2n){
    background-color:#eee;
}

.radioElement,
.checkboxElement{
    float:left;
    text-align:left; 

    vertical-align:middle;
    margin:5px;
}

.radioLabel{
    float:left;
    vertical-align:middle;
    margin:0px;    
    width: 12%;
    text-align:left; 
}

.radioAttribute{
    vertical-align:middle;
    height: 30px;
    /*border: 1px solid red;*/

    /*For illustrations only 40. For tests 52*/
    /*width: 40%;*/
    width: 52%;

    text-align: left;
    float:left;
}

.radioBlock{
    vertical-align:middle;
    height: 30px;
    border: 1px solid red;
    width: 100px;
    text-align: left;
    background-color: blue;
    float:right;
}

img{
    margin-top: 0.5cm;
    opacity:1;
    padding-left: 10px;
}

.panelPolicy {
    display: block;
    overflow-y:scroll; 
    overflow-x:hidden;

    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;

    resize: vertical;
    overflow: auto;

    width:100%;
    height:100%;

    padding-top: 8px; 
    padding-right:8px; 
    padding-bottom: 8px; 
    padding-left: 8px; 
    background: oldlace;
    box-shadow: 2px 2px 10px 0px #000000;
    border: none;

}

.radioInput{

    float:left;
    font-size: 16px;
    vertical-align:top;

    /*For illustrations only 40. For tests 52*/
    width: 40%;

    text-align: left;
    background:transparent;
    border:none;
}