:root {
    /* ======= Colors ======= */
    --main-color: rgba(0, 188, 239, 1);
    --main-color-rgb: 0, 188, 239;
    --main2-color: rgba(0, 127, 196, 1);
    --main3-color: rgba(230, 96, 162, 1);
    --main4-color: rgba(245, 134, 52, 1);


    /* ======= Background Colors ======= */
    --bg-color: rgb(15, 23, 41);
    --bg-color-rgb: 15, 23, 41;
    --box-bg-color: rgb(19, 27, 48);
    --box-bg-color-rgb: 19, 27, 48;
    --tert-color: rgb(29,37,58);
    --tert-color-rgb: 29,37,58;
    --secondry-bg-color: rgb(25, 34, 60);
    --secondry-bg-color-rgb: 18, 31, 64;
    
    /* ======= Border Colors ======= */
    --brdr-color: rgba(34, 47, 67, 1);
    --brdr-color-rgb: 34, 47, 67;
    /* rgba(134, 183, 254, 1) */
    --brdr-maint-color: rgba(120, 188, 239, 1);

    /* ======= Text Colors ======= */
    --txt-color: rgba(173, 222, 241, 1);
    --txt-color-rgb: 173, 222, 241;
    --h-color: rgba(230, 230, 247, 1);
    --h-color-rgb: 230, 230, 247;
    --label-color: rgba(129, 161, 193, 1);
    --btn-txt-color: rgba(255, 255, 255, 1);
    --hint-color: rgba(59, 81, 103, 1);

    /* ======= Shadow Colors ======= */
    --box-shadow: rgba(0, 188, 239, 0.25);

    --tran-03: all 0.2s ease;
    --tran-03: all 0.3s ease;
  }

  .toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #333;
    color: #fff;
    padding: 10px 15px;
    border-radius: 5px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    font-family: Arial, sans-serif;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.toast.show {
    opacity: 1;
}