.loading-wrapper{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 200px);width:100%}.loader{width:100%;height:400px}.loader,.loader .container{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.loader .container{width:300px;height:-moz-fit-content;height:fit-content}.loader .container .coffee-header{padding:10px;width:100%;height:80px;display:flex;justify-content:space-between;align-items:center;background-color:#ddcfcc;border-radius:10px}.loader .container .coffee-header__buttons{width:25px;height:25px;background-color:#282323;border-radius:50%;box-shadow:40px 0 0 0 #282323}.loader .container .coffee-header__buttons:before{content:"";width:8px;height:8px;display:block;transform:translate(100%,25px);background-color:#615e5e;box-shadow:40px 0 0 0 #615e5e}.loader .container .coffee-header__display{width:50px;height:50px;display:block;border-radius:50%;background-color:#b3967f;border:5px solid #896d58;box-sizing:border-box}.loader .container .coffee-header__details{width:8px;margin-left:16px;height:20px;align-self:flex-start;background-color:#9b9091;box-shadow:-12px 0 0 #9b9091,-24px 0 0 #9b9091}.loader .container .coffee-medium{width:90%;height:160px;position:relative;background-color:#bcb0af}.loader .container .coffee-medium:before{content:"";width:90%;height:100px;background-color:#776f6e;position:absolute;bottom:0;left:5%;border-radius:20px 20px 0 0}.loader .container .coffe-medium__exit{width:60px;height:20px;position:absolute;top:0;left:calc(50% - 30px);background-color:#231f20}.loader .container .coffe-medium__exit:before{content:"";width:50px;height:20px;border-radius:0 0 50% 50%;position:absolute;bottom:-20px;left:calc(50% - 25px);background-color:#231f20}.loader .container .coffe-medium__exit:after{content:"";width:10px;height:10px;position:absolute;bottom:-30px;left:calc(50% - 5px);background-color:#231f20}.loader .container .coffee-medium__arm{width:70px;height:20px;position:absolute;top:15px;right:25px;background-color:#231f20}.loader .container .coffee-medium__arm:before{content:"";width:15px;height:5px;position:absolute;top:7px;left:-15px;background-color:#9e9495}.loader .container .coffee-medium__cup{width:80px;height:47px;position:absolute;bottom:0;left:calc(50% - 40px);background-color:#fff;border-radius:0 0 70px 70px/0 0 110px 110px}.loader .container .coffee-medium__cup:after{content:"";width:20px;height:20px;position:absolute;top:6px;right:-13px;border:5px solid #fff;border-radius:50%}.loader .container .coffee-medium__liquid{width:6px;height:63px;position:absolute;top:50px;left:calc(50% - 3px);background-color:transparent;overflow:hidden}.loader .container .coffee-medium__liquid:before{transform:translateY(-100%);content:"";width:100%;height:100%;display:block;background-color:#74372b;animation:liquid 5s linear 1.5s infinite normal both}.loader .container .smoke{opacity:0;width:8px;height:20px;position:absolute;border-radius:5px;background-color:#b3aeae}.loader .container .smoke.one{bottom:30px;left:102px;animation:smoke 3s linear 5s infinite}.loader .container .smoke.two{bottom:40px;left:118px;animation:smoke 3s linear 4s infinite}.loader .container .smoke.three{bottom:40px;right:118px;animation:smoke 3s linear 7s infinite}.loader .container .smoke.four{bottom:30px;right:102px;animation:smoke 3s linear 6s infinite}.loader .container:after{content:"";width:95%;height:15px;background-color:#896d58;box-shadow:0 15px 0 5px #000;border-radius:10px}@keyframes smoke{0%{transform:translateY(0);opacity:0}40%{opacity:.5}50%{transform:translateY(-10px);opacity:.3}80%{opacity:.5}to{transform:translateY(-30px);opacity:0}}@keyframes liquid{10%{transform:translateY(0)}90%{transform:translateY(0)}to{transform:translateY(100%)}}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:200px}.coffee-cup{position:relative;width:80px;height:80px;margin-bottom:20px}.coffee-cup-body{position:absolute;bottom:0;width:50px;height:60px;background:#fff;border-radius:0 0 25px 25px;box-shadow:0 0 0 6px #896d58}.handle{position:absolute;right:-20px;top:20px;width:20px;height:30px;border:6px solid #896d58;border-left:none;border-radius:0 20px 20px 0}.coffee{bottom:0;height:0;background:#896d58;border-radius:0 0 25px 25px;animation:fill 2s ease-in-out infinite}.coffee,.steam{position:absolute;width:100%}.steam{top:-30px;display:flex;justify-content:center;gap:5px}.steam span{position:relative;width:8px;height:20px;background:#d6d6d6;border-radius:10px;animation:steam 1.5s ease-in-out infinite}.steam span:nth-child(2){animation-delay:.2s}.steam span:nth-child(3){animation-delay:.4s}.loading-text{font-size:1.2em;color:#896d58;margin-top:3rem;font-weight:500}@keyframes fill{0%{height:0}50%{height:80%}to{height:0}}@keyframes steam{0%{transform:translateY(0) scaleX(1);opacity:0}50%{transform:translateY(-20px) scaleX(1.5);opacity:1}to{transform:translateY(-40px) scaleX(1);opacity:0}}