/**
 * Moodle forms HTML isn't changeable via renderers (yet?) so this
 * .less file imports styles from the bootstrap $variables file and
 * adds them to the existing Moodle form CSS ids and classes.
 *
 */
.jsenabled .mform .containsadvancedelements .advanced {
    display: none;
}

.mform .containsadvancedelements .advanced.show {
    display: flex;
}

.path-admin-tool-customlang .mform.filterform {
  width: 100%;
}

.mform .form-inline {
    .form-control,
    .custom-select {
        max-width: 100%;
        min-width: 80px;
        @include media-breakpoint-between(sm,md) {
          width: 100%;
        }
    }

    .custom-select {
      @include media-breakpoint-only(sm) {
        margin-bottom: 0.5rem;
      }
    }

    .form-group {
        margin: 0 0.25rem 0 0;
    }
    br + label {
        display: inline-flex;
        justify-content: flex-start;
        width: 100%;
    }
}


#jump-to-activity.custom-select {
    width: 100%;
    margin: 0;

    @include media-breakpoint-only(sm) {
      margin: 1rem 0;
    }
}

.mform fieldset {
    margin-bottom: 0.25rem;
}

.editor_atto_content.form-control,
.editor_atto_content {
    position: relative;
    width: 100%;

    margin-top: 5px;
    padding: 1rem;
    word-wrap: break-word;

    border: 1px solid $border-color;
    border-radius: $border-radius;
    box-shadow: inset 1px 1px 4px 0 rgba(0,0,0,.13);

    p { margin-bottom: 1.3rem !important; }
}

.form-control.atto_h5p_url {
  width: 100%;
  height: auto;

  display: block;
}

.jsenabled .mform .collapsed .fcontainer {
    display: none;
}

.mform ul.file-list {
    padding: 0;
    margin: 0;
    list-style: none;
}

.mform label .req,
.mform label .adv {
    cursor: help;
}
/*rtl:ignore*/
input#id_externalurl {
    direction: ltr;
}

#portfolio-add-button {
    display: inline;
}

.form-defaultinfo,
.form-label .form-shortname {
    @extend .text-muted;
    font-size: $font-size-xs;
    padding-left: $spacer;
}

.form-label .form-shortname.small {
  @include media-breakpoint-only(sm) {
  padding-left: 0;
  }
}

.form-label .form-shortname {
    font-size: $font-size-xs;
    display: block;
    word-wrap: break-word;

}

.form-item .form-inline {
    display: inline;
}

.form-inline label:not(.sr-only):not(.accesshide) + select {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    margin-bottom: 0;

    @include media-breakpoint-between(sm,md) {
      margin: 0;
      width: 100%;
    }

    .moodle-dialogue-bd & {
      margin-left: 0;
      margin-right: 0;
      margin-top: 0.5rem;
    }
}

// Moodle doesn't differentiate between what Bootstrap calls
// .uneditable-inputs and form help text. Styling them both as
// uneditable looks ugly, styling both as form help is fairly
// subtle in it's impact. Going for the latter as the best option.
.no-felement.fstatic {
    @extend .text-muted;
    padding-top: 5px;
}

.no-fitem .fstaticlabel {
    font-weight: bold;
}

// Pale grey container for submit buttons.
.form-buttons,
.path-admin .buttons,
#fitem_id_submitbutton,
.fp-content-center form + div,
div.backup-section + form,
#fgroup_id_buttonar {
    @extend .form-group;
    padding-left: 0;
}

.form-item .form-setting .defaultsnext > input {
    display: inline-block;
}

.form-item .form-setting .form-checkbox.defaultsnext {
    // Need to specify .defaultsnext and the .form-checkbox class
    // is somewhat randomly re-used on various actual checkboxes
    // throughout the admin forms, instead of on the wrapper div.
    margin-top: 5px; // Push down checkboxes to align.
    display: inline-block; // So above style sticks.
}


// I think this could be avoided (or at least tidied up) ifr
// we used HTML5 input types like url, phone, email, number etc.
/* rtl:ignore */
.mform .fitem .felement input[name="email"],
.mform .fitem .felement input[name="email2"],
.mform .fitem .felement input[name="url"],
.mform .fitem .felement input[name="idnumber"],
.mform .fitem .felement input[name="phone1"],
.mform .fitem .felement input[name="phone2"] {
    text-align: left;
    direction: ltr;
}

/* rtl:ignore */
#page-admin-grade-edit-scale-edit .error input#id_name {
    margin-right: 170px;
}

#page-grade-edit-outcome-course .courseoutcomes {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

#page-grade-edit-outcome-course .courseoutcomes td {
    text-align: center;
}
/* Install Process' text fields Forms, should always be justified to the left */
/* rtl:ignore */
#installform #id_wwwroot,
#installform #id_dirroot,
#installform #id_dataroot,
#installform #id_dbhost,
#installform #id_dbname,
#installform #id_dbuser,
#installform #id_dbpass,
#installform #id_prefix {
    direction: ltr;
}

.mdl-right > label {
    // Workaround for repository pop-up because the : are outside the label,
    // can/should be fixed in filemanager renderers.
    display: inline-block;
}

.singleselect {
    max-width: 100%;
}

.form-item .form-label label {
    margin-bottom: 0;
}

div#dateselector-calendar-panel {
    z-index: 3100!important; /* Set higher than the z-index of the filemanager - see MDL-39047. */
}

// remove doubled search field on search page - notlogged in users
#page-course-search .settings-menu {
  #coursesearch {
    display: none;
  }
}


fieldset.coursesearchbox {
  width: 100%;
  background-color: transparent;


  #page-site-index & {
    text-align: center;
  }

  label {
    display: block;
    margin-right: 0.25rem;

    #page-site-index & {
      width: 100%;
      display: block;
      font-size: 2rem;
      margin-bottom: 2rem;
    }
  }

  .card-header {
    border-top: 1px solid $border-color;
    border-bottom: none;
    padding: 0;
    background-color: transparent;

    h2 {
      margin: 2rem 0 1rem!important;
      font-size: 0.85rem;
      font-weight: $font-weight-sm-bold!important;
    }
  }

  .card-body {
    padding: 0;

    .input-group {
      margin: 0!important;
      padding: 0;
    }
  }

  .input-group-btn {
    .btn {
      border-radius: 0 $border-radius $border-radius 0;
    }
  }
}

/**
 * Show the labels above text editors and file managers except on wide screens.
 */


/* Section and module editing forms contain special JS components for the
   availability system (if enabled). */
#id_availabilityconditionsjson[aria-hidden=true],
.availability-field [aria-hidden=true] {
    display: none;
}

.availability-field {
    label {
        display: inline-flex;
        align-items: center;
        margin-right: 0.5rem;

        font-size: $font-size-xs;
    }
    .availability-group label {
        vertical-align: top;
        align-self: center;
    }

    .col-form-label {
      font-size: $font-size-xs;
      font-weight: $font-weight-sm-bold;
    }
}

.availability-connector {
  .label {
    margin: 10px 10px 10px 0;
  }
}

.availability-eye {
    clear: left;
    float: left;
}
.availability-inner,
.availability-plugincontrols {
    float: left;
    padding: 0;
    margin: 0.25rem;

    .label {
      font-size: $font-size-xs;
      padding: 0.25rem 0.5rem;
      border-radius: $border-radius;
    }
}

.availability-list {
  border: 2px solid $border-color;
  border-radius: $border-radius;
  padding: 10px;

  font-size: $font-size-sm;
}

.availability-header {
  width: 100%;
  display: inline-flex;
  align-items: center;
  font-weight: $font-weight-sm-bold;
  background-color: $gray-100;
  border-radius: $border-radius;
  padding: 5px 20px;

  input,
  select {
    padding-top: .375rem;
    padding-bottom: .375rem;
    padding-left: 0.65rem;
    padding-right: 0.65rem;
    margin: 0.25rem;
    font-size: $font-size-xs!important;
  }
}

.availability-eye {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 10px!important;
  margin-right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 30px;

  background-color: $gray-100;
}

.availability-none {
  margin-top: 0;
  padding: 10px 20px;

  background-color: $red-100;
  color: $red-600;

  border-radius: $border-radius;
}

.availability-item {
  border: 1px solid $theme-color-6;
  border-radius: $border-radius;
  padding: 10px;

  font-size: $font-size-sm;

  .availability-group {
    display: inline-flex;
    align-items: center;
  }

  .availability-plugincontrols {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;

    input,
    select {
      padding-top: .375rem;
      padding-bottom: .375rem;
      padding-left: 0.65rem;
      padding-right: 0.65rem;
      margin: 0.25rem;
      font-size: $font-size-xs!important;
    }
  }
}

.availability-delete {
  margin-right: 10px;
  padding: 0!important;
  text-align: center;
  line-height: 28px;

  background-color: $gray-100;
  width: 30px;
  height: 30px;

  border-radius: 30px;

  transition: $general-transition;

  &:hover {
    background-color: $gray-200;
  }

  img {
    width:9px;
  }
}

.availability-plugincontrols,
.availability-childlist .availability-inner {
    margin-left: .625rem;
}
.availability-field .availability-plugincontrols .availability-group select {
    max-width: 12rem;
}

/* Custom styles for autocomplete form element */
/* These styles reserve a standard amount of space in the DOM to avoid flicker when the original select element is replaced */
[data-fieldtype=autocomplete] select,
[data-fieldtype=tags] select,
.form-autocomplete-original-select {
    visibility: hidden;
    overflow: hidden;
    width: 15rem;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    margin-top: $font-size-base * $line-height-base + $input-padding-y-sm;
    vertical-align: bottom;
}

.form-autocomplete-multiple [role=listitem] {
    cursor: pointer;
    position: relative;

    padding-left: 1rem;

    span {
      margin-right: 10px;
    }
}

table.form-autocomplete-suggestions,
.form-autocomplete-suggestions {
    background-color: $dropdown-bg;
    border-radius: $border-radius;

    color: $dropdown-text;
    font-size: $font-size-xs;

    min-width: 206px;
    max-height: 20em;
    overflow: auto;

    margin: 0;
    padding: 10px;

    position: absolute;
    z-index: $zindex-fixed!important;

    box-shadow: 0 .5rem 1rem rgba($dropdown-box-shadow, .175);
}

fieldset {
  .form-autocomplete-suggestions {
      background-color: $dropdown-bg;
      border-radius: $border-radius;

      color: $dropdown-text;
      font-size: $font-size-xs;

      min-width: 206px;
      max-height: 20em;
      overflow: auto;

      margin: 0;
      padding: 10px;

      position: absolute;
      z-index: 1;

      box-shadow: 0 .5rem 1rem rgba($dropdown-box-shadow, .175);

        img {
          width: 20px;
          height: 20px;
          border-radius: 20px;
          margin-right: 10px;
        }

  }
}

  .form-autocomplete-selection {
    img {
      width: 20px;
      height: 20px;
      border-radius: 20px;
      margin-right: 10px;
    }
  }


.form-autocomplete-suggestions li {
    list-style-type: none;
    padding: 0.5rem;
    margin: 0;
    cursor: pointer;
    color: $dropdown-text;
    border-radius: $border-radius;
}

.form-autocomplete-suggestions li:hover {
    background-color: $dropdown-link-hover-bg;
    color: $dropdown-link-active-color;
}

.form-autocomplete-suggestions li[aria-selected=true] {
    background-color: $dropdown-bg;
    color: $dropdown-text;

    &:empty {
      display: none;
    }
}

.form-autocomplete-selection:focus {
    outline: none;
}
/** Undo some bootstrap things */
.form-autocomplete-selection + input.form-control {
    width: auto;
    display: inline-block;
    vertical-align: middle;
}

.form-autocomplete-selection {
  height: max-content;
  margin-top: 5px;
  margin-bottom: 5px;

  input[type=text] {
    margin-bottom: 0;
  }
}

.form-autocomplete-downarrow {
  position: absolute;
  top: calc(50% - 10px)!important;
  right: 10px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 20px;
  height: 20px;
  border-radius: $border-radius;

  background-color: $gray-200;
  color: $gray-800;

  .icon {
    font-size: $font-size-xs;
  }

  cursor: pointer;

  &:hover {
    background-color: $theme-color-9;

    .icon {
      color: $theme-color-3;
    }
  }
}

/* Non-bootstrap selects with a size show their contents outside of the element.
 * Remove when we update to stable bootstrap 4. (MDL-56511) */
select[size],
select[multiple] {
    overflow: auto;
}

select[size="1"] {
    overflow: visible;
}

textarea[data-auto-rows] {
    overflow-x: hidden;
}

/** Display elements under labels in vertical forms regardless of the screen size. */
.mform.full-width-labels {
    .fitem.row {
        margin-left: 0;
        margin-right: 0;
        & > .col-md-3,
        & > .col-md-9 {
            float: none;
            width: inherit;
            padding-right: 0;
            padding-left: 0;
        }
        &.femptylabel > .col-md-3,
        &.femptylabel > .col-md-2 {
            display: none;
        }
    }
}

