#toastBoxInetum { position: absolute; bottom: -700px; right: 1px; display: flex; align-items: flex-end; flex-direction: column; overflow: hidden; padding: 20px; } .toastInetum{ display: flex; align-items: center; position: relative; width: 400px; height: 80px; background: #fff; font-weight: 500; margin: 15px 0; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); transform: translateX(100%); animation: moveleft 0.4s linear forwards; } .toastInetum i{ margin: 0 20px; font-size: 35px; color: var(--mineral-green); } .toastInetum.error-proccess i{ color: var(--primary-red); } .toastInetum.warning-proccess i{ color: #cca123; } .toastInetum::after{ content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 5px; background: var(--mineral-green); animation: anim 5s linear forwards; } @keyframes moveleft { 100%{ transform: translateX(0); } } @keyframes anim { 100%{ width: 0; } } .toastInetum.error-proccess::after{ background: var(--primary-red); } .toastInetum.warning-proccess::after{ background: #cca123; } .container-candidato{ width: 80%; margin: 0 auto; } .tab_trigger ul{ padding: 0; margin: 0; list-style: none; } .tab_trigger ul li{ display: inline-block; margin-right: 2px; border-radius: 12px 12px 0 0; background-color: var(--blue-one); color: white; padding: 8px 25px; cursor: pointer; transition: all 0.3s; font-weight: 700; } .tab_trigger ul li:hover, .tab_trigger ul li.active{ background-color: var(--mineral-green); } .tab_content_box{ display: none; font-size: 20px; color: #000; background-color: var(--grey); padding: 25px; border-radius: 0 12px 12px 12px; } .tab_content_box:first-child{ display: block; } #modalPageCandidato{ align-items: center; justify-content: center; position: fixed; top: 14%; left: 50%; transform: translate(-50%, -50%); padding: 10px 15px 10px 15px; background: var(--mineral-green); color: white; font-weight: 500; border-radius: 40px; transition: all 0.3s ease; }