/* ListView position alignment */

#listview_template.e-listview {
  max-width: 400px;
  margin: auto;
  border-radius: 2px;
  height: 470px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

#list-scrolling {
  margin: auto;
  max-width: 800px;
}

#list-scrolling.e-listview.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar {
  background: transparent;
  width: 85px;
  height: 85px;
  top: 50%;
  transform: translateY(-50%);
}

body.material #listview_template,
body.material-dark #listview_template,
body.fabric #listview_template,
body.fabric-dark #listview_template,
body.bootstrap #listview_template,
body.bootstrap-dark #listview_template,
body.highcontrast #listview_template {
    border: 1px solid #dddddd;
}

/* ListView header alignment */

#listview_template.e-listview .e-list-header #list-logo {
  margin-top: 2.5px;
  position: absolute;
  right: 20px;
}

#listview_template.e-listview.e-rtl .e-list-header #list-logo {
  margin-top: 2.5px;
  position: absolute;
  right: 280px;
}

body.material-dark .e-list-item .e-list-avatar.e-list-multi-line .e-list-content,
body.bootstrap-dark .e-list-item .e-list-avatar.e-list-multi-line .e-list-content {
    color: rgba(255,255,255,0.7);
}

body.material-dark .e-list-item .e-list-avatar.e-list-multi-line .e-list-item-header {
  color: #ffffff;
}

/* ListView template customization */

@font-face {
  font-family: "Bookmarks";
  src: url(data:application/x-font-ttf;charset=utf-8;base64,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)
    format("truetype");
  font-weight: normal;
  font-style: normal;
}

#listview_template.e-listview.e-rtl.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge) {
  padding-left: 1.0666em;
  padding-right: 122px;
}

#listview_template.e-listview.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge) {
  padding-left: 122px;
  padding-right: 1.0666em;
}

#listview_template.e-listview.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar {
  background: transparent;
  width: 90px;
  height: 90px;
  top: 50%;
  transform: translateY(-50%);
}

#listview_template.e-listview #list-logo {
  float: right;
}

#listview_template.e-listview.e-rtl.e-list-template .clearfix.desc.e-list-wrapper {
  padding-right: 16px;
}

#listview_template.e-listview.e-list-template .clearfix.desc.e-list-wrapper {
  padding-left: 16px;
}

#listview_template.e-listview.e-list-template .clearfix.desc.e-list-wrapper p {
  text-indent: 50px;
}

#listview_template.e-listview .e-list-item.e-has-child.e-hover:not(.e-focused) {
  transition: 0.8s;
}

#listview_template.e-listview .e-list-item.e-level-1.e-has-child {
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

#listview_template.e-listview .e-list-item.e-level-1.e-has-child:last-child {
  border-bottom: 0px solid rgba(0, 0, 0, 0.12);
}

#listview_template.e-listview .timeStamp {
  font-size: 10px;
  padding: 4px 0;
}

#listview_template.e-listview .bookmark,
#listview_template.e-listview .share,
#listview_template.e-listview .comments {
  cursor: pointer;
}

#listview_template.e-listview .bookmark::before,
#listview_template.e-listview .share::before,
#listview_template.e-listview .comments::before {
  color: grey;
  font-family: "Bookmarks";
  margin-left: 3px;
}

#listview_template.e-listview .bookmark::before {
  content: "\e700";
  margin-right: 12px;
  font-size: 16px;
}

#listview_template.e-listview .share::before {
  content: "\e701";
  margin-right: 3px;
  font-size: 13px;
}

#listview_template.e-listview .comments::before {
  content: "\e703";
  margin-right: 12px;
  font-size: 15px;
}

/* ListView theme customization */

.highcontrast #listview_template.e-listview .bookmark::before,
.highcontrast #listview_template.e-listview .share::before,
.highcontrast #listview_template.e-listview .comments::before {
  color: #fff;
}

.highcontrast #listview_template.e-listview .e-list-item.e-active {
  color: #fff;
}

.material #listview_template.e-listview .e-has-child:hover .e-list-item-header {
  color: #e91e63;
  transition: 0.5s;
}

.fabric #listview_template.e-listview .e-has-child:hover .e-list-item-header {
  color: #275395;
  transition: 0.5s;
}

.bootstrap #listview_template.e-listview .e-has-child:hover .e-list-item-header {
  color: #0644b4;
  transition: 0.5s;
}

.highcontrast #listview_template.e-listview .e-list-item.e-has-child.e-hover {
  transition: 0s;
  background-color: #685708;
  border-color: #fff;
  color: #fff;
}

.highcontrast #listview_template.e-listview.e-list-template .e-list-item.e-active .e-list-item-header,
.highcontrast #listview_template.e-listview.e-list-template .e-list-item.e-active .e-list-content {
  color: #fff;
}

.bootstrap4 #listview_template.e-listview.e-list-template .e-list-item.e-active .e-list-item-header,
.bootstrap4 #listview_template.e-listview.e-list-template .e-list-item.e-active .e-list-content {
  color: #333333;
}

.bootstrap4 #listview_template.e-listview .bookmark::before,
.bootstrap4 #listview_template.e-listview .share::before,
.bootstrap4 #listview_template.e-listview .comments::before {
  color: #495057;
}

.bootstrap-dark #listview_template.e-listview .e-list-item.e-active {
    background-color: #414141;
}

/* Media query */

@media screen and (max-width: 450px) {
  #listview_template.e-listview #list-logo {
    display: none;
  }
}

body.bootstrap5 #listview_template.e-listview .e-list-item.e-focused .bookmark::before,
body.bootstrap5 #listview_template.e-listview .e-list-item.e-focused .share::before,
body.bootstrap5 #listview_template.e-listview .e-list-item.e-focused .comments::before,
body.material-dark #listview_template.e-listview .e-list-item.e-focused .bookmark::before,
body.material-dark #listview_template.e-listview .e-list-item.e-focused .share::before,
body.material-dark #listview_template.e-listview .e-list-item.e-focused .comments::before,
body.fabric-dark #listview_template.e-listview .e-list-item.e-focused .bookmark::before,
body.fabric-dark #listview_template.e-listview .e-list-item.e-focused .share::before,
body.fabric-dark #listview_template.e-listview .e-list-item.e-focused .comments::before,
body.bootstrap-dark #listview_template.e-listview .e-list-item.e-focused .bookmark::before,
body.bootstrap-dark #listview_template.e-listview .e-list-item.e-focused .share::before,
body.bootstrap-dark #listview_template.e-listview .e-list-item.e-focused .comments::before,
body.tailwind-dark #listview_template.e-listview .e-list-item.e-focused .bookmark::before,
body.tailwind-dark #listview_template.e-listview .e-list-item.e-focused .share::before,
body.tailwind-dark #listview_template.e-listview .e-list-item.e-focused .comments::before,
body.bootstrap5-dark #listview_template.e-listview .e-list-item.e-focused .bookmark::before,
body.bootstrap5-dark #listview_template.e-listview .e-list-item.e-focused .share::before,
body.bootstrap5-dark #listview_template.e-listview .e-list-item.e-focused .comments::before
{
    color: #ffffff;
}