.addtimeline-btn{
    padding: 4px 7px;
    border: 2px dotted grey;
    background-color: #7d5353;
    color: white;
    font-size: 18px;
    cursor: copy;
}
.clearfix{
    clear: both;
}
.text-center{
    text-align: center;
}
.dashicon-picker-aria{
    position: fixed;
    max-width: 300px;
    height: 300px;
    left: 50%;
    top: 20%;
    margin-left: -150px;
    overflow: hidden;
    background: white;
    padding: 20px 10px;
    display: none;
}
.dashicon-picker-aria.opend::before{
    content: "";
    width: 100%;
    height: 100vh;
    background-color: #00000036;
    position: fixed;
    top:0;
    left: 0;
    z-index: -9;
}
.dashicon-picker-aria.opend{
    display: block;
}
.dashicon-picker-aria> .icon-picker{
    overflow-y: auto;
    height: 300px;
    padding: 10px 3px;
    background-color: white;
    
 }
 .dashicon-picker-aria> .icon-picker > span.dashicons{
    margin: 5px 10px;
    cursor: pointer;
 }
 .dashicon-picker-aria> .icon-picker > span.dashicons:hover{
    outline: 1px solid black;
  }

  .dashicon-picker-aria> .icon-picker-close{
    content: "\f335";
    position: absolute;
    right: 10px;
    color: red;
    font-size: 21px;
    padding: 1px;
    border: 1px solid;
    background: white;
    cursor: pointer;
    line-height: 18px;
  }

  .remove-timeline-item{
    position: absolute;
    left: 10px;
    top: 12px;
    font-size: 21px;
    border: 1px solid lightgray;
    border-radius: 50%;
    padding: 5px 5px 5px 5px;
    line-height: 20px;
    cursor: pointer;
    color: red;
    box-shadow: 0px 0px 5px 2px black;
  }
  .timeline_item_area:nth-child(even) > .remove-timeline-item{
    right:10px;
    left:auto;
 }