.femptylabel {
  .path-enrol & {
    .col-md-3 {
      display: none;
    }

    .col-md-9 {
      flex: 0 0 100%;
      max-width: 100%;
    }
  }
}

/** Allow wrapping an mform in a div with the form-inline class to have an inline, responsive form. */
.form-inline {
    @include media-breakpoint-up(md) {
        .col-md-9,
        .col-md-3 {
            label {
                margin-left: 1rem;
            }
            margin-bottom: 1rem;
            width: auto;
        }
    }
}

// We dont' use the mixin because it's expensive.
[data-fieldtype="modgrade"] {
    border: 1px solid $border-color;
    @include border-radius($card-border-radius);
    padding: 10px 20px 12px!important;

    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;

    br + label {
      width: auto!important;
    }

    br {
      display: none;
    }

    input,
    select {
      padding-top: .375rem;
      padding-bottom: .375rem;
      padding-left: 0.65rem;
      padding-right: 0.65rem;
      margin: 0.25rem;
      font-size: $font-size-xs!important;
    }
}

/** Atto fields do not have form-control because that would break the layout of the editor.
    So they need these extra styles to highlight the editor when there is a validation error. */
.has-danger .editor_atto_content.form-control,
.has-danger .editor_atto_content.form-control-danger {
    @include form-control-validation($brand-danger);
    background-image: $form-icon-danger;
    padding-right: ($input-padding-x * 3);
    background-repeat: no-repeat;
    background-position: center right 1rem;
    background-size: 1.5rem;
}

// Styles for the JS file types browser provided by the "filetypes" element.
[data-filetypesbrowserbody] {
    [aria-expanded="false"] > [role="group"],
    [aria-expanded="false"] [data-filetypesbrowserfeature="hideifcollapsed"],
    [aria-expanded="true"] [data-filetypesbrowserfeature="hideifexpanded"] {
        display: none;
    }
}

// The autocomplete popup needs a display:block container to correctly position to popup.
.form-inline[data-fieldtype="autocomplete"],
.form-inline[data-fieldtype="tags"] {
    display: block;
}

// Show editor at 100% width by default.
[data-fieldtype="editor"] > div {
    flex-grow: 1;
}


  //toogle bar UI
  fieldset {
    .ftoggler {

      a.fheader {
        display: block;
        align-self: stretch;

        background: $btn-secondary-bg;
        border: 1px solid $btn-secondary-border;
        border-radius: $border-radius;

        font-size: $font-size-base;
        color: $btn-secondary-text;
        text-decoration: none;
        cursor: pointer;

        margin: 0;
        padding: $spacer 2 * $spacer $spacer 3 * $spacer;

        transition: $general-transition;

        &:hover {
          text-decoration: none;
          background-color: $btn-secondary-bg-hover;
          border-color: $btn-secondary-border-hover;

          color: $btn-secondary-text-hover;
        }

        text-decoration: none;
        color: inherit;
      }

      .icon {
        font-size: 16px;
        color: inherit;
      }

    }
  }

  .fcontainer {
    margin-top: $spacer;

    #page-login-forgot_password & {
      margin-top: 0;
    }
  }

  .mform fieldset.collapsible legend a.fheader {
      display: block;
      padding: 1rem 1.5rem;

      box-shadow: $box-shadow-sm;

      border-radius: $border-radius;
      font-size: $font-size-sm;
      font-weight: $font-weight-sm-bold;
      color: $body-color;

      transition: $general-transition;

      position: relative;

      &:after {
        @extend %fa-icon;
        @extend .fas;
        content: fa-content($fa-var-caret-up);

        font-size: 14px;
        color: inherit;
        opacity: 0.6;

        position: absolute;
        top: calc(50% - 7px);
        right: 20px;
      }

      &:hover {
        text-decoration: none;
        box-shadow: $box-shadow-lg;
      }
  }

  .mform fieldset.collapsed legend a.fheader {
      &:after {

        @extend %fa-icon;
        @extend .fas;

        /*rtl:raw:
        @extend %fa-icon;
        @extend .fas;
        content: fa-content($fa-var-caret-left);
        left: 10px;
        right: auto;
        */
        content: fa-content($fa-var-caret-right);
        /*rtl:remove*/

        font-size: 14px;
        color: inherit;
        opacity: 0.6;

        position: absolute;
        top: calc(50% - 7px);
        right: 20px;
      }
  }

  .mform fieldset.collapsed legend,
  .ftoggler {
    position: relative;

    .btn-icon {
      position: absolute;
      top: calc(50% - 15px);
      right: 50px;
      height: 30px;
    }
  }

  .editor_atto_content_wrap {
    background-color: transparent;
  }

  .editor_atto_content_wrap, .editor_atto + textarea {
    border: none!important;
    word-wrap: break-word;
  }


  .editor_atto_content.form-control {
    width: 100%!important;
  }

  .editor_atto_toolbar {
      background-color: #000000!important;
      border: none!important;
      border-radius: $border-radius!important;
      box-shadow: $box-shadow-lg!important;

      position: relative!important;
      z-index: 1!important;
  }

  .editor_atto_notification .atto_info {
    width: calc(100% - 16px);
    margin: 8px;
    padding-right: 15px!important;
    border-radius: $border-radius!important;

    font-size: 12px!important;

    img {
      margin: 10px!important;
      width: 18px;
      @extend .icon;
    }
  }

  div.editor_atto_toolbar button {
    .icon {
      margin: 0;
      font-size: 14px;
    }
  }

  #id_description_editor {
    margin-bottom: 2 * $spacer;
  }

  /*Ggrade Edit Page */
  #page-admin-grade-edit-letter-index {
    .fitem:first-child {
      margin-left: 0;
    }

    .fitem {
      margin-left: $spacer;
      margin-right: $spacer;
    }
  }


  /* MOD - grade/edit/tree/index.php */
  #menumoveafter {
    margin: 0 $spacer;
  }

  /* Mod - user_competency_in_course.php */
  #page-admin-tool-lp-user_competency_in_course {
    [role="main"] {
      .card {
        padding: 2rem;
        margin-bottom: 2rem;
      }
    }
  }

  .user-competency-course-navigation {
    width: 100%;

    .form-autocomplete-selection + input.form-control {
      width: 100%;
    }

    span.badge {
      font-size: $font-size-xs!important;
      span { margin-right: 10px!important; }
    }
  }


