.popupMain { position: fixed; top: 0; bottom: 0; left: 0; right: 0; display: flex; flex-direction: column; overflow: auto; background: rgba(0,0,0,0.5); z-index: 20; backdrop-filter: blur(10px); align-items: center; padding: 25px 10px; } .popupMainInside { width: 100%; display: flex; flex-direction: column; grid-gap: 0px; align-items: center; } .popupMainInsideWrapper { width: 100%; max-width: 500px; display: flex; flex-direction: column; } .popupMainInsideWrapperBox { display: flex; flex-direction: column; grid-gap: 0px; background: #ffffff; border-radius: 4px; overflow: hidden; box-shadow: 0 0 4px 0 rgb(0,0,0,0.1); } .popupMainInsideWrapperBoxTop { display: flex; flex-direction: row; grid-gap: 10px; justify-content: space-between; padding: 15px 25px; border-bottom: solid 1px rgba(0,0,0,0.1); } .popupMainInsideWrapperBoxMid { display: flex; flex-direction: column; grid-gap: 10px; padding: 15px 25px; flex-grow: 1; } .popupMainInsideWrapperBoxBottom { display: flex; flex-direction: column; grid-gap: 15px; padding: 15px; border-top: solid 1px rgba(0,0,0,0.1); color: rgba(0,0,0,0.5); text-align: center; font-weight: 400; font-size: 16px; } .popupMainInsideWrapperBoxTopText { font-size: 24px; font-weight: bold; flex-grow: 1; } .btnMain.popupMainInsideWrapperBoxTopBtn { font-size: 18px; background: rgba(76,130,163,0); color: rgba(0,0,0,0.5); } .btnMain.tabsMainBottomPaneLoginBtn { width: 100%; max-width: 250px; align-self: center; background: linear-gradient(rgba(255,255,255,0.1), rgba(255,255,255,0.1)), linear-gradient(#4c82a3, #4c82a3); } .btnMain.tabsMainBottomPaneLoginBtn:hover { background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,0.2)), linear-gradient(#4c82a3, #4c82a3); } .popupMain.popupMainCenter { justify-content: center; } .popupMainInsideWrapperBoxMidPic { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 25px 0; } .popupMainInsideWrapperBoxMidPicImg { width: 100%; max-width: 65px; } .popupMainInsideWrapperBoxMidRelays { display: flex; flex-direction: row; grid-gap: 15px; flex-wrap: wrap; } .popupMainInsideWrapperBoxMidRelaysRelay { background: #ffffff; padding: 4px; border-radius: 4px; border: solid 1px rgba(0,0,0,0.1); display: flex; flex-direction: row; grid-gap: 5px; overflow: hidden; flex-grow: 1; position: relative; justify-content: space-between; } .popupMainInsideWrapperBoxTopLoadingBar { transition: ease 0.4s; width: 50%; height: 24px; background: #8bca8c; border-radius: 2px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; } .popupMainInsideWrapperBoxMidRelaysRelayTextWrapper { display: flex; flex-direction: row; justify-content: start; align-items: center; grid-gap: 10px; color: #434343; padding: 0 5px; flex-grow: 1; } .popupMainInsideWrapperBoxMidRelaysRelayText { font-size: 12px; display: flex; flex-direction: column; justify-content: center; align-items: start; } .popupMainInsideWrapperBoxMidRelaysRelayIcon { } .popupMainInsideWrapperBoxMidRelaysRelay.popupMainInsideWrapperBoxMidRelaysRelaySuccess { background: #9fe6a0; } .popupMainInsideWrapperBoxMidRelaysRelay.popupMainInsideWrapperBoxMidRelaysRelaySuccess > :nth-child(1) { color: #434343; } .popupMainInsideWrapperBoxMidRelaysRelay.popupMainInsideWrapperBoxMidRelaysRelayFail { background: #ff7f68; } .popupMainInsideWrapperBoxMidRelaysRelay.popupMainInsideWrapperBoxMidRelaysRelayFail > :nth-child(1) { color: white; } .popupMainInsideWrapperBoxTopLoading { } .popupMainInsideWrapperBoxTopLoadingTex { position: absolute; font-size: 12px; line-height: 1; width: 100%; text-align: center; color: rgba(0,0,0,0.5); } .popupMainInsideWrapperBoxTopLoadingBarDot { width: 12px; height: 12px; background: rgba(255,255,255,0.25); border-radius: 100px; } .popupMainInsideWrapperBoxMidRelaysRelayPaid { width: 100%; max-width: 20px; /*background: #72ab73;*/ border-radius: 3px; color: rgba(67,67,67,0.35); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 5px; font-size: 12px; outline: solid 1px rgba(0,0,0,0.1); }