:root {
  --lighter-green: #adcba5;
  --light-green: #a0ca97;
  --transparent-white: #FFF3;
  --main-background: #83d989;
}


html { width: 100%; height: 100%; margin: 0; scrollbar-color: green #adcba5 ; scrollbar-width: thin; }
body {
    width:60%;
    min-width:900px;
    margin: auto;

    font-family: sans;
    background-color: #83d989;
    background-image: url("/static/imgs/background-carto.png");
}

a { text-decoration: none; cursor:pointer; }
a:hover { text-decoration: underline; }
a, a:visited { color: #0051CE; }

#nav a { font-weight: bold; color: white;}

.left { text-align: left; padding-left: 0.5em; }
.right { text-align: right; padding-right: 0.5em; }

p { padding-left: 0.5rem; }

.hidden { display: none!important; }

table {margin:auto;text-align:center;}
tr:hover { background-color: #FFF1; }
td { padding: 0 1.5em; }
td.numeric { text-align:right; }

tr .show-on-hover { visibility: hidden; }
tr:hover .show-on-hover { visibility: visible; }

th { padding: 0.5em 0.1em; background-color: var(--transparent-white); }

#nav { background-color: #0003; padding: 0.5em; text-align: right; color: white; }
#nav a { margin-left: 0.3em; }
#nav img { height: 1em; vertical-align: bottom; padding: 0.1em; }
#errors { margin-top: 1em; background-color: #F003; padding: 0.5em; border: 1px solid #F003; }

#messages { margin-top: 1em; }
.message { display: flex; flex-direction: row; background-color: #55F6; }
.message-text { flex-grow: 1; padding: 0.5em; }
.message-close-button { padding: 0.5em; color: #0008; }
.message-close-button:hover { cursor: pointer; background-color: #FFF5; }

input[type=text]:read-only, input[type=number]:read-only { color: #999; user-select: none; pointer-events: none; }

.emph { font-style: italic; }

.editable_form { display: none; }

.active_row { font-style: italic; background-color: #FFF7; }

.form_span { display: inline-block; margin-right: 0.5em; }

input[type="time"] { padding: 0.45em; }
select { padding: 0.2em; }

label {
  display: block;
  font-size: 0.8em;
  margin-top: 1em;
}

.progress {
background-color: #FF05;
padding: 0.5em;
margin: 0.5em;
border: 1px solid #FF0;
}

.loading {
    padding: 1em;
    font-style: italic;
    text-align: center;
}

.submit, .submit:visited {
  box-sizing: border-box;
  height: 2.4em;
  background-color: #2B972B;
  border: none;
  border-radius: 0.2em;
  padding: calc(0.5em - 2px);
  color: white;
  font-weight: bold;
  cursor: pointer;
  display: inline-block;
  margin: 0.2em;
  border: 2px solid #2B972B;
  font-size: 1rem;
}

.submit.left {
  border-right: 0;
  margin-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  height: 1.45rem;
}

.submit.right {
  border-left: 0;
  margin-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  height: 1.45rem;
}

.submit.submitoff, .submit.submitoff {
  color: #2B972B;
  background-color: #B8CAB4;
  border: 2px solid #2B972B;
}

.submit.submitoff:hover, .submit.submitoff:hover {
  color: #2B972B;
  background-color: #CBDEC6;
}

.smallsubmit, .smallsubmit:visited {
    height: 1.7em;
    cursor: pointer;
    background-color: #2B972B;
    border: 2px solid #2B972B;
    border-radius: 0.2em;
    color: white;
    font-weight: bold;
    margin-left: 0.25em;
    padding: 0 0.25em;
}

a.submit:hover {
    text-decoration: none;
    background-color: #206420;
}

.submit.block {
    margin-top: 1em;
    display: block;
}

input[type=text], input[type=password], input[type=date], select,
input[type=number], input[type=time], textarea {
    box-sizing: border-box;
    height: 2.4em;
    line-height: 2.2rem;
    margin: 0;
    background-color: #EEFFEE8F;
    border: 1px solid #33AA33BD;
    border-radius: 0.3em;
    font-size: 1rem;
}

input[type=text], input[type=password], input[type=date], select,
input[type=number], input[type=time], textarea {
    padding: 0 0 0 0.2em;
}

input[type=text], input[type=password], input[type=number] {
    padding: 0 0 0 0.5em;
}

fieldset {
    border-radius: 0.3em;
    background-color: var(--transparent-white);
    border: 1px solid white;
    margin-top: 1em;
}

legend { font-size: 0.8em; }

select {
    padding: 0.5em;
    line-height: 2.2rem;
    margin: 0;
    background-color: #EEFFEE8F;
    border: 1px solid #33AA33BD;
    border-radius: 0.3em;
    font-size: 1rem;
}

textarea { width: 100%; }


input.submit:disabled {
    background-color: #777;
    color: #ccc;
    border-color: #AAA;
}

.red {
    background-color: red!important;
    border-color: red!important;
}

input.search_field { margin-left: 0.5em; margin-bottom: 0.5em; width: 250px;  }

.float_right { float: right; margin-right: 0.5em; }

@media (max-width: 1081px) {
    body {width:calc(100% - 30px); margin: 0 auto; min-width:unset;}
    #nav {margin: 0 -15px;}
}