div.messages {
  color: red;
  font-size: 120%;
  padding: 1em;
  background-color: #FDF5E6;
}

div#breadcrumb { margin: 0; padding: 0; }

span.auth_only, span.auth_only a, div.auth_only span.filter_label, li.auth_only a {
  color: red;
}

input[type=text], input[type=url], input[type=email], textarea {
  border: 1px solid #ddd;
  width: 100%;
}
select, input[type=number] { border: 1px solid #ddd; max-width: 100%; }
textarea { height: 6em; }

p { font-size: 120%; }

footer {
  padding: 0.5em;
  text-align: center;
  color: gray;
  font-size: 12px;
}
footer > div:first-child {
  margin-top: 1em;
  padding-top: 0.5em;
  border-top: 1px solid gray;
}

div.help, span.help { color: gray; font-size: 95%; font-style: italic; }

a.discrete { text-decoration: none; color: initial; }

.hidden { display: none; }
.clear { clear: both; }
.flex { display: flex; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.noweight { font-weight: normal; }

.btn {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    padding: 6px 12px;
    margin: 4px 0;
    font-size: 14px;
    border-radius: 4px;
}
.btn:hover {
    background-color: #aaa;
}

.btn-danger {
    color: #dc3545;
    background-color: transparent;
    border-color: #dc3545;
}
.btn-danger:hover {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}

div#select-right {
  font-size: 12px;
  float: right;
  margin-top: 0.5em;
  padding:  0.4em 1em 0 1em;
  background-color: #eee;
}
div#select-label { display: inline-block; padding: 0.5em 0; }
div#select-count {
  display: inline-block; padding: 0.6em 1.3em; text-align: center;
  color: white; font-weight: bold;
  min-height: 24px;
  background: no-repeat top -1px center; /* image set inline */
}
div#select-count a { color: white; }

input[type=text]:focus, input[type=number]:focus, input[type=url]:focus, input[type=url]:focus, textarea:focus, select:focus {
  border-color: #68a3cf;
  outline: 2px solid #c1e0ff;
}

div.form-tabs {
  position: sticky;
  top: 0;
  z-index: 1;
  width: 100%;
  background-color: white;
  font-size: 12px;
}

ul.ftabs {
  list-style-type: none;
  display: table;
  border-collapse: separate;
  border-spacing: 2px;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid gray;
}
ul.ftabs > li.selected {
  background-color: #eee;
}
ul.ftabs > li {
  display: table-cell;
  background-color: lightgray;
  border-radius: 10px 10px 0 0;
  cursor: pointer;
  padding: 10px;
  max-width: 100px;
  min-height: 2.4em;
  text-align: center;
  vertical-align: middle;
}

div.tab-navigation {
  text-align: center;
  font-size: 110%;
  background-color: #eee;
  padding: 0.5em;
}

div.form-group { display: none; }
div.form-group.selected { display: block; margin-top: 0.5em; }


div.form-label, span.form-label {
  font-size: 110%;
  color: #333;
  padding-bottom: 3px;
}
div.form-label label.required { font-weight: bold; }

div.delete-widget, div.add-widget { text-align: right; }

label.bsn_required::before {
  content: "*";
  color: red;
}

div.form-input {
  margin-bottom: 1em;
}
div.form-input ul {
  list-style-type: none;
  margin: 0;
  padding-left: 1em;
}
div.form-input p {
  margin: 3px;
}
img.form-delete, img.parent-delete {
  float: right;
  cursor: pointer;
}

div.or { display: inline-block; color: red; padding: 4px 1em; margin-top: 1em;
font-size: large; }

div#input-url, div#input-files {
  vertical-align: top;
}
/* Needs room left and right of input */
div#input-files input[id$='-title'] { width: calc(100% - 45px); }

#id_languages { display: flex; }
#id_languages > div { margin-right: 1em; }
div#input-type_ped, div#input-type_doc, div#input-target_gr, div#input-educ_level,
div#input-emedia, div#input-sdm, div#input-cinema, div#input-emedia_categ, div#input-mitic_asp, div#input-en_asp {
  display: inline-block;
  width: 48%;
  vertical-align: top;
}
#id_mitic_asp > div, #id_en_asp > div { margin-top: 0.8em; }
#id_mitic_asp > div > div, #id_en_asp > div > div { margin-left: 1em; }
#id_size { width: 5em; }
/* Relations formset inputs */
ul.relation-formsets { list-style-type: none; padding: 0 }
img.handler { float: right; cursor: move; width: 22px; opacity: 0.7; }
div#relations option { color: gray; font-style: italic; }
div#relations option[value='has_format'], div#relations option[value='has_part_of'],
div#relations option[value='has_version'], div#relations option[value='is_part_of'],
div#relations option[value='is_version_of'], div#relations option[value='references'],
div#relations option[value='requires'] {
  color: black; font-style: normal;
}

