.colection-list{
    clear: both;
    padding: 10px 0;
}
.action-icons {
    position: absolute;
    right: 60px;
    top: 15px;
    z-index: 1;
}
.mat-panel-list{position: relative;}
button.link:focus{background: rgba(0,0,0,.12) !important; color: #333333 !important;}
:host /deep/ .mat-content{font-size: 18px; font-weight: 500; position: relative; overflow: inherit;}
:host /deep/ .action-icons .mat-icon{width: 30px !important; height: 30px !important;color: #0777bd !important;}
.mat-menu-item .mat-icon,.mat-menu-item{color: #0777bd !important;}
.mat-icon-button{ width: 25px !important; height: 25px !important; line-height: 25px !important;}
.mat-icon-button:focus{background:transparent !important;}
:host /deep/ .mat-expansion-panel-body{overflow: inherit !important;}
:host /deep/ .mat-expansion-panel {
    background: #ededed;
    border-bottom: 1px solid #e7e7e7;
    position: relative;
}
:host /deep/ .mat-expanded{
    background-color: inherit;
}
:host /deep/ .mat-expansion-panel-header,:host /deep/ .mat-content {
    font-weight: 400;
    color: #474747;
    font-size: 17px !important;
}

:host /deep/ .mat-expansion-panel-header.cdk-keyboard-focused{
  background-color:#e7e7e7 !important;
}

:host /deep/ .mat-expansion-panel-header{position: relative;}
.arrow-icon{ position: absolute; right: 0px; top: -2px;z-index: 1 !important;transition: transform 0.3s ease-in-out; transform: rotate(-90deg);}
.arrow-icon i{color:#474747 !important;}
:host /deep/ .mat-expansion-panel-header .mat-expansion-indicator{display: none;}
:host /deep/ .expanded-div .arrow-icon{transition: transform 0.3s ease-in-out;transform: rotate(0);}
:host /deep/ .mat-list-item-div{ position: relative; float: left; width: 100%;}

.animationDiv {
    background-color: #ffffff;
    -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    animation-name: example;
    animation-duration: 4s;
}

:host /deep/ .edit-group-field {
    top: 0px;
    z-index: 100;
    background: #fff;
    width: 96%;
    float: left;
    left: 5px;
    position: absolute !important;
  }

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
    from {background-color: #ffffff;}
    to {background-color: #d4eeff;}
}

/* Standard syntax */
@keyframes example {
    from {background-color: #ffffff;}
    to {background-color: #d4eeff;}
}
  /* Safari 4.0 - 8.0 */

  @media only screen and (max-width: 600px){
    :host /deep/ .edit-group-field {width: 100%; left: -12px;}
    :host /deep/ span.group-header {
      width: 50% !important;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  }
  }