/* some very targetted corrections to roll back nameclashes between
 * Moodle and Bootstrap like .row, .label, .content, .controls
 *
 * Mostly relies on these styles being more specific than the Bootstrap
 * ones in order to overule them.
 */

// .label vs .label

li.activity.label,
.file-picker td.label {
  background: inherit;
  color: inherit;
  border: inherit;
  text-shadow: none;
  padding: 8px;
  white-space: normal;
  display: block;
  font-size: inherit;
  line-height: inherit;
}
.file-picker td.label {
  display: table-cell;
  text-align: right;
}

// Some of this dialog is sized in ems so a different font size
// effects the whole layout.
.choosercontainer #chooseform .option label {
    font-size: 12px;
}

/* block.invisible vs .invisible
 * block.hidden vs .invisible
 *
 * uses .invisible where the rest of Moodle uses .dimmed
 * fixible in block renderer?
 *
 * There's seems to be even more naming confusion here since,
 * blocks can be actually 'visible' (or not) to students,
 * marked 'visible' but really just dimmed to indicate to editors
 * that students can't see them or  'visible' to the user who
 * collapses them, 'visible' if you have the right role and in
 * different circumstances different sections of a block can
 * be 'visible' or not.
 *
 * currently worked around in renderers.php function block{}
 * by rewriting the class name "invisible" to "dimmed",
 * though the blocks don't look particularly different apart
 * from their contents disappearing. Maybe try .muted? or
 * dimming all the edit icons apart from unhide, might be a
 * nice effect, though they'd still be active. Maybe reverse
 * it to white?
 */

li.section.hidden,
.block.hidden,
.block.invisible {
  visibility: visible !important;
  display: block !important;
}


/* .row vs .row
 *
 * very tricky to track down this when it goes wrong,
 * since the styles are applied to generated content
 *
 * basically if you see things shifted left or right compared
 * with where they should be check for a .row
 */

#turnitintool_style .row,
.forumpost .row {
  margin-left: 0 !important;
  // not sure if this needs !important
}
#turnitintool_style .row:before,
#turnitintool_style .row:after,
.forumpost .row:before,
.forumpost .row:after {
  content: none;
}
/* fieldset.hidden vs .hidden
 *
 * Moodle uses fieldset.hidden for mforms, to signify a collection of
 * form elements that don't have a box drawn round them. Bootstrap
 * uses hidden for stuff that is hidden in various responsive modes.
 *
 * Relatedly, there is also fieldset.invisiblefieldset which hides the
 * border and sets the display to inline.
 *
 * Originally this just set block and visible, but it is used
 * in random question dialogue in Quiz,
 * that dialogue is hidden and shown, so when hidden the
 * above workaround leaves you with a button floating around
 */

fieldset.hidden {
    display: inherit !important;
    visibility: inherit !important;
}


/* .controls vs .controls
 *
 * in expanding course list, can be fixed in renderer though
 */


/* .container vs .container
 *
 * bootstrap uses .container to set the width of the layout at 960px or so, Moodle uses it
 * in the Quiz to contain the questions to add. If you don't overule the Bootstrap code,
 * it becomes near unuseable.
 */

#questionbank + .container {
    width: auto;
}

// In Moodle .hide is the eye icon
// In Bootstrap it hides things

// these were done originally in two different places,
// by two different people, not sure if both needed
img.hide {
    display: inherit;
}
img.icon.hide {
  display: inline-block !important;
}

// In Moodle course texts are defined as labels.
// In Bootstrap they are styled to have centered text which looks off on courses texts
.section .label {
  text-align: center;
}

// Input boxes for images sizes don't need a 3em width setting.
.atto_image_size input[type="text"] {
    width: auto;
}

// Bootstrap lists usually needs a class. But when using the editor you can't
// expect users to do so. This will fix it when lists are used in the content area.
.pagelayout-admin .show {
  display: inline !important;
}

// When adding lots of levels the table overflows
// Content. The rubric styles.css set this to a max with of 720px which only makes things worse.
.gradingform_rubric {
  max-width: none !important;
}