body.stop-scrolling { height: 100%; overflow: hidden; } .sweet-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1700; display: none; background-color: rgba(0, 0, 0, 0.4); } .sweet-alert { position: fixed; top: 50%; left: 50%; z-index: 1700; display: none; width: 478px; padding: 20px 30px; margin-top: -200px; margin-left: -269px; overflow: hidden; text-align: center; background-color: #fff; border-radius: 0.215rem; } @media (max-width: 767.98px) { .sweet-alert { right: 1.0715rem; left: 1.0715rem; width: auto; margin-right: 0; margin-left: 0; } } .sweet-alert .form-group { display: none; } .sweet-alert .form-group .sa-input-error { display: none; } .sweet-alert.show-input .form-group { display: block; } .sweet-alert .sa-confirm-button-container { position: relative; display: inline-block; } .sweet-alert .la-ball-fall { position: absolute; top: 50%; left: 50%; margin-top: -9px; margin-left: -27px; visibility: hidden; opacity: 0; } .sweet-alert button[disabled] { cursor: default; opacity: .6; } .sweet-alert button.confirm[disabled] { color: transparent; } .sweet-alert button.confirm[disabled] ~ .la-ball-fall { visibility: visible; opacity: 1; transition-delay: 0s; } .sweet-alert .sa-icon { position: relative; box-sizing: content-box; width: 80px; height: 80px; margin: 20px auto; border: 4px solid gray; border-radius: 50%; } .sweet-alert .sa-icon.sa-error { border-color: #ff4c52; } .sweet-alert .sa-icon.sa-error .sa-x-mark { position: relative; display: block; } .sweet-alert .sa-icon.sa-error .sa-line { position: absolute; top: 37px; display: block; width: 47px; height: 5px; background-color: #ff4c52; border-radius: 2px; } .sweet-alert .sa-icon.sa-error .sa-line.sa-left { left: 17px; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .sweet-alert .sa-icon.sa-error .sa-line.sa-right { right: 16px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .sweet-alert .sa-icon.sa-warning { border-color: #eb6709; } .sweet-alert .sa-icon.sa-warning .sa-body { position: absolute; top: 10px; left: 50%; width: 5px; height: 47px; margin-left: -2px; background-color: #eb6709; border-radius: 2px; } .sweet-alert .sa-icon.sa-warning .sa-dot { position: absolute; bottom: 10px; left: 50%; width: 7px; height: 7px; margin-left: -3px; background-color: #eb6709; border-radius: 50%; } .sweet-alert .sa-icon.sa-info { border-color: #0bb2d4; } .sweet-alert .sa-icon.sa-info::before { position: absolute; bottom: 17px; left: 50%; width: 5px; height: 29px; margin-left: -2px; content: ""; background-color: #0bb2d4; border-radius: 2px; } .sweet-alert .sa-icon.sa-info::after { position: absolute; top: 19px; width: 7px; height: 7px; margin-left: -3px; content: ""; background-color: #0bb2d4; border-radius: 50%; } .sweet-alert .sa-icon.sa-success { border-color: #11c26d; } .sweet-alert .sa-icon.sa-success::before, .sweet-alert .sa-icon.sa-success::after { position: absolute; width: 60px; height: 120px; content: ""; background: #fff; border-radius: 50%; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .sweet-alert .sa-icon.sa-success::before { top: -7px; left: -33px; border-radius: 120px 0 0 120px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 60px 60px; transform-origin: 60px 60px; } .sweet-alert .sa-icon.sa-success::after { top: -11px; left: 30px; border-radius: 0 120px 120px 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 60px; transform-origin: 0 60px; } .sweet-alert .sa-icon.sa-success .sa-placeholder { position: absolute; top: -4px; left: -4px; z-index: 2; box-sizing: content-box; width: 80px; height: 80px; border: 4px solid rgba(17, 194, 109, 0.2); border-radius: 50%; } .sweet-alert .sa-icon.sa-success .sa-fix { position: absolute; top: 8px; left: 27px; z-index: 1; width: 7px; height: 90px; background-color: #fff; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .sweet-alert .sa-icon.sa-success .sa-line { position: absolute; z-index: 2; display: block; height: 5px; background-color: #11c26d; border-radius: 2px; } .sweet-alert .sa-icon.sa-success .sa-line.sa-tip { top: 46px; left: 14px; width: 25px; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .sweet-alert .sa-icon.sa-success .sa-line.sa-long { top: 38px; right: 8px; width: 47px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .sweet-alert .sa-icon.sa-custom { background-repeat: no-repeat; background-position: center center; background-size: contain; border: none; border-radius: 0; } .sweet-alert .btn-default.focus, .sweet-alert .btn-default:focus { border-color: #e4eaec; box-shadow: none; } .sweet-alert .btn-success.focus, .sweet-alert .btn-success:focus { border-color: #11c26d; box-shadow: none; } .sweet-alert .btn-info.focus, .sweet-alert .btn-info:focus { border-color: #0bb2d4; box-shadow: none; } .sweet-alert .btn-danger.focus, .sweet-alert .btn-danger:focus { border-color: #ff4c52; box-shadow: none; } .sweet-alert .btn-warning.focus, .sweet-alert .btn-warning:focus { border-color: #eb6709; box-shadow: none; } .sweet-alert button::-moz-focus-inner { border: 0; } @-webkit-keyframes showSweetAlert { 0% { -webkit-transform: scale(0.7); transform: scale(0.7); } 45% { -webkit-transform: scale(1.05); transform: scale(1.05); } 80% { -webkit-transform: scale(0.95); transform: scale(0.95); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes showSweetAlert { 0% { -webkit-transform: scale(0.7); transform: scale(0.7); } 45% { -webkit-transform: scale(1.05); transform: scale(1.05); } 80% { -webkit-transform: scale(0.95); transform: scale(0.95); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes hideSweetAlert { 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(0.5); transform: scale(0.5); } } @keyframes hideSweetAlert { 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(0.5); transform: scale(0.5); } } @-webkit-keyframes slideFromTop { 0% { top: 0%; } 100% { top: 50%; } } @keyframes slideFromTop { 0% { top: 0%; } 100% { top: 50%; } } @-webkit-keyframes slideToTop { 0% { top: 50%; } 100% { top: 0%; } } @keyframes slideToTop { 0% { top: 50%; } 100% { top: 0%; } } @-webkit-keyframes slideFromBottom { 0% { top: 70%; } 100% { top: 50%; } } @keyframes slideFromBottom { 0% { top: 70%; } 100% { top: 50%; } } @-webkit-keyframes slideToBottom { 0% { top: 50%; } 100% { top: 70%; } } @keyframes slideToBottom { 0% { top: 50%; } 100% { top: 70%; } } .showSweetAlert { -webkit-animation: showSweetAlert .3s; animation: showSweetAlert .3s; } .showSweetAlert[data-animation=none] { -webkit-animation: none; animation: none; } .showSweetAlert[data-animation=slide-from-top] { -webkit-animation: slideFromTop .3s; animation: slideFromTop .3s; } .showSweetAlert[data-animation=slide-from-bottom] { -webkit-animation: slideFromBottom .3s; animation: slideFromBottom .3s; } .hideSweetAlert { -webkit-animation: hideSweetAlert .3s; animation: hideSweetAlert .3s; } .hideSweetAlert[data-animation=none] { -webkit-animation: none; animation: none; } .hideSweetAlert[data-animation=slide-from-top] { -webkit-animation: slideToTop .3s; animation: slideToTop .3s; } .hideSweetAlert[data-animation=slide-from-bottom] { -webkit-animation: slideToBottom .3s; animation: slideToBottom .3s; } @-webkit-keyframes animateSuccessTip { 0% { top: 19px; left: 1px; width: 0; } 54% { top: 19px; left: 1px; width: 0; } 70% { top: 37px; left: -8px; width: 50px; } 84% { top: 48px; left: 21px; width: 17px; } 100% { top: 45px; left: 14px; width: 25px; } } @keyframes animateSuccessTip { 0% { top: 19px; left: 1px; width: 0; } 54% { top: 19px; left: 1px; width: 0; } 70% { top: 37px; left: -8px; width: 50px; } 84% { top: 48px; left: 21px; width: 17px; } 100% { top: 45px; left: 14px; width: 25px; } } @-webkit-keyframes animateSuccessLong { 0% { top: 54px; right: 46px; width: 0; } 65% { top: 54px; right: 46px; width: 0; } 84% { top: 35px; right: 0; width: 55px; } 100% { top: 38px; right: 8px; width: 47px; } } @keyframes animateSuccessLong { 0% { top: 54px; right: 46px; width: 0; } 65% { top: 54px; right: 46px; width: 0; } 84% { top: 35px; right: 0; width: 55px; } 100% { top: 38px; right: 8px; width: 47px; } } @-webkit-keyframes rotatePlaceholder { 0% { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } 5% { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } 12% { -webkit-transform: rotate(-405deg); transform: rotate(-405deg); } 100% { -webkit-transform: rotate(-405deg); transform: rotate(-405deg); } } @keyframes rotatePlaceholder { 0% { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } 5% { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } 12% { -webkit-transform: rotate(-405deg); transform: rotate(-405deg); } 100% { -webkit-transform: rotate(-405deg); transform: rotate(-405deg); } } .animateSuccessTip { -webkit-animation: animateSuccessTip .75s; animation: animateSuccessTip .75s; } .animateSuccessLong { -webkit-animation: animateSuccessLong .75s; animation: animateSuccessLong .75s; } .sa-icon.sa-success.animate::after { -webkit-animation: rotatePlaceholder 4.25s ease-in; animation: rotatePlaceholder 4.25s ease-in; } @-webkit-keyframes animateErrorIcon { 0% { opacity: 0; -webkit-transform: rotateX(100deg); transform: rotateX(100deg); } 100% { opacity: 1; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); } } @keyframes animateErrorIcon { 0% { opacity: 0; -webkit-transform: rotateX(100deg); transform: rotateX(100deg); } 100% { opacity: 1; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); } } .animateErrorIcon { -webkit-animation: animateErrorIcon .5s; animation: animateErrorIcon .5s; } @-webkit-keyframes animateXMark { 0% { margin-top: 26px; opacity: 0; -webkit-transform: scale(0.4); transform: scale(0.4); } 50% { margin-top: 26px; opacity: 0; -webkit-transform: scale(0.4); transform: scale(0.4); } 80% { margin-top: -6px; -webkit-transform: scale(1.15); transform: scale(1.15); } 100% { margin-top: 0; opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes animateXMark { 0% { margin-top: 26px; opacity: 0; -webkit-transform: scale(0.4); transform: scale(0.4); } 50% { margin-top: 26px; opacity: 0; -webkit-transform: scale(0.4); transform: scale(0.4); } 80% { margin-top: -6px; -webkit-transform: scale(1.15); transform: scale(1.15); } 100% { margin-top: 0; opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } .animateXMark { -webkit-animation: animateXMark .5s; animation: animateXMark .5s; } @-webkit-keyframes pulseWarning { 0% { border-color: #f8d486; } 100% { border-color: #f8bb86; } } @keyframes pulseWarning { 0% { border-color: #f8d486; } 100% { border-color: #f8bb86; } } .pulseWarning { -webkit-animation: pulseWarning .75s infinite alternate; animation: pulseWarning .75s infinite alternate; } @-webkit-keyframes pulseWarningIns { 0% { background-color: #f8d486; } 100% { background-color: #f8bb86; } } @keyframes pulseWarningIns { 0% { background-color: #f8d486; } 100% { background-color: #f8bb86; } } .pulseWarningIns { -webkit-animation: pulseWarningIns .75s infinite alternate; animation: pulseWarningIns .75s infinite alternate; } @-webkit-keyframes rotate-loading { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotate-loading { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }