0001: /* CSS */
0002: /* padding: 6px 14px; */
0003: 
0004: .button-10 {
0005:   display: flex;
0006:   flex-direction: column;
0007:   align-items: center;
0008:   padding: 6px 10px;
0009:   font-family: -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
0010:   border-radius: 6px;
0011:   border: none;
0012:   font-size: 16px;
0013:   color: #fff;
0014:   background: linear-gradient(180deg, #5E5DF0 0%, #367AF6 100%);
0015:    background-origin: border-box;
0016:   box-shadow: 0px 0.5px 1.5px rgba(54, 122, 246, 0.25), inset 0px 0.8px 0px -0.25px rgba(255, 255, 255, 0.2);
0017:   user-select: none;
0018:   -webkit-user-select: none;
0019:   touch-action: manipulation;
0020: }
0021: 
0022: .button-10:focus {
0023:   box-shadow: inset 0px 0.8px 0px -0.25px rgba(255, 255, 255, 0.2), 0px 0.5px 1.5px rgba(54, 122, 246, 0.25), 0px 0px 0px 3.5px rgba(58, 108, 217, 0.5);
0024:   outline: 0;
0025: }
0026: 
0027: .button-10v {
0028:   display: flex;
0029:   flex-direction: column;
0030:   align-items: center;
0031:   padding: 6px 10px;
0032:   font-family: -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
0033:   border-radius: 6px;
0034:   border: none;
0035:   font-size: 16px;
0036:   color: #fff;
0037:   background: linear-gradient(180deg, #5E5DF0 0%, #367AF6 100%);
0038:    background-origin: border-box;
0039:   box-shadow: 0px 0.5px 1.5px rgba(54, 122, 246, 0.25), inset 0px 0.8px 0px -0.25px rgba(255, 255, 255, 0.2);
0040:   user-select: none;
0041:   -webkit-user-select: none;
0042:   touch-action: manipulation;
0043:   width: 100%;
0044: }
0045: 
0046: .button-10v:focus {
0047:   box-shadow: inset 0px 0.8px 0px -0.25px rgba(255, 255, 255, 0.2), 0px 0.5px 1.5px rgba(54, 122, 246, 0.25), 0px 0px 0px 3.5px rgba(58, 108, 217, 0.5);
0048:   outline: 0;
0049: }
0050: 
0051: .button-19 {
0052:   appearance: button;
0053:   background-color: #1899D6;
0054:   border: solid transparent;
0055:   border-radius: 16px;
0056:   border-width: 0 0 4px;
0057:   box-sizing: border-box;
0058:   color: #FFFFFF;
0059:   cursor: pointer;
0060:   display: inline-block;
0061:   font-family: din-round,sans-serif;
0062:   font-size: 15px;
0063:   font-weight: 700;
0064:   letter-spacing: .8px;
0065:   line-height: 20px;
0066:   margin: 0;
0067:   outline: none;
0068:   overflow: visible;
0069:   padding: 13px 16px;
0070:   text-align: left;
0071:   text-transform: uppercase;
0072:   touch-action: manipulation;
0073:   transform: translateZ(0);
0074:   transition: filter .2s;
0075:   user-select: none;
0076:   -webkit-user-select: none;
0077:   vertical-align: middle;
0078:   white-space: nowrap;
0079:   width: 100%;
0080: }
0081: 
0082: .button-19:after {
0083:   background-clip: padding-box;
0084:   background-color: #1CB0F6;
0085:   border: solid transparent;
0086:   border-radius: 16px;
0087:   border-width: 0 0 4px;
0088:   bottom: -4px;
0089:   content: "";
0090:   left: 0;
0091:   position: absolute;
0092:   right: 0;
0093:   top: 0;
0094:   z-index: -1;
0095: }
0096: 
0097: .button-19:main,
0098: .button-19:focus {
0099:   user-select: auto;
0100: }
0101: 
0102: .button-19:hover:not(:disabled) {
0103:   filter: brightness(1.1);
0104:   -webkit-filter: brightness(1.1);
0105: }
0106: 
0107: .button-19:disabled {
0108:   cursor: auto;
0109: }
0110: 
0111: .button-19p {
0112:   appearance: button;
0113:   background-color: #cc99ff;
0114:   border: solid transparent;
0115:   border-radius: 16px;
0116:   border-width: 0 0 4px;
0117:   box-sizing: border-box;
0118:   color: #FFFFFF;
0119:   cursor: pointer;
0120:   display: inline-block;
0121:   font-family: din-round,sans-serif;
0122:   font-size: 15px;
0123:   font-weight: 700;
0124:   letter-spacing: .8px;
0125:   line-height: 20px;
0126:   margin: 0;
0127:   outline: none;
0128:   overflow: visible;
0129:   padding: 13px 16px;
0130:   text-align: center;
0131:   touch-action: manipulation;
0132:   transform: translateZ(0);
0133:   transition: filter .2s;
0134:   user-select: none;
0135:   -webkit-user-select: none;
0136:   vertical-align: middle;
0137:   white-space: nowrap;
0138:   width: 100%;
0139: }
0140: 
0141: .button-19p:after {
0142:   background-clip: padding-box;
0143:   background-color: #cc99ff;
0144:   border: solid transparent;
0145:   border-radius: 16px;
0146:   border-width: 0 0 4px;
0147:   bottom: -4px;
0148:   content: "";
0149:   left: 0;
0150:   position: absolute;
0151:   right: 0;
0152:   top: 0;
0153:   z-index: -1;
0154: }
0155: 
0156: .button-19p:main,
0157: .button-19p:focus {
0158:   user-select: auto;
0159: }
0160: 
0161: .button-19p:hover:not(:disabled) {
0162:   filter: brightness(1.1);
0163:   -webkit-filter: brightness(1.1);
0164: }
0165: 
0166: .button-19p:disabled {
0167:   cursor: auto;
0168: }
0169: 
0170: 
0171: .button-30 {
0172:   display: flex;
0173:   flex-direction: column;
0174:   align-items: center;
0175:   padding: 1px 1px;
0176:   font-family: -apple-system, BlinkMacSystemFont, 'Arial', sans-serif;
0177:   border-radius: 6px;
0178:   border: none;
0179: 
0180:   color: #fff;
0181:   background: linear-gradient(180deg, #5E5DF0 0%, #367AF6 100%);
0182:    background-origin: border-box;
0183:   box-shadow: 0px 0.5px 1.5px rgba(54, 122, 246, 0.25), inset 0px 0.8px 0px -0.25px rgba(255, 255, 255, 0.2);
0184:   user-select: none;
0185:   -webkit-user-select: none;
0186:   touch-action: manipulation;
0187: }
0188: 
0189: .button-30:focus {
0190:   box-shadow: inset 0px 0.8px 0px -0.25px rgba(255, 255, 255, 0.2), 0px 0.5px 1.5px rgba(54, 122, 246, 0.25), 0px 0px 0px 3.5px rgba(58, 108, 217, 0.5);
0191:   outline: 0;
0192: }
0193: 
0194:             
0195: .button_yellowb {
0196:   font-size:13px;
0197:   font-family:Arial;
0198:   width:100%;
0199:   height:100%;
0200:   border-width:1px;
0201:   color:#333333;
0202:   border-color:#ffaa22;
0203:   border-top-left-radius:6px;
0204:   border-top-right-radius:6px;
0205:   border-bottom-left-radius:6px;
0206:   border-bottom-right-radius:6px;
0207:   box-shadow: 0px 1px 0px 0px #fff6af;
0208:   text-shadow: 0px 1px 0px #ffee66;
0209:   background:linear-gradient(#ffec64, #ffab23);
0210: }
0211: 
0212: .button_yellowb:hover {
0213:   background: linear-gradient(#ffab23, #ffec64);
0214: }   
0215:         
0216: .button_close {
0217:   font-size:13px;
0218:   font-family:Arial;
0219:   width:123px;
0220:   height:26px;
0221:   border-width:1px;
0222:   color:#333333;
0223:   border-color:#ffaa22;
0224:   border-top-left-radius:6px;
0225:   border-top-right-radius:6px;
0226:   border-bottom-left-radius:6px;
0227:   border-bottom-right-radius:6px;
0228:   box-shadow: 0px 1px 0px 0px #fff6af;
0229:   text-shadow: 0px 1px 0px #ffee66;
0230:   background:linear-gradient(#ffec64, #ffab23);
0231: }
0232: 
0233: .button_close:hover {
0234:   background: linear-gradient(#ffab23, #ffec64);
0235: }
0236: .button_greenb {
0237:   font-size:13px;
0238:   font-family:Arial;
0239:   width:123px;
0240:   height:26px;
0241:   border-width:1px;
0242:   color:#333333;
0243:   border-color:#ffaa22;
0244:   border-top-left-radius:6px;
0245:   border-top-right-radius:6px;
0246:   border-bottom-left-radius:6px;
0247:   border-bottom-right-radius:6px;
0248:   box-shadow: 0px 1px 0px 0px #fff6af;
0249:   text-shadow: 0px 1px 0px #ffee66;
0250:   background:linear-gradient(#ffec64, #ffab23);
0251: }
0252: 
0253: .button_greenb:hover {
0254:   background: linear-gradient(#ffab23, #ffec64);
0255: }
0256: 
0257: 
0258: 
0259: 
0260: /*   background: linear-gradient(180deg, #4B91F7 0%, #367AF6 100%);  */ 
0261: 
0262: .button-34 {
0263:   background: #5E5DF0;
0264:   border-radius: 999px;
0265:   box-shadow: #5E5DF0 0 10px 20px -10px;
0266:   box-sizing: border-box;
0267:   color: #FFFFFF;
0268:   cursor: pointer;
0269:   font-family: Inter,Helvetica,"Apple Color Emoji","Segoe UI Emoji",NotoColorEmoji,"Noto Color Emoji","Segoe UI Symbol","Android Emoji",EmojiSymbols,-apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans",sans-serif;
0270:   font-size: 16px;
0271:   font-weight: 700;
0272:   line-height: 24px;
0273:   opacity: 1;
0274:   outline: 0 solid transparent;
0275:   padding: 8px 18px;
0276:   user-select: none;
0277:   -webkit-user-select: none;
0278:   touch-action: manipulation;
0279:   width: fit-content;
0280:   word-break: break-word;
0281:   border: 0;
0282: }
0283: 
0284: .button-34y {
0285:   background: #5E5DF0;
0286:   border-radius: 999px;
0287:   box-shadow: #5E5DF0 0 10px 20px -10px;
0288:   box-sizing: border-box;
0289:   color: #FFFFFF;
0290:   cursor: pointer;
0291:   font-family: Inter,Helvetica,"Apple Color Emoji","Segoe UI Emoji",NotoColorEmoji,"Noto Color Emoji","Segoe UI Symbol","Android Emoji",EmojiSymbols,-apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans",sans-serif;
0292:   font-size: 16px;
0293:   font-weight: 700;
0294:   line-height: 24px;
0295:   opacity: 1;
0296:   outline: 0 solid transparent;
0297:   padding: 8px 18px;
0298:   user-select: none;
0299:   -webkit-user-select: none;
0300:   touch-action: manipulation;
0301:   width: fit-content;
0302:   word-break: break-word;
0303:   border: 0;
0304: }
0305: 
0306: 
0307: .button-101 {
0308:   display: flex;
0309:   flex-direction: column;
0310:   align-items: center;
0311:   padding: 6px 14px;
0312:   font-family: -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
0313:   border-radius: 6px;
0314:   border: none;
0315: 
0316:   color: #fff;
0317:   background: linear-gradient(180deg, #fcba03 0%, #367AF6 100%);
0318:    background-origin: border-box;
0319:   box-shadow: 0px 0.5px 1.5px rgba(54, 122, 246, 0.25), inset 0px 0.8px 0px -0.25px rgba(255, 255, 255, 0.2);
0320:   user-select: none;
0321:   -webkit-user-select: none;
0322:   touch-action: manipulation;
0323: }
0324: 
0325: .button-101:focus {
0326:   box-shadow: inset 0px 0.8px 0px -0.25px rgba(255, 255, 255, 0.2), 0px 0.5px 1.5px rgba(54, 122, 246, 0.25), 0px 0px 0px 3.5px rgba(58, 108, 217, 0.5);
0327:   outline: 0;
0328: }
0329: 
0330: .button-40 {
0331: 	box-shadow: 0px 0px 0px 2px #9fb4f2;
0332: 	background:linear-gradient(to bottom, #7892c2 5%, #476e9e 100%);
0333: 	background-color:#7892c2;
0334: 	border-radius:10px;
0335: 	border:1px solid #4e6096;
0336: 	display:inline-block;
0337: 	cursor:pointer;
0338: 	color:#ffffff;
0339: 	font-family:Arial;
0340: 	font-size:14px;
0341: 	padding:3px 15px;
0342: 	text-decoration:none;
0343: 	text-shadow:0px 1px 0px #283966;
0344: }
0345: .button-40:hover {
0346: 	background:linear-gradient(to bottom, #476e9e 5%, #7892c2 100%);
0347: 	background-color:#476e9e;
0348: }
0349: .button-40:active {
0350: 	position:relative;
0351: 	top:1px;
0352: }
0353: 
0354: .button-40f {
0355: 	box-shadow: 0px 0px 0px 2px #9fb4f2;
0356: 	background:linear-gradient(to bottom, #7892c2 5%, #476e9e 100%);
0357: 	background-color:#7892c2;
0358: 	border-radius:10px;
0359: 	border:1px solid #4e6096;
0360: 	display:inline-block;
0361: 	cursor:pointer;
0362: 	color:#ffffff;
0363: 	font-family:Arial;
0364: 	font-size:18px;
0365: 	padding:3px 15px;
0366: 	text-decoration:none;
0367: 	text-shadow:0px 1px 0px #283966;
0368: 	width: 250px;
0369: 	text-align: left;
0370: }
0371: .button-40f:hover {
0372: 	background:linear-gradient(to bottom, #476e9e 5%, #7892c2 100%);
0373: 	background-color:#476e9e;
0374: }
0375: .button-40f:active {
0376: 	position:relative;
0377: 	top:1px;
0378: }
0379: 
0380: 
0381: .button-40fg {
0382: 	box-shadow: 0px 0px 0px 2px #9fb4f2;
0383: 	background:linear-gradient(to bottom, #7892c2 5%, #476e9e 100%);
0384: 	background-color:#7892c2;
0385: 	border-radius:10px;
0386: 	border:1px solid #4e6096;
0387: 	display:inline-block;
0388: 	cursor:pointer;
0389: 	color:#ffffff;
0390: 	font-family:Arial;
0391: 	font-size:20px;
0392: 	padding:6px 20px;
0393: 	text-decoration:none;
0394: 	text-shadow:0px 1px 0px #283966;
0395: 	width: 370px;
0396: 	text-align: left;
0397: }
0398: .button-40fg:hover {
0399: 	background:linear-gradient(to bottom, #476e9e 5%, #7892c2 100%);
0400: 	background-color:#476e9e;
0401: }
0402: .button-40fg:active {
0403: 	position:relative;
0404: 	top:1px;
0405: }
0406: 
0407: .button-20 {
0408:   appearance: button;
0409:   background-color: #4D4AE8;
0410:   background-image: linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, 0));
0411:   border: 1px solid #4D4AE8;
0412:   border-radius: 1rem;
0413:   box-shadow: rgba(255, 255, 255, 0.15) 0 1px 0 inset,rgba(46, 54, 80, 0.075) 0 1px 1px;
0414:   box-sizing: border-box;
0415:   color: #FFFFFF;
0416:   cursor: pointer;
0417:   display: inline-block;
0418:   font-family: Inter,sans-serif;
0419:   font-size: 1rem;
0420:   font-weight: 500;
0421:   line-height: 1.5;
0422:   margin: 0;
0423:   padding: .5rem 1rem;
0424:   text-align: center;
0425:   text-transform: none;
0426:   transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
0427:   user-select: none;
0428:   -webkit-user-select: none;
0429:   touch-action: manipulation;
0430:   vertical-align: middle;
0431: }
0432: 
0433: .button-20:focus:not(:focus-visible),
0434: .button-20:focus {
0435:   outline: 0;
0436: }
0437: 
0438: .button-20:hover {
0439:   background-color: #3733E5;
0440:   border-color: #3733E5;
0441: }
0442: 
0443: .button-20:focus {
0444:   background-color: #413FC5;
0445:   border-color: #3E3BBA;
0446:   box-shadow: rgba(255, 255, 255, 0.15) 0 1px 0 inset, rgba(46, 54, 80, 0.075) 0 1px 1px, rgba(104, 101, 235, 0.5) 0 0 0 .2rem;
0447: }
0448: 
0449: .button-20:active {
0450:   background-color: #3E3BBA;
0451:   background-image: none;
0452:   border-color: #3A38AE;
0453:   box-shadow: rgba(46, 54, 80, 0.125) 0 3px 5px inset;
0454: }
0455: 
0456: .button-20:active:focus {
0457:   box-shadow: rgba(46, 54, 80, 0.125) 0 3px 5px inset, rgba(104, 101, 235, 0.5) 0 0 0 .2rem;
0458: }
0459: 
0460: .button-20:disabled {
0461:   background-image: none;
0462:   box-shadow: none;
0463:   opacity: .65;
0464:   pointer-events: none;
0465: }
0466: