/** Import inter font family **/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family: 'inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: normal;
    font-size: 15px;
    color: #131313;
    text-decoration: none;
    list-style: none;
}

/***** Root variable set *****/ 
:root{
    --font-black: #131313;
    --font-grey: #707070;
    --font-white: #FFFFFF;

    --msg-fnt-color-scs: #008000;
    --msg-bck-color-scs: #00800015;

    --msg-fnt-color-inf: #0000ff;
    --msg-bck-color-inf: #0000ff15;

    --msg-fnt-color-dng: #ff0000;
    --msg-bck-color-dng: #ff000015;
}
/***** End Root variable set *****/

.auth-input-msg-err{
    font-size: 13px;
    color: #ff0000;
    & i{
        font-size: 13px;
        color: #ff0000;
    }
}

/***** All of you web style *****/ 
body{
    width: 100%;
    display: flex;
    flex-direction: column;
}

header{
   width: 100%;
   height: 50px;
   min-height: 50px;
   background-color: #030912;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0 15px;
   position: sticky;
   top: 0;
   z-index: 100;

   & #brand{
      display: flex;
      align-items: center;
      justify-content: start;
      gap: 10px;

      & img {
         width: 35px;
         height: 35px;
      }

      & span {
         color: #F3F5F7;
      }
   }

   & .onclick-opennav-btn, .onclick-closenav-btn{
      display: flex;
      gap: 5px;
      padding: 5px 10px;
      border-radius: 5px;
      border: solid #030912 1px;
      color: #F3F5F7;
      background-color: #6715C897;
      cursor: pointer;

      & i{
         color: #F3F5F7;
      }
   }

   & .onclick-opennav-btn{
      display: none;
   }

   & nav{
      display: flex;
      align-items: center;
      justify-content: end;
      gap: 20px;

      & .onclick-closenav-btn{
         display: none;
      }

      & #search{
         display: flex;
         justify-content: center;
         align-items: center;

         & input{
            padding: 5px 10px;
            border-radius: 5px;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            border: solid #F3F5F7 1px;
            outline: none;
         }

         & button{
            padding: 5px;
            border-radius: 5px;
            border: solid #F3F5F7 1px;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            background-color: #F3F5F7;
         }
      }

      & .navbar-nav{
         & .nav-item{
            display: ruby;
            & .nav-link{
               color: #F3F5F7;
            }
         }

         & .header-profile{
            width: 35px;
            height: 35px;
            background-color: #6715C897;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50px;

            & a, i{
               color: #FFFFFF;
               font-size: 25px;
            }
         }

         & .auth-link-container{
            width: 100%;
            display: flex;
            gap: 10px;

            & li {
               & a{
                  width: 100%;
                  padding: 5px 10px;
                  border-radius: 5px;
                  border: solid #F3F5F7 1px;
                  color: #F3F5F7;   
               }

               & .auth-link-login{
                  border: solid #6715C8 1px;
                  color: #F3F5F7;
                  background-color: #6715C8;
               }

               & .auth-link-signup{
                  border: solid #F3F5F715 1px;
                  color: #F3F5F7;
                  background-color: #6715C815;
               }
            }
         }
      }
      
      & ul {
         display: flex;
         justify-content: center;
         align-items: center;
         gap: 10px;
   
         & .form-logout{
            & button{
                  padding: 5px 7px;
                  cursor: pointer;
                  & i {margin-left: -1px;}
            }
         }
      }
   }
}

