/* Add here all your CSS customizations */
.blink {
    animation: blink-animation 1s steps(5, start) infinite;
    -webkit-animation: blink-animation 1s steps(5, start) infinite;
  }
  @keyframes blink-animation {
    to {
      visibility: hidden;
    }
  }
  @-webkit-keyframes blink-animation {
    to {
      visibility: hidden;
    }
  }
.rozet{
}
.rozet_list {
  height:300px;
  overflow:hidden;
  overflow-y:scroll;
  border-radius: 8px !important;
  float:left;
  width:75%;
  padding:14px 15px 13px;
} 
.rozet_list::-webkit-scrollbar-thumb {
    background: rgb(0, 136, 204);
    border-radius: 5px;
}
.rozet_list::-webkit-scrollbar-track {
  background: unset;
} 
.rozet_detay{
  float:left;
  width:25%;
  height:300px;
  padding:14px 15px 13px;
  text-align:center;
  color:#fff;
}
.rozet_detay p{
  padding:14px 15px 13px;
  text-align:center;
  color:#fff;
}
.rozet_item{
    box-shadow: 0 2px 0 rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.19);
    float: left;
    width: 118px;
    height: 118px;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
    margin-right: 8px;
    text-align: center;
    padding: 5px;
    margin-bottom: 9px;
    cursor: pointer;
    background-color: #fff;
}
.rozet_item_active{
    box-shadow: 0 2px 0 rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.19);
    float: left;
    width: 118px;
    height: 118px;
    border: 2px solid red;
    border-radius: 3px;
    margin-right: 8px;
    text-align: center;
    padding: 5px;
    margin-bottom: 9px;
    cursor: pointer;
    background-color: #fff;
}
.rozet_item:hover{
    border: 2px solid orange;
}
.rozet_resim{
    position: relative;
    display: inline-block;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    margin-top: 2px;
    margin-right:8px;
}
.rozet_resim_op{
    margin: 0;
    position: absolute;
    left: 3px;
    top: 3px;
    z-index: 1;
    opacity: 0.3;
}
.rozet_resim_detay{
    opacity: 0.4;
}
.rozet_hbaslik{
    bottom: 8px;
    width: 100%;
    left: 0;
}
.rozet_baslik{
    padding: 0 7px;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rozet_progres{
    position: relative;
    height: 15px;
    width: 100%;
    -webkit-border-radius: 4px;
    -ms-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    -webkit-background-clip: padding-box;
    -ms-background-clip: padding-box;
    -moz-background-clip: padding-box;
    -o-background-clip: padding-box;
    background-clip: padding-box;
    background-color: #e3e3e3;
    margin-top: 15px;
}
.rozet_tam{
    position: absolute;
    top: -20%;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    font-weight: 700;
    color:black;
}