/****** GLOBAL LAYOUT *********/
body {
    padding:0;
    margin:0;
    font-family: sans-serif;
}

#why3-main-container {
    /* Fills the whole window */
    display: flex; /* tells the children with flex:i
                      to fill-up the remaining space.
                      non flex children will be sized
                      according to content;
                  */
    flex-direction:column;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}
.why3-widget, .why3-container {
    /* Make the test non selectable */
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* IE/Edge */
  user-select: none;           /* non-prefixed version, currently
                                  not supported by any browser */
  cursor:default;
}

#why3-top-button-bar {
    width:100%;
}

.why3-hidden {
    z-index:-10;
    position:absolute;
    top:0;
    left:0;
    height:0;
    width:0;
}
/**** BUTTON BAR *****/
/* GENERIC PART */

.why3-button-bar {
    box-sizing:border-box;
    padding:0;
    margin:0;
}

.why3-button-bar > .why3-button-group {
    position:relative;
    margin:0;
    box-sizing:border-box;
    display:inline-block;
    vertical-align:top;
    padding:0;
}

.why3-button-bar .why3-separator {
    display:inline-block;
}
.why3-flushright {
    position:relative;
    float:right;
}

/* SPECIFIC PART */
#why3-select-example {
    width:20em;
}
#why3-top-button-bar {
    height:2em;
    font-size:14pt;
    line-height:1.8em;
}
#why3-top-button-bar .why3-button {
    font-size:14pt;
    width:1.8em;
    display:inline-block;
    height:1.6em;
}

/**** END BUTTON BAR ****/

/**** Main view ****/

#why3-main-panel {
    flex:1;
    width:100%;
    padding:0;
    margin:0;
    /*  align-items:stretch; */  /* ? */
    /* elements in that panel are inserted from left to right */
    display:flex;
    flex-direction:row;
}

/*
#why3-main-panel > * {
    flex-grow: 1;
    width:auto;
    height:auto;
}
*/

#why3-resize-bar {
    flex-basis:10px;
    flex-grow:0; /* not flex:0, because bar will become totally invisible */

}

/* visual changes when mouse cursor is over the vertical resize bar */
#why3-resize-bar:hover {
    cursor: ew-resize;  /* mouse cursor becomes like 'leftrightarrow' */
    opacity:0.5;        /* bar becomes darker */
    border-style:solid;    /* ? */
    border-width: 2pt;     /* ? */
    box-sizing:border-box; /* ? */
}

/*** LEFT PART: task list ***/

#why3-task-list-container {
    overflow:visible; /* add a scrollbar if too high to fit in the window */
    flex:1; /* proportion of horizontal space taken in the main panel */
    /* position:relative; /* ? */
    margin:0; /* ? */
    padding:0; /* ? */ */
}

#why3-task-list {
    overflow:visible; /* add a scrollbar if too high to fit in the window */
    width:100%;
    height:100%;
}

/*** RIGHT PART: panel with item added vertically ***/

#why3-right-panel {
    flex: 2;
    width:100%;
    padding:0;
    margin:0;
    /*  align-items:stretch; */  /* ? */
    /* elements in that panel are inserted from top to bottom */
    display:flex;
    flex-direction:column;
}



#why3-tab-container {
    flex:1;
    position:relative;
    margin:0;
    padding:0;
}

#why3-resize-bar2 {
    flex-basis:10px;
    flex-grow:0; /* not flex:0 because bar would become totally invisible */

}

#why3-form-cont {
    flex-grow:0;
    position:relative;
    margin:0;
    padding:0;
    width:100%;
}


#why3-tab-container2 {
    flex:1;
    position:relative;
    margin:0;
    padding:0;
}


/* visual changes when mouse cursor is over the horizaontal resize bar */
#why3-resize-bar2:hover {
    cursor: ns-resize;   /* mouse cursor becomes like 'updownarrow' */
    opacity:0.5;         /* becomes darker */
    border-style:solid;
    border-width: 2pt;
    box-sizing:border-box;
}


#why3-task-viewer-container {
    flex:1;
    position:relative;
    margin:0;
    padding:0;
}

#why3-editor {
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    padding:0;
    margin:0;
}

/*** TABS ***/

#why3-tab-panel {
    top:0;
    bottom:0;
    left:0;
    right:0;
    padding:0;
    margin:0;
}