main{
   & #heroContainer{
      width: 100%;
      height: 350px;
      background-image: url('../image/banner.png');
      background-size: cover;
      background-position: center;
      display: flex;
      align-items: center;
      justify-content: start;
      padding: 30px;

      & .hero-info-container{
         width: 100%;
         max-width: 522px;
         display: flex;
         flex-direction: column;
         gap: 15px;
         
         & h1 {
            font-size: 35px;
            font-weight: 600;
            color: #F3F5F7;
         }
      
         & p{
            font-size: 18px;
            font-weight: 500;
            color: #F3F5F7;
         }

         & #search{
            display: flex;
            justify-content: start;
            align-items: center;
   
            & input{
               padding: 5px 10px;
               border-radius: 5px;
               border-top-right-radius: 0;
               border-bottom-right-radius: 0;
               border: solid #F3F5F7 1px;
               outline: none;
            }
   
            & button{
               padding: 5px;
               border-radius: 5px;
               border: solid #F3F5F7 1px;
               border-top-left-radius: 0;
               border-bottom-left-radius: 0;
               background-color: #F3F5F7;
            }
         }
      }
   }

   & .search-components{
      display: flex;
      align-self: center;
      justify-content: center;
      padding-top: 50px;
   
      & #search{
         width: 100%;
         max-width: 1290px;
         display: flex;
         justify-content: start;
         align-items: center;
         align-self: center;

         & input{
            width: 100%;
            max-width: 500px;
            padding: 13px 10px;
            border-radius: 5px;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            border: solid #EBEBEB 1px;
            outline: none;
            background-color: #EBEBEB;
         }

         & button{
            padding: 13px;
            border-radius: 5px;
            border: solid #EBEBEB 1px;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            background-color: #EBEBEB;
         }
      }
   }
   
   & #components{
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 30px;
      padding: 50px 10px;

      & .index-span{
         width: 100%;
         max-width: 1080px;
         font-size: 30px;
         font-weight: 600;
         align-self: center;
      }

      & .components-container{
         width: 100%;
         max-width: 1080px;
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
         gap: 30px;
         align-self: center;
         justify-content: center;

         & .components-items{
            width: 340px;
            min-width: 300px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            border-radius: 5px;
            box-shadow: 0px 0px 7px #00000020;
            position: relative;
            transition: transform .3s ease;
            overflow: hidden;
            justify-content: space-between;

            & img {
               width: 100%;
               height: 280px;
               background-color: lightgrey;
               overflow: hidden;
               border-bottom: 1px solid lightgrey;
            }

            & .cmp-name{
               font-size: 15px;
               font-weight: 600;
               padding: 5px 10px;
            }
            
            & .cmp-description{
               font-size: 15px;
               padding: 5px 10px;
               max-height: 80px;
               overflow: hidden;
            }

            & .cmp-link{
               text-align: center;
               padding: 10px;
               background-color: #FFFFFF;
               transition: .3s ease;

               &:hover{
                  color: #277EFF;
               }
            }

            &:hover{
               transform: translateY(-5px);
            }
         }
      }
   }

   & #viewComponent{
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: start;
      padding: 50px 10px;
      border-bottom: solid #EBEBEB 1px;

      & .view-component-container{
         width: 100%;
         display: flex;
         justify-content: center;
         gap: 50px;
         flex-wrap: wrap;

         & .component-img{
            width: 100%;
            max-width: 400px;
            min-width: 340px;
            height: 400px;
            background-color: #EBEBEB;
            border-radius: 5px;
            overflow: hidden;
            box-shadow: 0px 0px 7px #00000020;
         }

         & .component-info-container{
            max-width: 400px;
            min-width: 340px;
            display: flex;
            flex-direction: column;
            gap: 20px;

            & h3{
               font-size: 20px;
               font-weight: 600;
            }

            & span{
               font-size: 15px;
            }

            & p{
               font-size: 15px;
            }

            & ul{
               display: flex;
               flex-direction: column;
               gap: 10px;

               & li{
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  gap: 20px;

                  & span:nth-child(1){
                     font-weight: 600;
                  }
               }
            }

            & .add-to-wish{
               width: 100%;
               padding: 12px 10px;
               font-weight: 500;
               color: #F3F5F7;
               background-color: #277EFF;
               border: solid #277EFF15 1px;
               border-radius: 5px;
               cursor: pointer;
            }
         }
      }
   }

   & .view-component-more-info-container{
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 50px 10px;
      border-bottom: solid #EBEBEB 1px;

      & .view-component-more-info-list-ul{
         width: 100%;
         max-width: 850px;
         min-width: 340px;

         display: flex;
         flex-direction: column;
         gap: 10px;

         & li{
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px;

            & h3{
               font-size: 20px;
               font-weight: 600;
            }
            
            & span:nth-child(1){
               font-weight: 600;
            }
         }
      }
   }

   & #CommentAndSurvey{
      display: flex;
      justify-content: center;
      align-items: start;
      flex-direction: row;
      flex-wrap: wrap;
      padding: 50px 10px;
      gap: 50px;
      
      & #comment{
         width: 100%;
         max-width: 400px;
         display: flex;
         flex-direction: column;
         gap: 15px;

         & .index-comment{
            font-size: 20px;
            font-weight: 500;
         }

         & #commentForm{
            display: flex;
            flex-direction: row;
            gap: 5px;

            & input{
               width: 100%;
               max-width: 500px;
               padding: 13px 10px;
               border-radius: 5px;
               border: solid #EBEBEB 1px;
               outline: none;
               background-color: #EBEBEB;
            }
   
            & button{
               padding: 13px;
               color: #F3F5F7;
               background-color: #277EFF;
               border: solid #277EFF15 1px;
               border-radius: 5px;
            }
         }

         & .comments-container{
            display: flex;
            flex-direction: column;
            gap: 10px;

            & .comment-item-container{
               display: flex;
               flex-direction: column;
               gap: 5px;
               padding: 10px;
               border-radius: 5px;
               border: solid gainsboro 1px;
               background-color: #F3F5F7;

               & .profile-and-date-container{
                  display: flex;
                  flex-direction: row;
                  justify-content: space-between;
                  border-bottom: solid #DDDDDD 1px;
                  padding: 0 0 5px 0;

                  & .profile-container{
                     display: flex;
                     justify-content: start;
                     align-items: center;
                     gap: 10px;

                     & img{
                        width: 35px;
                        height: 35px;
                        background-color: #EBEBEB;
                        border: solid #EBEBEB 1px;
                        border-radius: 50px;
                        overflow: hidden;
                     }
                  }

                  & .date-span{
                     font-size: 12px;
                  }
                  
                  
               }
               
               & .comment-item-text{
                    max-height: 150px;
                    overflow: auto;
               }
            }
         }
      }

      & #surveyContainer{
         width: 100%;
         max-width: 400px;
         display: flex;
         flex-direction: column;
         gap: 20px;
         padding: 15px 30px;
         background-color: #FFFFFF;
         border-radius: 5px;
         overflow: hidden;
         box-shadow: 0px 0px 7px #00000020;

         & .index-span{
            font-size: 18px;
            font-weight: 600;
         }

         & p{
            font-size: 15px;
         }

         & .options-container{
            display: flex;
            justify-content: center;
            gap: 30px;

            & .emoji-container{
               display: flex;
               flex-direction: column;
               justify-content: center;
               align-items: center;
               gap: 5px;

               & .emoji{
                  padding: 10px;
                  background-color: #FFF2D9;
                  border: solid #F5D69A 2px;
                  border-radius: 5px;
                  cursor: pointer;

                  filter: grayscale(100%);
                  opacity: .6;
                  transition: all .2s ease;

                  &:hover {
                      transform: scale(1.15);
                      filter: grayscale(0%);
                  }
               }

               & .emoji.selected {
                   filter: grayscale(0%);
                   opacity: 1;
               }
            }
         }
      }
   }

   & #about{
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;

      & .about-component{
         display: flex;
         flex-direction: column;
         gap: 20px;
         
         & h2{
            font-size: 35px;
            font-weight: 800;
            align-self: center;
            text-align: center;
         }

         & h3{
            font-size: 25px;
            font-weight: 500;
            align-self: center;
         }

         & span{
            width: 100%;
            max-width: 850px;
            font-size: 18px;
            font-weight: 600;
            align-self: center;
         }

         & p{
            width: 100%;
            max-width: 850px;
            font-size: 18px;
            align-self: center;
         }
      }

      & .about-container{
         width: 100%;
         background-image: url('../image/banner-03-30.png');
         background-size: cover;
         background-position: center;
         text-align: center;
         padding: 50px 10px;

         & h2, h3, span, p{
            color: #F3F5F7;
         }
         
         & p{
            max-width: 750px;
         }
      }

      & .story-container{
         padding: 50px 10px;

         & h3{
            text-align: center;
         }
         
         & p{
            max-width: 750px;
         }
      }

      & .todo-container{
         padding: 50px 10px;

         & .todo-list-container{
            width: 100%;
            max-width: 750px;
            align-self: center;
            background-color: #00800008;
            border: 1px solid #008000;
            border-radius: 5px;
            padding: 15px;
            display: flex;
            flex-direction: column;
            gap: 15px;

            & h3{
               font-size: 25px;
               font-weight: 500;
               align-self: unset;
            }
   
            & p{
               width: 100%;
               font-size: 18px;
               align-self: unset;
            }
         }
      }

      & .technologies-container{
         padding: 50px 10px;
         background-color: #66339910;
      
         & p{
            width: 100%;
            max-width: 650px;
            text-align: center;
         }
         
         & ul{
            display: flex;
            width: 100%;
            max-width: 850px;
            align-self: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 30px;

            & li{
               padding: 10px 15px;
               border-radius: 5px;

               &:nth-child(1){
                  background-color: #ff000015;
                  border: 1px solid #ff0000;
               }

               &:nth-child(2){
                  background-color: #0000ff15;
                  border: 1px solid #0000ff;
               }

               &:nth-child(3){
                  background-color: #fd700015;
                  border: 1px solid #fd7000;
               }

               &:nth-child(4){
                  background-color: #00800015;
                  border: 1px solid #008000;
               }

               &:nth-child(5){
                  background-color: #66339915;
                  border: 1px solid #663399;
               }

               &:nth-child(6){
                  background-color: #ff149315;
                  border: 1px solid #ff1493;
               }
            }
         }
      }

      & .objective-container{
         padding: 50px 10px;
         border-bottom: 1.5px solid #cccccc;

         & p{
            max-width: 750px;
         }

         & span{
            max-width: 750px;
         }
      }

      & .infographic-container{
         padding: 50px 10px;
         width: 100%;
         display: flex;
         justify-content: center;
         align-items: center;
         
         & img{
            width: 100%;
            max-width: 800px;
            min-width: 340px;
         }
      }

      & .reflection-container{
         width: 100%;
         padding: 50px 10px;
         border-top: 1.5px solid #cccccc;

         & p{
            padding: 10px;
            border-radius: 7px;
            border-left: 2px solid #2268c6;
            background-color: #e7f0fb;
         }
      }
      
      & .notice-container{
         padding: 50px 10px;
         background-color: #F5F5F5;

         & p{
            max-width: 750px;
         }

         & .important-container{
            width: 100%;
            max-width: 750px;
            align-self: center;
            background-color: #ff000015;
            border: 1px solid #ff0000;
            border-radius: 5px;
            padding: 15px;
            display: flex;
            flex-direction: column;
            gap: 15px;

            & h3{
               font-size: 25px;
               font-weight: 500;
               align-self: unset;
            }
   
            & p{
               width: 100%;
               font-size: 18px;
               align-self: unset;
            }
         }
      }

      & .team-container{
         padding: 50px 10px;
        
         & p{
            text-align: center;
            max-width: 600px;
         }

         & .team-members-container{
            width: 100%;
            display: flex;
            flex-direction: row;
            gap: 25px;
            justify-content: center;
            flex-wrap: wrap;

            & .team-member{
               width: 150px;
               display: flex;
               flex-direction: column;
               justify-content: center;
               align-items: center;
               gap: 15px;
               overflow: hidden;
               background-color: #F5F5F5;
               padding: 10px;
               border-radius: 5px;
               
               & img{
                  width: 100px;
                  height: 100px;
                  border-radius: 50%;
                  overflow: hidden;
                  border: solid 1px #F5F5F5;
               }

               & span{
                  display: flex;
                  justify-content: center;
                  text-align: center;
                  font-size: 15px;
                  font-weight: 400;
               }
            }
         }
      }
   }

   & #profileContainer{
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 20px;
      padding: 50px;

      & h6, h5{
         font-weight: 600;
         font-size: 20px;
      }

      & #cerrarSession{
         width: 100%;
         max-width: 170px;
         text-align: center;
         padding: 7px;
         border-radius: 5px;
         background-color: #FFD9D9;
         color: #FF0000;
         font-weight: 600;
      }

      & .navbar-nav{
         display: flex;
         justify-content: start;
         align-items: center;
         gap: 25px;
      }

      & #savedItemsContainer{
         width: 100%;
         min-height: 340px;
         display: flex;
         flex-direction: column;
         gap: 20px;
         
         & .seved-item{
            width: 100%;
            max-width: 460px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: row;
            gap: 10px;
            box-shadow: 0 0px 7px 5px #00000010;
            padding: 10px;
            border-radius: 10px;

            & img{
               min-width: 140px;
               height: 140px;
               background-color: #D9D9D9;
               border-radius: 5px;
            }

            & .seved-item-info{
               width: 100%;
               display: flex;
               flex-direction: column;
               gap: 5px;

               & span{
                  font-weight: 500;
                  font-size: 15px;
               }

               & p{
                  width: 100%;
                  height: 35px;
                  font-size: 14px;
                  overflow: hidden;
               }

               & .cmp-link{
                  width: 100%;
                  padding: 7px;
                  background-color: #DFECFF;
                  color: #277EFF;
                  border-radius: 5px;
                  text-align: center;
               }

               & .dlt-cmp-btn{
                  width: 100%;
                  padding: 7px;
                  background-color: #FFD9D9;
                  color: #FF0000;
                  border-radius: 5px;
                  text-align: center;
                  border: none;
                  cursor: pointer;
               }
            }
         }
      }

      & #profileForm{
         width: 100%;
         max-width: 360px;
         display: flex;
         flex-direction: column;
         gap: 20px;

         & #customerEmail{
            width: 100%;
            padding: 15px;
            border-radius: 7px;
            background-color: #D9D9D950;
            border: 1px solid #cccccc;
         }

         & input{
            width: 100%;
            padding: 15px;
            border-radius: 7px;
            border: 1px solid #cccccc;
         }

         & button{
            width: 100%;
            padding: 15px;
            border-radius: 7px;
            background-color: #277EFF;
            border: none;
            color: #FFFFFF;
            font-weight: 600;
            cursor: pointer;
         }
      }
   }

   & #deleteAccountContainer{
      width: 100%;
      background-color: #FFD9D9;
      padding: 50px;
      display: flex;
      flex-direction: column;
      gap: 50px;

      & p{
         width: 100%;
         max-width: 650px;
         font-weight: 600;
         font-size: 15px;
         color: #FF0000;
      }

      & #deleteAccount{
         width: 100%;
         max-width: 360px;
         display: flex;
         flex-direction: column;
         gap: 20px;

         & button{
            width: 100%;
            padding: 15px;
            border-radius: 7px;
            background-color: #FF0000;
            border: none;
            color: #FFFFFF;
            font-weight: 600;
            cursor: pointer;
         }
      }
   }
}

