/* as per https://www.w3schools.com/howto/howto_js_fullscreen_overlay.asp */
/* The Overlay (background) */
.overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */
    height: 100%;
    width: 0;
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    background-color: rgb(0,0,0); /* Black fallback color */
    background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
    color: white;
    position: relative;
    top: 25%; /* 25% from the top */
    width: 100%; /* 100% width */
    text-align: center; /* Centered text/links */
    margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

.overlay-content input[type=submit],
.overlay-content input[type=button] {
    border: none;
}   

.overlay-content table {
    margin: 0 auto;
}   

.overlay-content table tr th,
.overlay-content table tr td {
    border: none;
}

.overlay-content th {
    text-align: right;
}   

.overlay-content td {
    text-align: left;
    padding: 10px 20px;
}   

.overlay-content button,
.overlay-content input,
.overlay-content select {
    width: 200px;
}   

.overlay-content button,
.overlay-content input,
.overlay-content textarea,
.overlay-content select {
    background-color: white;
    border: 1px solid gray;
}   

.overlay-content input.error,
.overlay-content textarea.error,
.overlay-content select.error {
    background-color: #FFE0E0;
    border: 1px solid red;
}   

/* The navigation links inside the overlay */
.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px; 
    color: #818181;
    display: block; /* Display block instead of inline */
    transition: 0.3s; /* Transition effects on hover (color) */
}   

/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
}   

/* Position the close button (top right corner) */
.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}   


/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
    .overlay a {font-size: 20px}
    .overlay .closebtn {
        font-size: 40px;
        top: 15px; 
        right: 35px;
    }   
}   

html,
body {
    width: 100%;
    height: 100%;
    font-family: "Open Sans Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

body {
    color: #404040;
    font-size: 11pt;
}

h1 {
    color: #D00000;
    font-size: 140%;
}

h2 {
    color: #D00000;
    font-size: 130%;
    margin-top: 3em;
}

h3 {
    color: #D00000;
    font-size: 120%;
    margin-top: 1.5em;
}

.error {
    color: #D00000;
    font-size: 180%;
}

#navigation {
    color: #303030;
    display: block;
    margin: 2em;
    position: fixed;
    text-align: right;
    left: 0;
    top: 0;
}

#navigation ol,
#navigation ul {
    list-style-type: none;
}

#contents,
#copyright {
    margin: 2em auto;
    width: 60%;
}

#contents {
    color: #303030;
    min-height: 80%;
}

#copyright {
    text-align: right;
}

#copyright ol {
    color: #A0A0A0;
    font-size: 70%;
    list-style-type: none;
}

table input[type=submit],
table input[type=button] {
    font-size: 90%;
    margin: 0 2px 0 0;
    padding: 0 3px;
}

table input[type=submit] {
    font-size: 100%;
}

input[type=submit],
input[type=button],
span.button a {
    border-radius: 5px;
    display: table-cell;
    font-family: "Open Sans Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: bold;
    text-align: center;
    color: white;
    text-decoration: none;
    margin: 0 2px 0 0;
    padding: 2px 20px;
}

input[type=submit]:enabled,
input[type=button]:enabled {
    background-color: #FF8080;
    border: 1px solid red;
}

input[type=submit]:disabled,
input[type=button]:disabled {
    background-color: #C0C0C0;
    border: 1px solid gray;
}

.disabled {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
    opacity: 0.3;
    filter: alpha(opacity=30); /* For IE8 and earlier */
}

input[type=submit]:hover:enabled,
input[type=button]:hover:enabled,
span.button a:hover {
    background: red;
    cursor: pointer; 
}

span.button a:visited {
}

form.dropzone {
    background-color: #FFF0F0;
    border: 2px dashed red;
    border-radius: 12px;
    color: red;
}

span.group {
    font-size: 170%;
    font-weight: bold;
}

table {
    border-spacing: 0;
    font-size: 80%;
    width: 100%;
}

table th,
table td {
    padding: 5px 5px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

table thead tr,
table tfoot tr {
    font-size: 110%;
    background-color: #FFF0F0;
    color: red;
}

table thead tr:first-child th,
table thead tr:first-child td {
    border-top: 2px solid red;
}

table thead tr:last-child th,
table thead tr:last-child td {
    border-bottom: 1px solid red;
}

table tbody tr:last-child th,
table tbody tr:last-child td {
    border-bottom: 2px solid red;
}

table tbody tr th,
table tbody tr td {
    border-bottom: 1px dotted red;
}

table tfoot tr:last-child th,
table tfoot tr:last-child td {
    border-bottom: 2px solid red;
}

table tbody tr.closed,
table tbody tr.closed input[type=text] {
    background-color: #FFF0F0;
}

a {
    color: #D00000;
}

table tbody tr:hover {
    color: red;
}

table#output {
    margin: 3em 0;
}

table#output th,
table#output td {
    color: #D00000;
    padding: 0;
    margin: 0;
}

table#output thead tr th,
table#output tbody tr td,
table#output tfoot tr th {
    font-weight: normal;
    text-align: center;
    padding: 10px 0;
}

table#output thead tr th {
    font-size: 200%;
    font-weight: bold;
}

table#output a:hover {
    cursor: pointer; 
}

a, a:hover {
    color: #D00000;
    text-decoration: underline;
}

input.form-control {
    border: none;
    margin: 0;
    padding: 0;
}

span.input-group-append {
    border: 1px solid red;
    background-color: #FF8080;
    border-radius: 5px;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
}

span.gj-datepicker-bootstrap button {
    visibility: hidden;
    display: none;
}

span.input-group-append {
    width: 3em;
    height: 1.8em;
    font-size: 80%;
    margin: 0.8em 0 0 0;
    padding: 0 3px;
}

span.input-group-append:after {
    content: 'Éditer';
    display: table-cell;
    font-family: "Open Sans Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: bold;
    color: white;
    text-align: center;
    text-decoration: none;
}

button.btn-outline-secondary {
    visibility: hidden;
    display: none;
}

button.btn-outline-secondary .gj-icon {
    visibility: hidden;
    display: none;
}

form#course-selector,
form#report-selector {
    border: none;
    display: inline;
}

form#course-selector select,
form#report-selector select {
    border: none;
    color: #D00000;
}