// Chat (more!)
// -------------------------
.yui-skin-sam .yui-layout.path-mod-chat-gui_ajax {
    background-color: $body-bg;

    .yui-layout-unit div.yui-layout-bd-nohd,
    .yui-layout-unit div.yui-layout-bd-noft,
    .yui-layout-unit div.yui-layout-bd,
    .yui-layout-unit-right,
    .yui-layout-unit-bottom {
        border: 0;
    }

    .yui-layout-unit-right,
    .yui-layout-unit-bottom {
        border-radius: 0;
    }

    .yui-layout-unit-right {
        background: inherit;
    }

    .yui-layout-unit div.yui-layout-bd {
        background-color: transparent;
    }
    .yui-layout-unit.yui-layout-unit-center div.yui-layout-bd {
        background-color: $gray-100;
    }
    // Override the default padding added by function $OUTPUT->box();
    #chat-input-area.py-3 {
        @extend .p-0;
    }
    #chat-input-area table.generaltable,
    #chat-input-area table.generaltable td.cell {
        border: 0;
        padding: 3px 15px!important;
        white-space: nowrap;
        margin-bottom: 0;
    }

    #chat-userlist {
        padding: 0 5px;
        margin: 0;

        #users-list {
            li {
                border-bottom: 1px solid $border-color;
                padding: 5px 0;
            }

            img {
                margin-right: 8px;
                border-radius: $border-radius;
                max-width: none;
            }
        }
    }

    #chat-messages {
        margin: 20px 25px;

        .chat-event.course-theme {
            text-align: center;
            margin: 10px 0;
            font-size: $font-size-sm;
            color: $theme-color-3;
        }

        .chat-message.course-theme {
            margin-bottom: $card-spacer-y;
            @include border-radius($card-border-radius);
            border: $card-border-width solid $card-border-color;
            padding: $card-spacer-x;

            .time {
                float: right;
                font-size: 11px;
                color: $gray-700;
            }
        }

        .chat-message.course-theme {
            background-color: $white;

            .user {
                font-weight: bold;
            }
        }
    }
}

.chat-event {
  position: relative;
  padding: $alert-padding-y 5rem $alert-padding-y $alert-padding-x;
  margin-bottom: 2rem;
  border: $alert-border-width solid transparent;

  font-size: $font-size-sm;
  text-align: left;

  @include border-radius($alert-border-radius);

  @extend .alert-info;

  td { padding: 10px; }

  img.userpicture {
      margin: 0;
  }
}

.chat-message {
  margin-bottom: 1rem;

  &:last-child {
    margin-bottom: 0;
  }

  td {
    padding: 1rem;
    border-radius: $border-radius;
    background-color: $white;
    border: 1px solid #e4e8f0;
    box-shadow: 0 2px 1px 0 rgba(0,0,0,.05);

    vertical-align: middle;

    font-size: $font-size-sm;

    &.text {
      .title {
        margin-right: 0.5rem;
        font-size: $font-size-xs;
        color: $gray-700;
       }
    }
  }
}


.chatuserdetails {
  p {
    margin: 0;
    font-weight: $font-weight-bold;
  }

  .idletime {
    font-size: $font-size-sm;
    color: $body-color-secondary;
  }
}

#enterlink {
    .btn-action {
        padding: 0;
    }
}

#page-mod-chat-report {
    [role="main"] {
        .list-group {
            .list-group-item {
                padding: 20px;
                margin-bottom: 0.5rem;
                border: 1px solid $border-color;
                border-radius: $border-radius;

                div {
                    padding: 0!important;
                }

                p {
                    margin-top: 10px;
                    text-align: left;
                    display: inline-flex;

                    a:first-of-type {
                        display: inline-flex;
                        align-items: center;

                        padding: $badge-padding-y $badge-padding-x;
                        font-size: $badge-font-size;
                        font-weight: $badge-font-weight;
                        vertical-align: baseline;
                        border-radius: $badge-border-radius;
                        transition: $general-transition;
                        @extend .badge-link;
                        @extend .badge-secondary;
                    }

                    a:last-of-type {
                        display: inline-flex;
                        align-items: center;

                        padding: $badge-padding-y $badge-padding-x;
                        font-size: $badge-font-size;
                        font-weight: $badge-font-weight;
                        vertical-align: baseline;
                        border-radius: $badge-border-radius;
                        transition: $general-transition;
                        @extend .badge-link;
                        @extend .badge-danger;
                    }
                }
            }
        }
    }
}