.editor_atto_content {
  min-height: 100px!important;
  overflow: auto;
}

/* mod for popup */
.attachments {
  font-size: $font-size-xs;
  font-weight: $font-weight-bold;

  a {
    margin-right: 0.5rem!important;
    color: $body-color-secondary;

    .icon {
      width: 50px;
      height: 50px;
    }

    &:before {
      display: none;
    }

    &:hover {
      text-decoration: none;
      color: $theme-color-3;
    }
  }

}


#existingcell,
#potentialcell {
  width: 40%;
}

#buttonscell {
  width: 20%;
}

[data-filetypesdescriptions="id_assignsubmission_file_filetypes"] {
  display: block;
  width: 100%;
  margin: 1rem 0 0 0;
}

#page-mod-feedback-edit {
  .singleselect {
      margin: 0.5rem 0;
      width: 100%;
  }
}


[data-passwordunmask="wrapper"] {
  em {
    font-style: normal;
    font-size: $font-size-sm;
    font-weight: $font-weight-sm-bold;
  }

  a {
    text-decoration: none;
    color: $red-600;
  }

  .icon {
    color: $red-600;
    margin-right: 0.5rem;
  }
}

#page-admin-user-user_bulk {
  [data-groupname="timemodified_sdt"],
  [data-groupname="timemodified_edt"],
  [data-groupname="lastaccess_edt"],
  [data-groupname="lastaccess_sdt"],
  [data-groupname="firstaccess_sdt"],
  [data-groupname="firstaccess_edt"] {
    display: block;
    width: 100%;
    margin-bottom: 0.5rem;
  }
}

#page-mod-data-templates {
  div.editor_atto_toolbar {
    padding: 0 8px 8px 0;
  }

  .editor_atto_content_wrap div {
    border: 1px solid #ececec!important;
  }

  #tempform {
    table {
      width: 100%;

      td {
        padding: 2rem 0;
        border-bottom: 1px solid $border-color;
      }
    }

    textarea {
      width: 100%;
    }
  }
}


