.popup__content { display: flex; flex-direction: column; gap: 24px; } .popup__title { font-style: normal; font-weight: 400; font-size: 22px; line-height: 130%; /* identical to box height, or 29px */ margin: 0; /* App/White */ color: #ffffff; } .logo__popup { height: auto; width: 100%; margin-bottom: 48px; object-fit: cover; } .logo__popup_ex { display: none; } .popup__input { padding: 5px 0px; border-radius: 12px; background: #404040; height: 76px; font-style: normal; font-weight: 300; font-size: 38px; line-height: 46px; /* identical to box height */ text-align: center; letter-spacing: 0.3em; /* App/White */ box-sizing: border-box; border: none; outline: none; color: #ffffff; } @media screen and (max-width: 639px) { .logo__popup { margin-bottom: 40px; } .logo__popup_ex { display: block; height: auto; width: 100%; margin-bottom: 24px; object-fit: cover; } .popup__input { height: 48px; font-size: 30px; } .popup__title { font-size: 16px; width: 78%; } .popup__content { gap: 16px; } } .loader-container { width: 494px; box-sizing: border-box; background-color: #262626; border: 1px solid #404040; border-radius: 32px; padding: 45px 0 51px 0; display: flex; flex-direction: column; gap: 51px; align-items: center; } .loading-caption { font-style: normal; font-weight: 400; font-size: 22px; line-height: 130%; /* identical to box height, or 29px */ text-align: center; /* Landing/White */ color: #ebebeb; } .loader { width: 106px; height: 106px; border-radius: 50%; display: inline-block; position: relative; background: conic-gradient( from 135deg at 50% 50%, rgba(255, 255, 255, 0) -6.26deg, #ffffff 314.83deg, rgba(255, 255, 255, 0) 353.74deg, #ffffff 674.83deg ); box-sizing: border-box; animation: rotation 1s linear infinite; } .loader::after { content: ""; box-sizing: border-box; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; border-radius: 50%; background: #262626; } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }