@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600&display=swap');
html,
body {
  padding: 0;
  margin: 0;
  font-size: 14px;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0);
}
* {
  font-family: Kanit;
  padding: 0;
  margin: 0;
}

.xZR-Notify {
  display: flex;
  width: 15.3rem;
  position: absolute;
}

.layout-uptodown {
  flex-direction: column-reverse;
  top: 50px;
}
.layout-downtoup {
  bottom: 8%;
  right: 1.0rem;

  flex-direction: column;
}

.box-item {
    box-shadow: inset 0 0 6vh rgb(8, 8, 8);
    background-color: rgba(19, 19, 19, 0.704);
  display: flex;
  align-items: center;
  height: 5rem; 
  margin-top: 14px;
  position: relative;
  border-radius:  15px;
  /* border-left: 4px solid #079cff; */
}


.text {
     position: absolute;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: left;
     font-size: 11px;
     font-weight: 400;
     color: #6D6C6C;
     top: 41%;
     right: 1.5rem;
}
.header  {
     display: flex;
     align-items: center;
     justify-content: center;
     position: absolute;
     top: 7.5px;
     right: 1rem;
     z-index: 111;
     border-radius: 9px;
     font-size: 10px;
     font-weight: 400;
     width: 5.2rem;
     height: 1.2rem;
     color: #fff;
}

.addheader {
     background: rgba(220, 186, 0, 0.8);
     
}

.addheader p {
     color: #fff;
     margin-top: 14px;
}
.removeheader {
     background: linear-gradient(125deg,#800707,#ff0303);
}

.removeheader p {
     color: #fff;
     margin-top: 14px;
}
.box-item.add {
    /* border-left: solid 3px rgb(20, 93, 196);*/
}

.box-item.remove {
    /* border-left: solid 3px rgb(230, 0, 0);*/
}

/* .item-img {
  padding: 10px;
} */

/* Item Image */
.item-img {
     position: absolute;
     left: 9px;
     z-index: 10000;
     height: 85%;
     width: 3.8rem;
     border-radius: 5px;
     /*background-color: rgba(22, 22, 22, 0.897);*/
     margin-top: -1.8rem;
     /* border: solid 2px rgb(22, 22, 22); */
     overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
}

.item-img img {
     width: 85%;
}

/* Item Info */
.item-info {
     position: absolute;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #eee;
     text-align: left;
     right: 1.3rem;
     font-weight: 400;
     top: 65%;
     font-size: 14px;

}

.fa-solid {
     position: relative;
     top: 35%;
     font-size: 0.7vw;
     text-align: center;
     justify-content: center;
}

.item-info-name {
     position: absolute;
     color: #eee;
     text-align: left;
     right: 3.8rem;
     font-weight: 400;
     top: 65%;
     font-size: 14px;
     display: flex;
     align-items: center;
}

.iconadd {
     color: #03a3ff;
     font-size: 8px;
     margin-bottom: 10px;
     margin-left: 3px;
     /* text-shadow: 0 0 5px #03a3ff; */
}
.iconremove {
     color: #ff0303;
     font-size: 8px;
     margin-bottom: 10px;
     margin-left: 3px;
     /* text-shadow: 0 0 5px #ff0303; */
}
.notify-icon {
     text-align: center;
     align-items: center;
     justify-content: center;
  position: absolute;
  font-size: 20px;
  animation: color-flash 1s infinite alternate;
     top: 4.5px;
     left: 0.4rem;
  border-radius: 42%;
  height: 20px;
  width: 20px;
  z-index: 999;
}

.notify-badge {
  position: absolute;
  top: 1px;
  right: 6.3rem;
  color: white;
  border-radius: 42%;
  padding: 4px 7px;
  font-size: 12px;
  font-weight: bold;
  
  
}
.icon-image {
	
  width: 18px;  /* ขนาดของไอคอน */
  height: 18px;

}
.icon-image-noti {
	
  width: 18px;  /* ขนาดของไอคอน */
  height: 18px;
}
@keyframes color-flash {

  1% {
	opacity: 0.1;

  }
  100% {
	opacity: 1;

  }
}

@keyframes moveIn {
     from {
          right: -5rem;
          opacity: 0;
     }

     to {
          right: 1.4rem;

          opacity: 1;
     }
}

@keyframes moveOut {
     from {
          right: 1.4rem;
          opacity: 1;
     }

     to {
          right: -5rem;


          opacity: 0;
     }
}

@keyframes slideUp {
    from {
        transform: translate(-10%, -10%);
        opacity: 0;
    }
    to {
        transform: translate(-10%, -10%); 
        opacity: 1;
    }
}

@keyframes slideBack {
    from {
        transform: translate(-10%, -10%); 
        opacity: 1;
    }
    to {
        transform: translate(-10%, -10%);
        opacity: 0;
    }
}

@keyframes showSweetAlert {
    from {
        -webkit-transform: scale(0.7);
        transform: scale(0.7);
        opacity: 0;
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

@media (max-width: 768px) {
  .floating-btn {
    bottom: 2vh;
    right: 2vw;
    font-size: 0.9rem;
  }
}