// >>-- 15 Icon css start --<<

.ti{
  letter-spacing: -0.43em;
}

.icon-list {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  &.space-top-icon{
    i{
      margin-top: 1rem !important;
    }
  }

  &.icons-iconoir{
    .icon-box{
      i{
        display: inline-block;
      }
    }
  }
  
  .icon-box {
    width: 12.5%;
   text-align: center;
   padding: 0.75rem;
   border : 1px solid var(--border_color);
   position: relative;

   &:hover{
    &::before{
      content: "";
      position: absolute;
      height: 100%;
      width: 100%;
      left: 0;
      top: 0;
      padding-top: 5px;
      background-color:  rgba(var(--white),1);
      font-family: "tabler-icons" !important;
      z-index: 1;
      opacity: 0.3;
    }

      &::after{
        content: "\ea7a";
        font-family: "tabler-icons" !important;
        position: absolute;
        top: 10px;
        right: 10px;
        background-color: rgba(var(--primary), 0.2);
        color: rgba(var(--primary), 1);
        height: 35px;
        width: 35px;
        z-index: 1;
        border-radius: 5px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding-left: 8px;
        font-size: 20px;
      }

    transition: var(--app-transition);
    cursor: copy;

    code{
      color: rgba(var(--primary), 0.6);
      background-color: rgba(var(--primary), 0.1);
    }

    strong {
      color: rgba(var(--primary), 0.7);
   }
  }

   i {
     display: block;
     font-size: 30px;
     margin: 0 auto;
     margin-bottom: 1rem;
     opacity: 0.9;
   }

   strong {
     display: block;
     font-weight: 600;
     font-size: 14px;
     color: rgba(var(--secondary), 0.7);
     max-width: 80%;
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
     margin: 0 auto;
   }

   code{
     display: inline-block;
     max-width: 80%;
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
     margin: 5px auto 0;
     background-color:  rgba(var(--secondary), 0.1);
     color: rgba(var(--secondary), 1);
     font-size: 10px;
   }
 }
}

.toastify{
  border-radius: var(--bs-border-radius);
  .toast-close{
    padding-left: 0.75rem;
  }
}

// >>-- 15 Icon css end --<<