#webtoast * {
  box-sizing: border-box
}

@keyframes slideRight {
  0% {
    transform: translateX(100px);
  }

  70% {
    transform: translateX(-30px);
  }

  100% {
    transform: translateX(0px);
  }
}

@keyframes slideLeft {
  0% {
    transform: translateX(-100px);
  }

  70% {
    transform: translateX(30px);
  }

  100% {
    transform: translateX(0px);
  }
}

@keyframes slideDown {
  0% {
    transform: translateY(-100px);
  }

  70% {
    transform: translateY(30px);
  }

  100% {
    transform: translateY(0px);
  }
}

@keyframes slideUp {
  0% {
    transform: translateY(100px);
  }

  70% {
    transform: translateY(-30px);
  }

  100% {
    transform: translateY(0px);
  }
}


.hw-overlay {
    position:absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.1);
    z-index: 1;
}

.toasttopright {
  left     : initial;
  right    : 20px;
  animation: slideRight .8s;
}

.toasttopleft {
  left     : 20px;
  animation: slideLeft .8s;
}


.toasttopcenter {
  left      : 0px;
  right     : 0px;
  text-align: center;
  animation : slideDown .8s;
}


.toastbottomcenter {
  left      : 0px;
  right     : 0px;
  bottom    : 20px;
  top       : initial !important;
  text-align: center;
  animation : slideUp .8s;
}

.toastbottomleft {
  bottom   : 20px;
  top      : initial !important;
  animation: slideLeft .8s;
}

.toastbottomright {
  right    : 20px;
  bottom   : 20px;
  top      : initial !important;
  animation: slideRight .8s;
}




.toastContainer {
  position: fixed;
  top     : 20px;
  z-index : 999999
}

.webToast {
  display         : inline-block;
  text-align      : left;
  padding         : 10px 0;
  background-color: #fff;
  border-radius   : 4px;
  max-width       : 500px;
  top             : 0px;
  position        : relative;
  box-shadow      : 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  transition      : all .8s ease-in;
  z-index         : 99999;
}



.webToast:before {
  content                  : '';
  position                 : absolute;
  top                      : 0;
  left                     : 0;
  width                    : 4px;
  height                   : 100%;
  border-top-left-radius   : 4px;
  border-bottom-left-radius: 4px;

}

.toastIcon {
  position     : absolute;
  top          : 50%;
  left         : 15px;
  transform    : translateY(-50%);
  width        : 30px;
  height       : 30px;
  padding      : 5px;
  border-radius: 50%;
  display      : inline-block;
  font-size    : 20px;
  font-weight  : bold;
  text-align   : center;
  color        : white;
  padding-top  : 1px;
}

.toastStatus {
  color        : #3e3e3e;
  font-weight  : 700;
  margin-top   : 0;
  margin-bottom: 2px;
  font-size    : 20px;
}

.toastMessage {
  font-size    : 16px;
  margin-top   : 0;
  margin-bottom: 0;
  color        : #878787;
}


.toastContent {
  padding-left : 60px;
  padding-right: 40px;
}

.toast__close {
  position : absolute;
  right    : 15px;
  top      : 0px;
  width    : 14px;
  cursor   : pointer;
  height   : 14px;
  color    : #ada9a9;
  transform: translateY(-50%);
  font-size: 28px;
}

.toastSuccess .toastIcon {
  background-color: #2BDE3F;
}

.toastSuccess:before {
  background-color: #2BDE3F;
}

.toastInfo .toastIcon {
  background-color: #1D72F3;
}

.toastInfo:before {
  background-color: #1D72F3;
}

.toastDanger .toastIcon {
  background-color: #ef6658;
}

.toastDanger:before {
  background-color: #ef6658;
}


.ConfirmConainer {
  top            : 0px;
  bottom         : 0;
  left           : 0;
  right          : 0;
  display        : flex;
  justify-content: center;
  align-items    : center;
}

.ConfirmConainer .toastConfirm{ 
  padding  : 20px;
min-width: 400px;
max-width: 100%;
}

.ConfirmConainer .confirm-description{
padding: 10px 0;
margin-bottom: 5px;
}

.toastConfirm>.toastContent {
  padding  : 0px 10px;
  min-width: 300px;

}

.toastConfirm>.toastContent>p {
  font-size     : 20px;
  border-bottom : 1px solid #ddd;
  margin-bottom : 6px;
  padding-bottom: 5px;
  color: #1654b3;
font-weight: bold;

}

.toastConfirm>.toastContent button {
  padding      : 5px;
  font-size    : 15px;
  border-radius: 4px;
  cursor       : pointer;
  outline      : 0px solid;

  color: white;

}

.toastConfirm>.toastContent button[data-confirm] {
 border: 1px solid #0a5ede;
background: #0a5ede;

}

.toastConfirm>.toastContent button[data-confirm]:focus {
  border    : 2px solid #eae541;
}

.toastConfirm>.toastContent button[data-cancel] {
  border    : 1px solid #ef6658;
  background: #ef6658;
  float     : right;

}

.confirmBG {
  content   : '';
  position  : fixed;
  top       : 0px;
  left      : 0px;
  right     : 0px;
  bottom    : 0px;
  background: rgba(0, 0, 0, .4);

}


.webToast-loader {
  /* border        : 3px solid #f3f3f3; */
  border-radius    : 50%;
  border-top       : 3px solid #3498db;
  width            : 30px;
  height           : 30px;
  -webkit-animation: webToastSpin 1s linear infinite;
  /* Safari */
  animation  : webToastSpin 1s linear infinite;
  margin-left: -6px;
}

/* Safari */
@-webkit-keyframes webToastSpin {
  0% {
    -webkit-transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes webToastSpin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* top progress line */
.webToast-line-loader {
  position        : fixed;
  top             : 0px;
  left            : 0px;
  right           : 0px;
  z-index         : 99999;
  height          : 5px;
  background-color: #1d72f3;
  background-image: linear-gradient(-45deg, rgba(255, 255, 255, .5) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, .5) 75%, transparent 75%, transparent);
  background-size : 30px 30px;
  animation       : move 1s linear infinite;
}


@keyframes move {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 30px 30px;
  }
}