div.input-rtype > div, div.input-DELETE > div { display: inline-block; }
div.input-url, div.input-rel_file {
  display: inline-block;
  width: 45%;
  vertical-align: top;
}

img.help-icon { cursor: pointer; }
div.help-overlay { display: none; }
div.help-overlay dt { font-weight: bold; }

div#developpement-qualite label { display: none; }
div#developpement-qualite div.help { font-size: 140%; color: #333;}

/* style for per-link widget */
ul.per-link { list-style-type: none; padding: 0 }
span.per-link-levellabel { cursor: pointer; font-weight: bold; }
.per-choice li { cursor: pointer; }
div.per-choice-label { display: inline-block; border-bottom: 1px dotted black; }
table.per-choice { border-collapse: collapse; }
table.per-choice td { border: 1px solid #ddd; padding: 4px; }
table.per-choice td.titre { background-color: #ddd; font-weight: bold; }
table.per-choice p { margin: 0; font-size: 100%; }

button.per-link {
  border: 0.1em #333336 solid; border-radius: 0.2em; padding: 0.2em 0.4em;
  background-color: #f1f1f1; cursor: pointer;
}
button.per-link:hover { background-color: #fafafa; }

fieldset.existing input[type=checkbox] { display: none; }
fieldset.new div.delete-widget { display: none; }

/* style for conditions text */
div#conditions h3 { font-size: 130%; color: #83000E; }
div#conditions h4 { font-size: 120%; color: #83000E; }
div#conditions li { font-size: 110%; padding-bottom: 0.2em; }

/* style for pagination buttons */
div#more {
  text-align: center;
}
div#more a {
  display: inline-block;
  padding: 0.7em 1.2em 0.7em 3em;
  border-radius: 2px;
  color: rgba(0, 0, 0, 0.8);
  background: #e6e6e6 none no-repeat 5px center;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
}
#btn-more, #btn-more-search { background-image: url("../img/more.d407481c6b9f.png") !important; }
#btn-all, #btn-all-search { background-image: url("../img/all.8c06b574384b.png") !important; }
div#more a:hover {
  font-weight: bold;
  background-color: #ddd;
}

/* Styles for ResourcePerLink instances */
div.cycle { text-transform: uppercase; }
div.domaine { text-transform: uppercase; font-weight: bold; font-size: 160%; margin-bottom: 0.4em; }
div.objectif { font-weight: bold; font-size: 160%; }
ul.contenu { padding-left: 1.5em; list-style:none; }

/* Dropdown menu */
div.dropdown { position: relative; float: right; clear: right; margin: 3px 0.5em; }
div.ddLabel { padding: 0 6px; font-size: 44px; cursor: pointer; border-radius: 4px; }
div.ddLabel:hover { background-color: #ddd; }
ul.ddMenu {
  display: none;
  position: absolute;
  top: 31px;
  right: 0;
  list-style-type: none;
  padding: 0;
  margin: 0;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
}
ul.ddMenu li {
  padding: 7px 5px;
  white-space: nowrap;
  text-align: right;
}
ul.ddMenu li a {
  text-decoration: none;
  padding: 7px 5px;
}
ul.ddMenu li:hover {
  cursor: pointer;
  background-color: #eee;
}

img#modeemploi {
  width: 28px;
  vertical-align: middle;
}

/* Resource selection styles */
div.select-btns { cursor: pointer; }
img.add-to-select { width: 20px; height: 20px; }


.resource-wrapper {
  clear: both;
  display: flex;
  justify-content: space-between;
  margin: 1rem 0;
}
.ressource-toolbar img { width: 24px; height: 24px; }
.ressource-toolbar > div { margin-bottom: 0.3rem; }

table.resource_block {
  padding: 1rem;
  border-radius: 0.25rem;
  page-break-inside: avoid;
  background-color: #eee;
  width: calc(100% - 46px);
}
table.resource_block.selected {
  background-color: #ccc;
}

