­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ /* $gray_color: #ebebeb; $gray_color2: #666666; */ /* Animation example, for sl-spinners */ .animate-sl-spin { -moz-animation: sl-spin 2s infinite linear; -o-animation: sl-spin 2s infinite linear; -webkit-animation: sl-spin 2s infinite linear; animation: sl-spin 2s infinite linear; display: inline-block; } @-moz-keyframes sl-spin { 0% { -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -moz-transform: rotate(359deg); -o-transform: rotate(359deg); -webkit-transform: rotate(359deg); transform: rotate(359deg); } } @-webkit-keyframes sl-spin { 0% { -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -moz-transform: rotate(359deg); -o-transform: rotate(359deg); -webkit-transform: rotate(359deg); transform: rotate(359deg); } } @-o-keyframes sl-spin { 0% { -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -moz-transform: rotate(359deg); -o-transform: rotate(359deg); -webkit-transform: rotate(359deg); transform: rotate(359deg); } } @-ms-keyframes sl-spin { 0% { -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -moz-transform: rotate(359deg); -o-transform: rotate(359deg); -webkit-transform: rotate(359deg); transform: rotate(359deg); } } @keyframes sl-spin { 0% { -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -moz-transform: rotate(359deg); -o-transform: rotate(359deg); -webkit-transform: rotate(359deg); transform: rotate(359deg); } } .asl-toast { padding: 0 20px; } .asl-toast.rounded { border-radius: 24px; } .asl-toast.bubble { border-radius: 30px; min-height: 38px; line-height: 1.1em; background-color: #ff7043; padding: 0 20px; font-size: 15px; font-weight: 300; color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); } .asl-toast.bubble.success { background: #4caf50; } .asl-toast.bubble.error { background: #f44336; } .asl-toast.bubble.info { background: #3f51b5; } .asl-toast.bubble .action { color: #8e2b0c; } .asl-toast.outline { border-radius: 30px; min-height: 38px; line-height: 1.1em; background-color: #fff; border: 1px solid #676767; padding: 0 20px; font-size: 15px; color: #676767; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); font-weight: 700; } .asl-toast.outline.success { color: #4caf50; border-color: #4caf50; } .asl-toast.outline.error { color: #f44336; border-color: #f44336; } .asl-toast.outline.info { color: #3f51b5; border-color: #3f51b5; } .asl-toast.outline .action { color: #607d8b; } .asl-toast .primary, .asl-toast.asl-toast-primary { border-radius: 2px; min-height: 38px; line-height: 1.1em; background-color: #353535; padding: 6px 20px; font-size: 15px; font-weight: 300; color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); } .asl-toast .primary.success, .asl-toast.asl-toast-primary.success { background: #4caf50; } .asl-toast .primary.error, .asl-toast.asl-toast-primary.error { background: #f44336; } .asl-toast .primary.info, .asl-toast.asl-toast-primary.info { background: #3f51b5; } .asl-toast .primary .action, .asl-toast.asl-toast-primary .action { color: #a1c2fa; } .asl-toast-cont { position: fixed; z-index: 10000; } .asl-toast-cont.full-width { max-width: 86%; width: 100%; } .asl-toast-cont.full-width.fit-to-screen { min-width: 100%; } .asl-toast-cont.full-width.fit-to-screen .asl-toast:first-child { margin-top: 0; } .asl-toast-cont.full-width.fit-to-screen.top-right { top: 0; right: 0; } .asl-toast-cont.full-width.fit-to-screen.top-left { top: 0; left: 0; } .asl-toast-cont.full-width.fit-to-screen.top-center { top: 0; left: 0; -webkit-transform: translateX(0); transform: translateX(0); } .asl-toast-cont.full-width.fit-to-screen.bottom-right { right: 0; bottom: 0; } .asl-toast-cont.full-width.fit-to-screen.bottom-left { left: 0; bottom: 0; } .asl-toast-cont.full-width.fit-to-screen.bottom-center { left: 0; bottom: 0; -webkit-transform: translateX(0); transform: translateX(0); } .asl-toast-cont.top-right { top: 7%; right: 7%; right: 0; } .asl-toast-cont.top-left { top: 7%; left: 7%; left: 0; } .asl-toast-cont.top-center { top: 20%; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: 0; left: 0; -webkit-transform: translateX(0); transform: translateX(0); } .asl-toast-cont.bottom-right { right: 5%; bottom: 7%; right: 0; bottom: 0; } .asl-toast-cont.bottom-left { left: 5%; bottom: 7%; left: 0; bottom: 0; } .asl-toast-cont.bottom-center { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); bottom: 7%; left: 0; bottom: 0; -webkit-transform: translateX(0); transform: translateX(0); } .asl-toast-cont .asl-toast { top: 35px; width: auto; clear: both; margin-top: 10px; position: relative; max-width: 100%; height: auto; word-break: normal; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: justify; justify-content: space-between; box-sizing: inherit; border-radius: 0; } .asl-toast-cont .asl-toast .action { text-decoration: none; font-size: 0.8rem; padding: 8px; margin: 5px -7px 5px 7px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.03em; font-weight: 600; cursor: pointer; } .asl-toast-cont .asl-toast .action.icon { padding: 4px; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; } .asl-toast-cont .asl-toast .action.icon:hover { text-decoration: none; } .asl-toast-cont .asl-toast .action:hover { text-decoration: underline; } .asl-toast-cont .asl-toast:first-child { margin-top: 0; } .asl-toast-cont, .asl-toast-cont.full-width { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; } .asl-toast-cont.bottom-left .asl-toast, .asl-toast-cont.top-left .asl-toast { float: left; } .asl-toast-cont.bottom-right .asl-toast, .asl-toast-cont.top-right .asl-toast { float: right; } .asl-toast-cont .asl-toast .fa, .asl-toast-cont .asl-toast .fab, .asl-toast-cont .asl-toast .far, .asl-toast-cont .asl-toast .fas, .asl-toast-cont .asl-toast .material-icons, .asl-toast-cont .asl-toast .mdi { margin-right: 0.5rem; margin-left: -0.4rem; } .asl-toast-cont .asl-toast .fa.after, .asl-toast-cont .asl-toast .fab.after, .asl-toast-cont .asl-toast .far.after, .asl-toast-cont .asl-toast .fas.after, .asl-toast-cont .asl-toast .material-icons.after, .asl-toast-cont .asl-toast .mdi.after { margin-left: 0.5rem; margin-right: -0.4rem; } .asl-toast-cont .asl-toast .action.icon .fa, .asl-toast-cont .asl-toast .action.icon .material-icons, .asl-toast-cont .asl-toast .action.icon .mdi { margin-right: 0; margin-left: 4px; } .asl-toast-cont.bottom-center, .asl-toast-cont.top-center { -ms-flex-align: stretch !important; align-items: stretch !important; } .asl-toast-cont.bottom-left .asl-toast, .asl-toast-cont.bottom-right .asl-toast, .asl-toast-cont.top-left .asl-toast, .asl-toast-cont.top-right .asl-toast { float: none; } @media only screen and (max-width: 600px) { .asl-toast-cont { min-width: 100%; } } .asl-cont { opacity: 1 !important; } .asl-cont * { font-family: 'Oswald', sans-serif; } .asl-cont .hide { display: none !important; } .asl-cont .asl-wrapper .sl-form-box .sl-top-title { text-align: center; margin-bottom: 40px; } .asl-cont .asl-wrapper .sl-form-box .sl-top-title h3 { font-size: 32px; font-weight: 900; margin-bottom: 15px; letter-spacing: 6px; color: #002E5F; color: var(--sl-primary, #002E5F); text-transform: uppercase; } .asl-cont .asl-wrapper .sl-form-box .sl-top-title p { color: #262626; font-size: 16px; font-weight: 400; } .asl-cont .asl-wrapper .sl-form-box .sl-form-group { margin-bottom: 30px; } .asl-cont .asl-wrapper .sl-form-box .sl-form-group .sl-form-fields { color: #666; width: 100%; height: 56px; padding: 15px; line-height: 0; max-width: 100%; font-size: 16px; margin-bottom: 3px; font-weight: 400; border-radius: 3px; border: 1px solid #ccc; background-color: white; -webkit-appearance: none; } .asl-cont .asl-wrapper .sl-form-box .sl-form-group .sl-form-fields:focus { border: 1px solid #fff; color: #002E5F; outline: 2px solid #002E5F; outline: 2px solid var(--sl-primary, #002E5F); } .asl-cont .asl-wrapper .sl-form-box .sl-form-group textarea.sl-form-fields { height: 100px; min-height: 100px; line-height: inherit; } .asl-cont .asl-wrapper .sl-form-box .sl-form-group.has-danger .text-help { color: red; font-size: 13px; } .asl-cont .asl-wrapper .sl-form-box .sl-submit-btn { border: none; height: auto; color: #fff; margin: 0 auto; cursor: pointer; font-size: 16px; font-weight: 400; border-radius: 0; padding: 7px 15px; text-decoration: none; max-width: max-content; background: #002E5F; }