footer {
   width: 100%;
   display: flex;
   flex-direction: column;

   & a{
      &:hover{
         text-decoration: underline;
      }
   }

   & .footer-container{
      width: 100%;
      min-height: 150px;
      padding: 30px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 30px;
      align-items: center;
      background-color: #05104C;

      & a{
         &:hover{
            text-decoration: underline;
         }
      }

      & span, a{
         color: #F3F5F7;
         text-decoration: none;
      }

      & .footer-navbar-nav{
         display: flex;
         gap: 15px;
         flex-wrap: wrap;
      }
   }

   & .footer-note{
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 15px;
      padding: 30px 10px;
      text-align: center;
      background-color: #030912;

      & p{
         width: 100%;
         max-width: 600px;
         color: #F3F5F7;
         font-size: 14px;

         & a{
            color: #F3F5F7;
         }

         & .nav-link{
            display: ruby-base;
            font-size: 14px;
         }
      }
   }
}
/***** End All of you web style *****/

@media only screen and (max-width: 750px) {
   main{
   
      & #heroContainer{
         justify-content: center;
         padding: 10px;
   
         & .hero-info-container{        
            & h1 {
               text-align: center;
               font-size: 30px;
            }
         
            & p{
               text-align: center;
               font-size: 15px;
            }
   
            & #search{
               justify-content: center;
            }
         }
      }

      & #components{
         & .index-span{
            text-align: center;
         }
      }

      & #profileContainer, & #deleteAccountContainer{
         padding: 10px;
      }
   }
}

@media only screen and (max-width: 999px) {
   header{
      & #brand{
         display: flex;
         align-items: center;
         justify-content: start;
         gap: 10px;
      }

      & .onclick-opennav-btn{
         display: unset;
      }
   
      & nav{
         width: 0;
         height: 100vh;
         align-items: start;
         justify-content: start;
         flex-direction: column;
         padding: 0;
         position: absolute;
         background-color: #030912;
         top: 0;
         right: 0;
         overflow: hidden;
         gap: 20px;
         transition: width .3s ease;

         & .onclick-closenav-btn{
            display: unset;
         }
         
         & #search{
            width: 100%;
         }
   
         & .navbar-nav{
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: start;
            
            & .nav-item{
               width: 100%;
               text-align: left;
               
               & .nav-link{
                  min-height: 40px;
                  display: inline-flex;
                  align-items: center;
                  width: 100%;
                  padding: 5px 10px;
                  color: #F3F5F7;

                  &:hover{
                     border-radius: 5px;
                     background-color: #6715C815;
                  }
               }
            }
   
            & .auth-link{
               & .nav-link{
                  display: flex;
                  justify-content: center;
               }
            }
         }
      }
   }
}

/***** COMPONENT MODAL MESSAGE *****/
#modalMessageContainer{
    width: 100%;
    height: 100vh;
    background-color: var(--modal-bck-color);
    position: fixed;
    top: 0;
    left: 0;
    backdrop-filter: blur(.9px);
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 100;
    padding: 10px;

    & .--modal-error-msg{
        width: 340px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: end;
        gap: 15px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 3px 10px 8px #00000007;
        padding: 15px;

        & span{
            width: 100%;
            display: flex;
            justify-content: flex-start;
            gap: 5px;
            font-size: 20px;
            color: #ff0000;
            font-weight: 500;
            & i{ font-size: 20px; color:  #ff0000; }
        }

        & button{
            padding: 7px 35px;
            cursor: pointer;
            font-size: 14px;
        }
    }

    & .--modal-scss-msg{
        width: 340px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: end;
        gap: 15px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 3px 10px 8px #00000007;
        padding: 15px;

        & span{
            width: 100%;
            display: flex;
            justify-content: flex-start;
            gap: 5px;
            font-size: 20px;
            color: #10b65e;
            font-weight: 500;
            & i{ font-size: 20px; color: #10b65e; }
        }

        & button{
            padding: 7px 35px;
            cursor: pointer;
            font-size: 14px;
        }
    }
}
/*****  COMPONENT MODAL MESSAGE *****/

/***  TOAST MESSAGE  ***/
#toastContainer{
   display: flex;
   flex-direction: column;
   gap: 10px;
   position: fixed;
   bottom: 10px;
   left: 10px;
   
   & .toast{
      width: 100%;
      max-width: 420px;
      min-width: 340px;
      padding: 13px 10px;
      
      display: flex;
      justify-content: start;
      align-items: center;
      gap: 10px;
      
      background-color: #F8F8F8;
      box-shadow: 0px 0px 5px 2px #00000015;
      border-radius: 10px;
      
      & .toast-icon{
         & i{
            color: #1E1E1E;
            font-weight: 500;
            font-size: 14px;
         }
      }
      
      & .toast-message{
         color: #1E1E1E;
         font-weight: 500;
         font-size: 14px;
      }
   }
   
   & .fade-out {
     opacity: 0;
     transform: translateY(-10px);
     transition: all 0.3s ease;
   }
   
   /* Remove this if you don't want to customize the default message */
   & .toast-default{
      background-color: #F8F8F8;
      
      & .toast-icon{
         & i{
            color: #1E1E1E;
         }
      }
      
      & .toast-message{
         color: #1E1E1E;
      }
   }
   /* Remove this if you don't want to customize the default message */
   
   & .toast-informative{
      background-color: #E5F3FE;
      
      & .toast-icon{
         & i{
            color: #3267D1;
         }
      }
      
      & .toast-message{
         color: #3267D1;
      }
   }
   
   & .toast-success{
      background-color: #E2F9E7;
      
      & .toast-icon{
         & i{
            color: #15692B;
         }
      }
      
      & .toast-message{
         color: #15692B;
      }
   }
   
   & .toast-warning{
      background-color: #FFF4EE;
      
      & .toast-icon{
         & i{
            color: #E47919;
         }
      }
      
      & .toast-message{
         color: #E47919;
      }
   }
   
   & .toast-error{
      background-color: #FDEFEE;
      
      & .toast-icon{
         & i{
            color: #C24040;
         }
      }
      
      & .toast-message{
         color: #C24040;
      }
   }
}