@-webkit-keyframes jdzc-breath { 0% { -webkit-transform: scale(1) translateZ(0); transform: scale(1) translateZ(0); border-color: #11243c; } 25% { -webkit-transform: scale(0.8) translateZ(0); transform: scale(0.8) translateZ(0); border-color: #8e8a94; } 50% { -webkit-transform: scale(1) translateZ(0); transform: scale(1) translateZ(0); border-color: #11243c; } 75% { -webkit-transform: scale(0.8) translateZ(0); transform: scale(0.8) translateZ(0); border-color: #8e8a94; } 100% { -webkit-transform: scale(1) translateZ(0); transform: scale(1) translateZ(0); border-color: #11243c; } } @keyframes jdzc-breath { 0% { -webkit-transform: scale(1) translateZ(0); transform: scale(1) translateZ(0); border-color: #11243c; } 25% { -webkit-transform: scale(0.8) translateZ(0); transform: scale(0.8) translateZ(0); border-color: #8e8a94; } 50% { -webkit-transform: scale(1) translateZ(0); transform: scale(1) translateZ(0); border-color: #11243c; } 75% { -webkit-transform: scale(0.8) translateZ(0); transform: scale(0.8) translateZ(0); border-color: #8e8a94; } 100% { -webkit-transform: scale(1) translateZ(0); transform: scale(1) translateZ(0); border-color: #11243c; } } .jdzc { width: 99%; max-width: 330px; min-height: 50px; height: auto; margin-left: auto; margin-right: auto; border-radius: 8px; font-family: inherit; text-shadow: none; line-height: 1; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .jdzc * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; } .jdzc *::-moz-selection { background: none !important; } .jdzc *::selection { background: none !important; } .jdzc a { text-decoration: none; } .jdzc .jdzc-box { width: 100%; display: block; } .jdzc .jdzc-box-title { font-size: 20px; font-weight: 700; text-transform: uppercase; display: inline-block; width: 100%; position: absolute; left: 0; right: 0; top: 8px; } .jdzc .jdzc-box-subtitle { font-size: 12px; display: inline-block; width: 100%; position: absolute; left: 0; right: 0; top: 35px; } .jdzc .jdzc-box-h { height: auto; padding: 0 10px; display: block; } .jdzc .jdzc-box-h span { padding: 6px 0; display: block; text-align: center; font-size: 11px; line-height: 14px; font-weight: 700; cursor: default; } .jdzc .jdzc-box-h span::-moz-selection { background: none !important; } .jdzc .jdzc-box-h span::selection { background: none !important; } .jdzc .jdzc-box-b { display: block; overflow: hidden; position: relative; height: 50px; min-height: 50px; padding: 2px 4px; text-align: center; box-sizing: initial; } .jdzc .jdzc-box-icons { position: relative; height: 50px; background-repeat: no-repeat; background-position: 50% 50%; z-index: 1; } .jdzc .jdzc-box-selection { position: absolute; left: 0; top: 2px; bottom: 0; right: 0; margin: 2px 4px; z-index: 999; cursor: none; height: 50px; } .jdzc .jdzc-box-selection > i { content: ""; width: 14px; height: 14px; border-radius: 100%; background: #52b3d9; position: absolute; display: none; } .jdzc .jdzc-box-icons, .jdzc .jdzc-box-selection { width: 100%; max-width: 320px; margin: 0 auto; } .jdzc .jdzc-box-info { position: absolute; right: 6px; bottom: 4px; font-size: 9px; } .jdzc .jdzc-box-info:hover { text-decoration: underline; } .jdzc .jdzc-box-b .jdzc-loader { margin: auto; position: absolute; width: 34px; height: 34px; border-radius: 100%; border: 6px solid #52b3d9; z-index: 10; top: 0; left: 0; bottom: 0; right: 0; box-sizing: border-box; -webkit-animation: jdzc-breath 2s infinite ease-in-out; animation: jdzc-breath 2s infinite ease-in-out; } .jdzc .jdzc-box-b.jdzc-opacity > div:not(.jdzc-loader) { opacity: .15; cursor: default; pointer-events: none; } .jdzc .jdzc-box-b.jdzc-opacity > div:not(.jdzc-loader):after, .jdzc .jdzc-box-b.jdzc-opacity > div:not(.jdzc-loader):hover:after { content: none; } .jdzc .jdzc-box-checkmark { width: 28px; height: 28px; position: absolute; top: 13px; left: 15px; background-image: url("data: image/svg+xml,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg enable-background='new 0 0 98.5 98.5' version='1.1' viewBox='0 0 98.5 98.5' xml: space='preserve' xmlns='http: //www.w3.org/2000/svg'%3E%3Cpath class='checkmark' d='M81.7,17.8C73.5,9.3,62,4,49.2,4 C24.3,4,4,24.3,4,49.2s20.3,45.2,45.2,45.2s45.2-20.3,45.2-45.2c0-8.6-2.4-16.6-6.5-23.4l0,0L45.6,68.2L24.7,47.3' fill='none' stroke-miterlimit='10' stroke-width='8' stroke='none'/%3E%3C/svg%3E "); } .jdzc .jdzc-box-f { display: block !important; font-size: 9px; padding: 3px; cursor: default; text-align: center; } .jdzc .jdzc-box-f > span a { text-decoration: none; transition: color .1s linear; text-align: center; } .jdzc .jdzc-box-f > span a:hover { transition: color .1s linear; } .jdzc .jdzc-box-f-hide { visibility: hidden; } .jdzc .jdzc-fields { display: none; visibility: hidden; } .jdzc .jdzc-fields input[type="text"] { display: none; visibility: hidden; } .jdzc.jdzc-init { transition: background 150ms linear; } .jdzc.jdzc-init .jdzc-box-b { cursor: pointer; } .jdzc.jdzc-init .jdzc-box-circle { width: 28px; height: 28px; border-radius: 100%; border: 6px solid #11243c; position: absolute; top: 13px; left: 15px; transition: opacity .1s linear; -webkit-animation: jdzc-breath 5s infinite linear; animation: jdzc-breath 5s infinite linear; } .jdzc.jdzc-init:hover { transition: background 150ms linear; } .jdzc.jdzc-init:hover .jdzc-box-circle { opacity: .75; transition: opacity .1s linear; } .jdzc.jdzc-success, .jdzc.jdzc-error { cursor: default; } .jdzc.jdzc-init .jdzc-box-title, .jdzc.jdzc-success .jdzc-box-title { font-size: 15px; top: 19px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 20px; padding-left: 60px; } .jdzc.jdzc-theme-light { background: #fafafa; border: 1px solid #d8d8d8; } .jdzc.jdzc-theme-light .jdzc-box-subtitle { color: #9e9e9e; } .jdzc.jdzc-theme-light .jdzc-box-h { border-bottom: 2px solid #d8d8d8; } .jdzc.jdzc-theme-light .jdzc-box-h span { color: #1d1d1d; } .jdzc.jdzc-theme-light .jdzc-box-f { color: #a7a7a7; border-top: 2px solid #d8d8d8; padding-top: 6px; padding-bottom: 5px; } .jdzc.jdzc-theme-light .jdzc-box-f > span { color: #448aff; } .jdzc.jdzc-theme-light .jdzc-box-f > span a { color: #448aff; text-transform: uppercase; font-weight: 700; } .jdzc.jdzc-theme-light .jdzc-box-f > span a:hover { color: #74a8ff; } .jdzc.jdzc-theme-light .jdzc-box-info span, .jdzc.jdzc-theme-light .jdzc-box-info a { color: #afafaf; } .jdzc.jdzc-theme-light.jdzc-init:hover { background: #f1f1f1; } .jdzc.jdzc-theme-light.jdzc-init .jdzc-box-title { color: #464646; } .jdzc.jdzc-theme-light.jdzc-success .jdzc-box-checkmark svg { stroke: #5bd25b; } .jdzc.jdzc-theme-light.jdzc-success .jdzc-box-title { color: #5bd25b; } .jdzc.jdzc-theme-light.jdzc-error .jdzc-box-title { color: #ef5858; } .jdzc.jdzc-theme-dark { background: #4c4c4c; border: 1px solid #404040; } .jdzc.jdzc-theme-dark .jdzc-box-subtitle { color: #b1b1b1; } .jdzc.jdzc-theme-dark .jdzc-box-h { border-bottom: 2px solid #404040; } .jdzc.jdzc-theme-dark .jdzc-box-h span { color: #dadada; } .jdzc.jdzc-theme-dark .jdzc-box-f { color: #a7a7a7; border-top: 2px solid #404040; padding-top: 6px; padding-bottom: 5px; } .jdzc.jdzc-theme-dark .jdzc-box-f > span a { color: #fff; text-transform: uppercase; font-weight: 700; } .jdzc.jdzc-theme-dark .jdzc-box-f > span a:hover { color: #f0f0f0; } .jdzc.jdzc-theme-dark .jdzc-box-info span, .jdzc.jdzc-theme-dark .jdzc-box-info a { color: #b1b1b1; } .jdzc.jdzc-theme-dark.jdzc-init:hover { background: #454545; } .jdzc.jdzc-theme-dark.jdzc-init .jdzc-box-title { color: #dadada; } .jdzc.jdzc-theme-dark.jdzc-success .jdzc-box-checkmark svg { stroke: #93d293; } .jdzc.jdzc-theme-dark.jdzc-success .jdzc-box-title { color: #93d293; } .jdzc.jdzc-theme-dark.jdzc-error .jdzc-box-title { color: #ef5858; } .jdzc.jdzc-theme-light500 { background: #fff; border: 1px solid #d8d8d8; border-radius: 0; } .jdzc.jdzc-theme-light500 .jdzc-box-title { font-weight: 500; text-transform: none; } .jdzc.jdzc-theme-light500 .jdzc-box-subtitle { color: #b1b1b1; } .jdzc.jdzc-theme-light500 .jdzc-box-h { border-color: #b1b1b1; border-bottom-width: 1px; border-bottom-style: solid; } .jdzc.jdzc-theme-light500 .jdzc-box-h span { font-weight: 500; font-size: 11px; color: #1d1d1d; } .jdzc.jdzc-theme-light500 .jdzc-box-f { color: #a7a7a7; border-top: 1px solid #d8d8d8; padding: 5px; } .jdzc.jdzc-theme-light500 .jdzc-box-f > span { color: #448aff; } .jdzc.jdzc-theme-light500 .jdzc-box-f > span a { color: #448aff; } .jdzc.jdzc-theme-light500 .jdzc-box-f > span a:hover { color: #74a8ff; } .jdzc.jdzc-theme-light500 .jdzc-box-info span, .jdzc.jdzc-theme-light500 .jdzc-box-info a { color: #afafaf; } .jdzc.jdzc-theme-light500.jdzc-init:hover { background: #f1f1f1; } .jdzc.jdzc-theme-light500.jdzc-init .jdzc-box-title { text-transform: uppercase; color: #464646; } .jdzc.jdzc-theme-light500.jdzc-success .jdzc-box-checkmark svg { stroke: #5bd25b; } .jdzc.jdzc-theme-light500.jdzc-success .jdzc-box-title { color: #5bd25b; } .jdzc.jdzc-theme-light500.jdzc-error .jdzc-box-title { color: #ef5858; } .jdzc.jdzc-theme-dark500 { background: #4c4c4c; border: 1px solid #404040; border-radius: 0; } .jdzc.jdzc-theme-dark500 .jdzc-box-title { font-weight: 500; text-transform: none; } .jdzc.jdzc-theme-dark500 .jdzc-box-subtitle { color: #b1b1b1; } .jdzc.jdzc-theme-dark500 .jdzc-box-h { border-color: #404040; border-bottom-width: 1px; border-bottom-style: solid; } .jdzc.jdzc-theme-dark500 .jdzc-box-h span { font-weight: 500; font-size: 11px; color: #dadada; } .jdzc.jdzc-theme-dark500 .jdzc-box-f { color: #a7a7a7; border-top: 1px solid #404040; padding: 5px; } .jdzc.jdzc-theme-dark500 .jdzc-box-f > span { color: #fff; } .jdzc.jdzc-theme-dark500 .jdzc-box-f > span a { color: #fff; } .jdzc.jdzc-theme-dark500 .jdzc-box-f > span a:hover { color: #f0f0f0; } .jdzc.jdzc-theme-dark500 .jdzc-box-info span, .jdzc.jdzc-theme-dark500 .jdzc-box-info a { color: #b1b1b1; } .jdzc.jdzc-theme-dark500.jdzc-init:hover { background: #454545; } .jdzc.jdzc-theme-dark500.jdzc-init .jdzc-box-title { text-transform: uppercase; color: #dadada; } .jdzc.jdzc-theme-dark500.jdzc-success .jdzc-box-checkmark svg { stroke: #93d293; } .jdzc.jdzc-theme-dark500.jdzc-success .jdzc-box-title { color: #93d293; } .jdzc.jdzc-theme-dark500.jdzc-error .jdzc-box-title { color: #ef5858; }