/* Site administration */
@include media-breakpoint-between(sm,md) {
  #page-admin-search {
    #fgroup_id_group_1 {

      .col-md-3 {
        display: none;
      }

      .col-md-9 {
        flex: 0 0 100%;
        max-width: 100%;
      }

      .form-inline {
        width: 100%;

        .fitem,
        [data-fieldtype="text"],
        [data-fieldtype="text"],
        [data-fieldtype="submit"],
        [type="submit"]
        {
          width: 100%;
        }

        [data-fieldtype="text"] {
          margin-bottom: 0.25rem;
        }
      }
    }
  }
}

#page-mod-assign-grader {
  .form-control {
    margin-bottom: 0;
  }
}

// Calendar icon next to input field
.visibleifjs {
  .icon {
    margin: 0 0.5rem;
  }
}

/* modal windows */
.atto_form.atto_media>.tab-content {
  overflow-x: unset;
  max-height: inherit;
}

.atto_form {
  padding: 0;
}



.custom-control{

	&.material-checkbox{
		color: $green-700;

		.material-control-input{
			display: none;
			&:checked~.material-control-indicator{
				border-color: $green-700;
				transform: rotateZ(45deg) translate(1px, -5px);
				width: 10px;
				border-top: 0px solid #fff;
				border-left: 0px solid #fff;
			}
		}
		.material-control-indicator{
			display: inline-block;
			position: absolute;
			top: 4px;
			left: 0;
			width: 16px;
			height: 16px;
			border: 2px solid $border-color;
			transition: .3s;
		}
	}

	&.fill-checkbox{
		color: $green-700;

		.fill-control-input{
			display: none;
			&:checked~.fill-control-indicator{
				background-color: $green-700;
				border-color: $green-700;
				background-size: 80%;
			}
		}
		.fill-control-indicator{
			border-radius: 3px;
			display: inline-block;
			position: absolute;
			top: 4px;
			left: 0;
			width: 16px;
			height: 16px;
			border: 2px solid $border-color;
			transition: .3s;
			background: transperent;
			background-size: 0%;
			background-position: center;
			background-repeat: no-repeat;
			background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E");
		}
	}

	&.overflow-checkbox{
		.overflow-control-input{
			display: none;

			&:checked~.overflow-control-indicator{
				&::after{
					transform: rotateZ(45deg) scale(1);
					top: -6px;
					left: 5px;
				}

				&::before{
					opacity: 1;
				}
			}
		}
		.overflow-control-indicator{
			border-radius: 3px;
			display: inline-block;
			position: absolute;
			top: 4px;
			left: 0;
			width: 16px;
			height: 16px;
			border: 2px solid $border-color;

			&::after{
				content: '';
				display: block;
				position: absolute;
				width: 16px;
				height: 16px;
				transition: .3s;
				transform: rotateZ(90deg) scale(0);
				width: 10px;
				border-bottom: 4px solid $border-color;
				border-right: 4px solid $border-color;
				border-radius: 3px;
				top: -2px;
				left: 2px;
			}

			&::before{
				content: '';
				display: block;
				position: absolute;
				width: 16px;
				height: 16px;
				transition: .3s;
				width: 10px;
				border-right: 7px solid #fff;
				border-radius: 3px;
				transform: rotateZ(45deg) scale(1);
				top: -4px;
				left: 5px;
				opacity: 0;
			}
		}
	}

	&.material-switch{
		color: $green-700;
		padding-left: 0;

		.material-switch-control-input{
			display: none;
			&:checked~.material-switch-control-indicator{

				&::after{
					background-color: $green-700;
					left: 17px;
				}
			}
		}
		.material-switch-control-indicator{
			display: inline-block;
			position: relative;
			margin: 0 10px;
			top: 4px;
			width: 32px;
			height: 16px;
			background: $input-border-color;
			border-radius: 16px;
			transition: .3s;

			&::after{
				content: '';
				display: block;
				position: absolute;
				width: 18px;
				height: 18px;
				border-radius: 50%;
				transition: .3s;
				top: -1px;
				left: -1px;
				background: #fdfdfd;
				box-shadow: 0 2px 10px $border-color;
			}
		}
	}

	&.ios-switch{
		color: $body-color;
		padding-left: 0;

    .text {
      max-width: calc(100% - 60px);

      @include media-breakpoint-between(sm,md) {
      min-width: 180px;
      }
    }

		.ios-switch-control-input{
			display: none;

			&:active~.ios-switch-control-indicator{
				&::after{
					width: 20px;
				}
			}

			&:checked{
				~.ios-switch-control-indicator{
					border: 10px solid $green-700;

					&::after{
						top: -8px;
						left: 4px;
					}
				}

				&:active~.ios-switch-control-indicator{
					&::after{
						left: 0px;
					}
				}
			}
		}
		.ios-switch-control-indicator{
			display: inline-block;
			position: relative;
			margin: 0 10px 0 0;
			top: 0;
			width: 32px;
			height: 20px;
			background: $input-bg;
			border-radius: 16px;
			transition: .3s;
			border: 2px solid $input-border-color;

			&::after{
				content: '';
				display: block;
				position: absolute;
				width: 16px;
				height: 16px;
				border-radius: 16px;
				transition: .3s;
				top: 0px;
				left: 0px;
				background: lighten($input-bg, 20);
				box-shadow: 0 0 2px $border-color, 0 2px 5px $gray-600;
			}
		}
	}

	&.border-switch{
		color: $green-700;
		padding-left: 0;

		.border-switch-control-input{
			display: none;
			&:checked~.border-switch-control-indicator{
				border-color: $green-700;

				&::after{
					left: 14px;
					background-color: $green-700;
				}
			}
		}
		.border-switch-control-indicator{
			display: inline-block;
			position: relative;
			margin: 0 10px;
			top: 4px;
			width: 32px;
			height: 20px;
			background: $input-bg;
			border-radius: 16px;
			transition: .3s;
			border: 2px solid $input-border-color;

			&::after{
				content: '';
				display: block;
				position: absolute;
				width: 12px;
				height: 12px;
				border-radius: 50%;
				transition: .3s;
				top: 2px;
				left: 2px;
				background: $input-border-color;
			}
		}
	}

	&.teleport-switch{
		color: $green-700;
		padding-left: 0;

		.teleport-switch-control-input{
			display: none;
			&:checked~.teleport-switch-control-indicator{
				border-color: $green-700;

				&::after{
					left: -14px;
				}

				&::before{
					right: 2px;
					background-color: $green-700;
				}
			}
		}
		.teleport-switch-control-indicator{
			display: inline-block;
			position: relative;
			margin: 0 10px;
			top: 4px;
			width: 32px;
			height: 20px;
			background: $input-bg;
			border-radius: 16px;
			transition: .3s;
			border: 2px solid $input-border-color;
			overflow: hidden;

			&::after{
				content: '';
				display: block;
				position: absolute;
				width: 12px;
				height: 12px;
				border-radius: 50%;
				transition: .3s;
				top: 2px;
				left: 2px;
				background: $input-border-color;
			}

			&::before{
				content: '';
				display: block;
				position: absolute;
				width: 12px;
				height: 12px;
				border-radius: 50%;
				transition: .3s;
				top: 2px;
				right: -14px;
				background: $input-border-color;
			}
		}
	}
}

  :disabled + span.ios-switch-control-indicator {
    opacity: 0.4;
    cursor: not-allowed;
  }

