#toast {
  position: fixed;
  top: 32px;
  left: 32px;
  z-index: 99999999;
}


.toast {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 2px;
  padding: 20px 0;
  min-width: 350px;
  max-width: 400px;
  border-left: 4px solid;
  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.08);
  transition: all linear 0.3s;
}
@media only screen and (max-width: 600px) {
    #toast {
      top: 10px;
      left: 0px;
      z-index: 99999999;
    }
    
}
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(calc(100% + 32px));
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeOut {
  to {
    opacity: 0;
  }
}

.toast--success {
  border-color: #47d864;
}

.toast--success .toast__icon {
  color: #47d864;
}

.toast--info {
  border-color: #2f86eb;
}

.toast--info .toast__icon {
  color: #2f86eb;
}

.toast--warning {
  border-color: #ffc021;
}

.toast--warning .toast__icon {
  color: #ffc021;
}

.toast--error {
  border-color: #ff623d;
}

.toast--error .toast__icon {
  color: #ff623d;
}

.toast + .toast {
  margin-top: 24px;
}

.toast__icon {
  font-size: 24px;
}

.toast__icon,
.toast__close {
  padding: 0 16px;
}

.toast__body {
  flex-grow: 1;
}

.toast__title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.toast__msg {
  font-size: 14px;
  color: #888;
  margin-top: 6px;
  line-height: 1.5;
}

.toast__close {
  font-size: 20px;
  color: rgba(0, 0, 0, 0.3);
  cursor: pointer;
}


.myCheckbox {
    /* setting the checkbox input HTML element accent color to `green` */
    accent-color: #9c7a02;
  }

  :is(.dark .myCheckbox) {
    accent-color: #e0af00;
  }


.descriptionbox{
    background-color: rgb(247, 247, 247); 
    padding: 10px; 
    border-radius: 10px; 
    margin-bottom: 10px;
}
:is(.dark .descriptionbox) {
    background-color: #27272a; 
    color: #fff;
  }