:root {
    --background: #444;
    --main-color: #E3DCD2;
    --highlight: #fa4d23;
    --green: #0bbf6d;
    --red: #fa4d23;
    --yellow: #fab925;
}

body, div, h1, h2, h3, h4, h5, h6, ul, li, p, a, hr { margin: 0; padding: 0; }

body { font-family: 'Ubuntu', serif; background-color: var(--background); color: var(--main-color); font-size: 1.2em; }

a { text-decoration: none; color: inherit; }

ul { list-style-type: none; display: block; padding: 2px; }
ul li { display: block; overflow: auto; }
ul li a { margin: 2px; display: block; }

.center { text-align: center; }
.hidden { display: none !important; }
.float-right { float: right; }
.float-left { float: left; }
.clear { clear: both; }
.capitalize { text-transform: capitalize;}
.padded { padding: 0.6em; }
.highlight { color:  var(--highlight) !important; }
.inline { display: inline !important; }
.block { display: block !important; }
.info { font-size: 0.8em; opacity: 0.8; }
.item+.item::before {content: ', '}
[disabled] { opacity: 0.5; }

.message { padding:1em; margin: 1em 0; display: block; width: calc(100%-2em); border-radius: 5px; font-style: italic; background-color: white; color: black; }

.green, .on { background-color: var(--green) !important; }
.red, .off { background-color: var(--red) !important; }

.material-icons { font-size: 1.2em; vertical-align: -4px; }

.toggle { cursor: pointer; }
.toggle+* { display: none; }
.toggle.expanded+* { display: block; }

.input-group { display: block; margin-bottom: 1em; padding: 2px; vertical-align: bottom; }
.input-group.inline { display: inline-block; margin-right: 1em; }
.input-group > label { display: block; padding:5px 0; font-size: 0.9em; }
.input-group > input, .input-group > select, .input-group > textarea { display: block; padding: 5px; width: 97%; font-size: 1.0em; font-family: inherit; background-color: #EEE; border-radius: 5px; }
.input-group [readonly] { background-color: #CCC; }

input[type="search"] { display: block; margin: 10px 0; padding: 5px; width: 100%; font-size: 1.0em; font-family: inherit; }

.button { cursor: pointer; display: inline-block; padding: 6px; margin: 3px; border-radius: 5px;
    color: var(--yellow); background: none; border: 1px solid var(--yellow); font-size: inherit; margin-top: 1em; min-width: 300px; text-align: center; }
.button[disabled] { opacity: 0.2; }

.actions>a { font-size: 1.6em; color: var(--yellow); display: inline-block; margin: 5px; }

.add_button { color: var(--yellow); }

.listitem { margin-bottom: 1em; }

.options { display: block; }
.options .option { display: block; padding: 5px; }
.option>* { vertical-align: text-bottom; }

.badge { text-transform: capitalize; color: var(--background); background-color: var(--yellow); font-size: 0.8em; border-radius: 1em; padding: 3px 6px; display: inline-block; min-width: 1em; text-align: center;}
.badge+.badge { margin-left: 0.2em; }

.switchable { display: none; }
.switch { display: inline-block; position: relative; width: 50px; height: 28px; cursor: pointer; overflow: hidden; }
.switch input { position: absolute; top: -30px; left: -30px; width: 0; height: 0; }
.switch input + span { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: gray; border-radius: 20px; }
.switch input:checked + span { background: var(--yellow); }
.switch input + span:before { content: ""; display: inline-block; position: absolute; top: 50%; left: 2px; width: 24px; height: 24px; background: white; border-radius: 50%; transform: translateY(-50%); transition: all .5s; }
.switch input:checked + span:before { left: 24px; }
.switch input:disabled + span { opacity: 0.2; cursor:no-drop;}

.off_null_on { display: inline-block; position: relative; width: 50px; height: 28px; overflow: hidden; background-color: gray; border-radius: 20px; vertical-align: -10px; margin-bottom: 3px; }
.off_null_on>span { position: absolute; z-index: 0; top: 2px; left: 14px; background: white; border-radius: 20px; width: 24px; height: 24px; }
.off_null_on.on>span { right: 2px; left: auto; }
.off_null_on.off>span { left: 2px; right: auto; }

.discipline {display: inline-block; width: 2em; height: 24px; background-color: var(--yellow); color: black; text-align: center; border-radius: 5px; padding: 3px; margin: 0 4px 4px 0; }
.inscription { display: inline-block; height: 24px; background-color: gray; color: black; padding: 3px 8px; border-radius: 5px; margin: 0 5px 5px 0; }
.inscription > i { font-size: 0.8em; }

#header { position: absolute; left: 0; right: 0; top: 0; padding: 0 0.5em; z-index: 1000; margin-bottom: 0.5em; padding-bottom: 0.5em; border-bottom: 1px solid var(--yellow); }
#content { position: absolute; left: 0; right: 0; padding: 0.5em; overflow: scroll; }
#footer { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.5em; }

#banner { font-size: 1.2em; color: var(--background); background-color: var(--yellow); height: 2.0em; overflow: visible; margin: 0 -0.5em 0.5em -0.5em; }

#banner #home { display: block; font-size: 1.5em; text-align: center; }
#banner .menu { position: fixed; z-index: 1000; top: 0; cursor: pointer; }
#banner .menu#my { left: 0; }
#banner .menu#admin { right: 0; }
#banner .menu .toggle_menu { font-size: 1.6em; display: block; }
#banner .menu ul { color: var(--background); background-color: var(--yellow); display: none; font-size: 1em; }
#banner .menu#admin .toggle_menu { text-align: right; }
#banner .menu:hover ul{ display: block; }
#banner .menu ul li { display: block; }
#banner .menu ul li a { display: block; padding: 2px; }
#banner .menu#admin ul li a { text-align: right;}
#banner .menu ul li a:hover { text-decoration: underline; }

h1 { font-size: 1.4em; }

line { display: inline-block; margin-right: 1em; }
line.main { font-size: 1.1em; color: var(--yellow); }

.hidden_sm { display: contents; }
.display_sm { display: none; }

@media screen and (max-width: 600px) {
    .hidden_sm { display: none; }
    .display_sm { display: inline-block; }

    line { display: block; margin-right: 0em; }
    #banner #menu ul { }
    #banner #menu:hover ul{ display: block; }
    #banner #menu ul li { display: block; }

    .button { display: block; width: auto; }
    button.button { width: 100%; }
}