.list-group{
	&:first-child .list-group-control:first-child {
		border-top-left-radius: .25rem;
		border-top-right-radius: .25rem;
	}

	&::last-child .list-group-control:last-child {
		border-bottom-left-radius: .25rem;
		border-bottom-right-radius: .25rem;
	}

	&.list-group-flush{
		&:last-child{
			.list-group-control:last-child {
				border-bottom: 0;
				margin-bottom: 0;
			}
		}

		&:first-child{
			.list-group-control:first-child {
				border-top: 0;
			}
		}

		.list-group-control {
			border-right: 0;
			border-left: 0;
			border-radius: 0;
		}
	}

	.list-group-control{
		position: relative;
		display: block;
		margin-bottom: -1px;
		background-color: #fff;
		border: 1px solid rgba(0,0,0,.125);

		.custom-control{
			margin: 0;
			padding: .75rem 1.25rem;
			padding-left: 3rem;
			display: block;

			.custom-control-indicator, .material-control-indicator, .fill-control-indicator, .overflow-control-indicator{
				top: 1rem;
				left: 1.25rem;
			}
		}
	}
}

.form-filemanager {
  width: 100%;
}


/* Wiki */
.wikisearch {
  input {
    display: inline-flex;
    width: auto;
  }
}

/* moodle 3.10 */
.simplesearchform {
  .form-control {
    border-radius: $border-radius 0 0 $border-radius!important;
  }
}

/* mods */
.atto_image_button_text-top.img-fluid,
.atto_image_button_middle.img-fluid,
.atto_image_button_text-bottom.img-fluid {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  border-radius: $border-radius;
}