.why3-tab-label {
    display:inline-block;
    position:relative;
    top:1pt;
    border-radius: 3pt 3pt 0 0;
    border-width: 1pt 1pt 0 1pt;
    border-style: solid;
    height:2em;
    box-sizing:border-box;
    line-height:2em;
    margin: 0.5em 0.5em 0 0.5em;
    padding: 0 0.5em;
    z-index:2;
}

.why3-tab {
    position:absolute;
    top:2.5em;
    bottom:1pt;
    left:0;
    right:0;
    margin:0;
    padding:0;
    z-index: 1;
    padding-top:0.5em;
    box-sizing:border-box;
    border-top-style:solid;
    border-top-width:1pt;
}
.why3-tab-label.why3-inactive,
.why3-tab-label.why3-inactive + .why3-tab {
    z-index:0;
}

#why3-task-viewer {
    width:100%;
    height:100%;
}
#why3-editor {
    overflow:visible;
    width:100%;
    height:100%;
}
#why3-error-container {
    overflow:visible;
    width:100%;
    height:100%;
}
#why3-log-container {
    overflow:visible;
/*    width:100%; */
/*    height:100%; */
}

/******* CONTEXT MENU *********/
.why3-contextmenu {
    display:none;
    position:absolute;
    border-style:solid;
    border-width:1pt;
    box-shadow:0pt 0pt 5pt #333;
}

.why3-contextmenu {
    z-index:100;
}
.why3-contextmenu ul {
    list-style-type:none;
    padding:0;
    margin:0;
}
.why3-contextmenu li {
    padding: 0.5em 1em 0.5em 1em;
}

/******* DIALOGS ****/
#why3-dialog-panel {
    position:absolute;
    z-index:100;
    display:none;
    top:0;
    left:0;
    right:0;
    bottom:0;
    justify-content:center;
    align-items:center;
}
#why3-dialog-bg {
    position:absolute;
    opacity:0.75;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:101;
}
.why3-dialog {
    z-index:102;
    flex:0;
    box-shadow:0pt 0pt 5pt #333;
    padding: 1em;
}

#why3-dialog-panel .why3-dialog div.why3-widget {
    display:none;
}

#why3-setting-dialog ul {
    list-style-type:none;
}
#why3-setting-dialog li {
    padding:0.5em;
}
/********** THEMABLE PART, SEE trywhy3_custom.css *************/


#why3-editor {
    font-size:large;
}

/*
#why3-task-viewer {
    font-size:large;
}
*/
#why3-task-list ul {
    list-style-type:none;
    padding-left:1em;
    padding-top:0em;
}
#why3-task-list li {
    padding-left:0em;
    padding-top:0em;
}
/* tasks icons */
.why3-task-pending {
    color: blue;
}
.why3-task-valid {
    color:green;
}
.why3-task-unknown {
    color:orange;
}
.why3-task-selected {
    background:rgba(250,220,90,0.7);
}

/* ACE Editor */

.ace_gutter-cell.ace_error {
    background-image:none !important;
}
.ace_gutter-cell.ace_error:before {
    content:"\f057";
    font-family: 'FontAwesome', sans-serif;
    position:absolute;
    left:0.1em;
    color:rgba(231,113,116,1);
}
.ace_gutter-cell.ace_warning {
    background-image:none !important;
}
.ace_gutter-cell.ace_warning:before {
    content:"\f06a";
    font-family: 'FontAwesome', sans-serif;
    position:absolute;
    left:0.1em;
    color:rgba(233,150,122,1);
}

.why3-error {
    position:absolute;
    background:rgba(231,113,116,1);
    z-index:70;
}
.why3-msg {
}

.why3-loc-neg-premise {
    position:absolute;
    background:rgba(255,128,64,1);
    z-index:60;
}

.why3-loc-goal {
    position:absolute;
    background:rgba(64,191,255,1);
    z-index:50;
}
.why3-loc-premise {
    position:absolute;
    background:rgba(100,233,134,1);
    z-index:40;
}

.why3-widget {
    background: #eee;
    color: #666;
    border-color: #888;
}
.why3-widget.why3-inactive {
    background:#eee;
    border-color:#eee;
    color:#aaa;
}

.why3-button {
    background-image: linear-gradient(to bottom, #eee, #ccc);
    border-radius:3pt;
    border: solid 1pt #aaa;
}

.why3-button,
.why3-icon  {
    color:#333;
}
.why3-button.why3-inactive,
.why3-inactive .why3-icon  {
    color:#aaa;
}



.why3-contextmenu li:hover,
.why3-contextmenu li:hover .why3-icon
{
    color: #eee;
    background: #222;
}