table.resource_block td {
  vertical-align: top;
}
table.resource_block td.thumbnail {
  width: 10%;
  min-width: 135px;
}
div.thumbnail-container {
  position: relative;
}
div.num_clicks {
  margin-top: 0.5em;
  font-style: italic;
  font-size: small;
  color: #444;
}
table.resource_block td.thumbnail img.video-start {
  position: absolute;
  top: calc(50% - 20px);
  left: calc(50% - 20px);
  width: 40px;
  height: 40px;
  cursor: pointer;
}
div.video-closer {
  float: right;
  margin: 0 0.5em;
  cursor: pointer;
  color: white;
  font-size: 240%;
  font-weight: bold;
}
div.video-closer:hover { color: #aaa; }

table.resource_block td.subblock1 { width: 35%; vertical-align: top; padding: 2px 8px; }
table.resource_block td.subblock2 { width: 45%; vertical-align: top; padding: 2px 8px; }

table.resource_block td p {
  margin-top: 0px;
  text-align: justify;
}
table.resource_block td.unvalidated {
  text-align: center;
  font-size: 120%;
  font-weight: bold;
  color: white;
  background-color: red;
  padding: 0.5em;
  border-radius: 5px 5px 0 0;
}
table.resource_block td.qrcode {
  display: none;
}
/* to match subblock1 */
table.resource_block tr.referenced td { padding: 2px 8px; }
tr.referenced:hover a { visibility:visible; }

table.resource_block div.number {
    background-color: #777;
    border-radius: 5px;
    color: #eee;
    display: inline-block;
    font-size: 120%;
    margin: 0.8em 0.5em;
    padding: 4px;
}
table.resource_block div.number-small {
  font-size: smaller;
  border-radius: 3px;
  padding: 2px;
  margin: 2px;
}

table.resource_block tr.video-line {
  display: none;
}
table.resource_block td.video-cell {
  text-align: center;
}

.qr-under-resource {
  display: flex;
  align-items: center;
  justify-content: center;
}

.media-container { background-color: black; text-align: center; }
.media-container.rts .video { min-height: 500px; }
iframe.video { max-width: 100%; height: calc(width * 0.5625);}
#video-rts { height: 500px; }

div.gallery { display: flex; justify-content: space-around; flex-wrap: wrap; }
div.gallery a { margin-bottom: 10px; }
div.gallery figure {
    border: thin #c0c0c0 solid;
    display: flex;
    flex-flow: column;
    padding: 5px;
    max-width: 220px;
    margin: auto;
}
div.gallery figcaption {
    background-color: #222;
    color: #fff;
    font: italic smaller sans-serif;
    padding: 3px;
    text-align: center;
}
div.gallery-download { margin-top: 1em; text-align: right; }
div#gallery-resources input[id$="DELETE"] { visibility: hidden; }
div#gallery-resources label[for$="DELETE"] { display: none; }

/* Overwrite lightgallery CSS to prevent semi-transparent top bar. */
.lg-sub-html, .lg-toolbar {
    background-color: transparent;
}

div.view-on-site {
    text-align: right;
    font-style: italic;
    opacity: 0.5;
}

div.relations { display: table;  border-spacing: 0; }
div.relation-line { display: table-row; }
div.relation-label { display: table-cell; font-weight: bold; }
div.relation-content { display: table-cell; padding-left: 3px; }

ul.contribs {
  margin: 0;
}

ul.contribs li img {
  max-width: 60px;
}

img.thumbnail {
  max-width: 135px;
  max-height: 135px;
  box-shadow: 8px 8px 12px #aaa;
}

/* Home-related styles */
input#id_text { width: 60%; padding: 5px; }
div.col { display: inline-block; vertical-align: top; width: 46%; }
@media (max-width: 600px) {
  input#id_text { width: 100%; }
  div.col { width: 100%; }
}
div.filter_div { margin: 0.5em 0 }
span.filter_label { cursor: pointer; }
span.filter_state { color: green; }
span.filter_state.active { color: red; }
div.filter_choices { display: none; }
div.filter_choices > div { margin: 0; padding-left: 1em; }
div.nolink a { text-decoration: none; color: black; cursor: default; }
div#results-bar { margin: 1em 0; font-size: 120%; }
div#num-results { padding: 1em; background-color: #eee; border-radius: 4px; }
div#results { clear: right; }
p.noresults { color: red; }
div.add-link { text-align: right; padding: 0.8em; }
div.icons-right { float: right; text-align: right; padding: 0.4em; }
div.icons-right a { padding: 0.4em; }
span.current { margin: 0.6em 1em; }