@charset "utf-8"; /* * Kimini CSS modules ver.3 (2021-) * Designed by Tomoaki Mizuno * * display width: * - pc : 1023px - * - tablet : 667px - 1023px * - mobile : - 666px * display sizes: * - iPhone 8 : 375 x 667 -> mobile | tablet * - iPhone 8 Plus : 414 x 736 -> mobile | tablet * - iPad & iPad mini : 1024 x 768 -> pc | tablet * - iPad Pro (10.5) : 1112 x 834 -> pc | tablet * - iPad Pro (12.9) : 1366 x 1024 -> pc | pc * * colors: * - green : #239765 # - palegreen : #a9d6c3 # - lightgreen : #eef5f4 # - darkgreen : #668877 * - red : #ee0000 * - orange : #d94d38 * - yellow : #f39801 * - lightyellow : #fdf1dc * - gray : #999999 | #fcfcfc * - lightgray : #bbbbbb | #fefefe * - bggray : #f6f7f7 * - bordergray : #cccccc * - borderlightgray : #e1e1e1 * - textgray : #444444 * - darkgray : #888888 | #f3f3f3 * - deepgray : #555555 | #eeeeee * - black : #222222 * - white : #ffffff * - kimini-green : #008672 * - kimini-blue : #00b6eb * - kimini-lime : #9ed238 * * font sizes, line heights and form heights: * - xxlarge : 32px | 48px | - * - xxlarge : 28px | 42px | - * - xlarge : 24px | 36px | 60px * - large : 20px | 30px | 50px * - regular : 16px | 24px | 40px * - small : 14px | 21px | 30px * - xsmall : 12px | 18px | - * - xxsmall : 10px | 15px | - * * image sizes: * - size-XL : 152 x 152px * - size-L : 102 x 102px * - size-M : 72 x 72px * - size-S : 50 x 50px * - size-XS : 30 x 30px * - size-XXS : 24 x 24px * * z-index: * - header : 2000 * - dialog : 3000 * - loading : 4000 * - header-navigation : 1001 * - navigation : 1000 * - form-date : 200 * - tooltip : 100 * */ /**** Reset ****/ *,*::before,*::after { box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; _word-break:break-all; } body { margin:0; padding:0; border:0; outline:0; background:#ffffff; vertical-align:baseline; -webkit-font-smoothing:subpixel-antialiased; -webkit-text-size-adjust:100%; } html,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,em,i,img,strong,dl,dt,dd,ol,ul,li,form,label,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,dialog,figure,figcaption,footer,header,hgroup,menu,nav,section,time,mark,audio,video,button { margin:0; padding:0; border:0; outline:0; background:transparent; font-size:inherit; font-family:inherit; vertical-align:inherit; list-style-type:none; font-weight:inherit; font-style:normal; } img { vertical-align:top; -ms-interpolation-mode:bicubic; } article,aside,dialog,div,figure,footer,header,hgroup,nav,section { display:block; } select,input,textarea { font-family:inherit; font-size:inherit; font-weight:inherit; line-height:inherit; outline:none; margin:0; -moz-appearance:none; -webkit-appearance:none; appearance:none; } input[type="text"],input[type="password"],input[type="email"],input[type="number"],input[type="tel"],textarea { border-style:solid; border-width:1px; color:inherit; border-radius:0; } input[type="submit"],input[type="reset"],input[type="button"] { border:none; box-shadow:none; white-space:normal; cursor:pointer; } input::-ms-clear,input::-ms-reveal { display:none; } input::placeholder,textarea::placeholder { color:inherit; line-height:inherit; opacity:0.4; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; } /**** Shortened patterns ****/ /* display and positions */ .block { display:block !important; } .inline { display:inline !important; } .inline-block { display:inline-block !important; } .hide,.hidden { display:none !important; } .table { display:table !important; } .table-cell { display:table-cell !important; } .table-cell.min { width:1% !important; } .tl { text-align:left !important; } .tr { text-align:right !important; } .tc { text-align:center !important; } .vt { vertical-align:top !important; } .vb { vertical-align:bottom !important; } .vm,.vc { vertical-align:middle !important; } .vbase { vertical-align:baseline !important; } .fl { float:left !important; } .fr { float:right !important; } .nr { white-space:nowrap !important; } .wp { white-space:wrap !important; } .break-all { word-break:break-all !important; } .break-word,.break-normal,.break-normal * { word-break:normal !important; } .nr-force { white-space:nowrap !important; overflow:hidden !important; } .absolute { position:absolute !important; } .relative { position:relative !important; } .fixed { position:fixed !important; } .absolute-top-left { position:absolute !important; top:0 !important; left:0 !important; } .absolute-top-right { position:absolute !important; top:0 !important; right:0 !important; } .absolute-bottom-left { position:absolute !important; bottom:0 !important; left:0 !important; } .absolute-bottom-right { position:absolute !important; bottom:0 !important; right:0 !important; } .absolute-left-50p { position:absolute !important; left:50% !important; } .absolute-top-50p { position:absolute !important; top:50% !important; } .absolute-top-left-50p { position:absolute !important; left:50% !important; top:50% !important; } .absolute-bottom-left-right { position:absolute !important; bottom:0 !important; left:0 !important; right:0 !important; } .fixed-top-left { position:fixed !important; top:0; left:0; } .fixed-top-right { position:fixed !important; top:0; right:0; } .fixed-bottom-left { position:fixed !important; bottom:0; left:0; } .fixed-bottom-right { position:fixed !important; bottom:0; right:0; } .top1px { position:relative !important; top:1px !important; } .top2px { position:relative !important; top:2px !important; } .top3px { position:relative !important; top:3px !important; } .top4px { position:relative !important; top:4px !important; } .top5px { position:relative !important; top:5px !important; } .top6px { position:relative !important; top:6px !important; } .top7px { position:relative !important; top:7px !important; } .top8px { position:relative !important; top:8px !important; } .top9px { position:relative !important; top:9px !important; } .top10px { position:relative !important; top:10px !important; } .top11px { position:relative !important; top:11px !important; } .top12px { position:relative !important; top:12px !important; } .top13px { position:relative !important; top:13px !important; } .top14px { position:relative !important; top:14px !important; } .top15px { position:relative !important; top:15px !important; } .top-1px { position:relative !important; top:-1px !important; } .top-2px { position:relative !important; top:-2px !important; } .top-3px { position:relative !important; top:-3px !important; } .top-4px { position:relative !important; top:-4px !important; } .top-5px { position:relative !important; top:-5px !important; } .top-6px { position:relative !important; top:-6px !important; } .top-7px { position:relative !important; top:-7px !important; } .top-8px { position:relative !important; top:-8px !important; } .top-9px { position:relative !important; top:-9px !important; } .top-10px { position:relative !important; top:-10px !important; } .top-11px { position:relative !important; top:-11px !important; } .top-12px { position:relative !important; top:-12px !important; } .top-13px { position:relative !important; top:-13px !important; } .top-14px { position:relative !important; top:-14px !important; } .top-15px { position:relative !important; top:-15px !important; } .left1px { position:relative !important; left:1px !important; } .left2px { position:relative !important; left:2px !important; } .left3px { position:relative !important; left:3px !important; } .left4px { position:relative !important; left:4px !important; } .left5px { position:relative !important; left:5px !important; } .left6px { position:relative !important; left:6px !important; } .left7px { position:relative !important; left:7px !important; } .left8px { position:relative !important; left:8px !important; } .left9px { position:relative !important; left:9px !important; } .left10px { position:relative !important; left:10px !important; } .left11px { position:relative !important; left:11px !important; } .left12px { position:relative !important; left:12px !important; } .left13px { position:relative !important; left:13px !important; } .left14px { position:relative !important; left:14px !important; } .left15px { position:relative !important; left:15px !important; } .left-1px { position:relative !important; left:-1px !important; } .left-2px { position:relative !important; left:-2px !important; } .left-3px { position:relative !important; left:-3px !important; } .left-3px { position:relative !important; left:-3px !important; } .left-4px { position:relative !important; left:-4px !important; } .left-5px { position:relative !important; left:-5px !important; } .left-6px { position:relative !important; left:-6px !important; } .left-7px { position:relative !important; left:-7px !important; } .left-8px { position:relative !important; left:-8px !important; } .left-9px { position:relative !important; left:-9px !important; } .left-10px { position:relative !important; left:-10px !important; } .left-11px { position:relative !important; left:-11px !important; } .left-12px { position:relative !important; left:-12px !important; } .left-13px { position:relative !important; left:-13px !important; } .left-14px { position:relative !important; left:-14px !important; } .left-15px { position:relative !important; left:-15px !important; } .z0 { z-index:0 !important; } .z1 { z-index:1 !important; } .overflow-hidden { overflow:hidden !important; } .overflow-x-scroll { overflow-x:scroll !important; -webkit-overflow-scrolling:touch; } .overflow-y-scroll { overflow-y:scroll !important; -webkit-overflow-scrolling:touch; } .clear { clear:both; zoom:1; } .clear::after { content:''; display:block; clear:both; } /* font size and styles */ .f7px { font-size:7px !important; } .f8px { font-size:8px !important; } .f9px { font-size:9px !important; } .f10px { font-size:10px !important; } .f11px { font-size:11px !important; } .f12px { font-size:12px !important; } .f13px { font-size:13px !important; } .f14px { font-size:14px !important; } .f15px { font-size:15px !important; } .f16px { font-size:16px !important; } .f17px { font-size:17px !important; } .f18px { font-size:18px !important; } .f19px { font-size:19px !important; } .f20px { font-size:20px !important; } .f21px { font-size:21px !important; } .f22px { font-size:22px !important; } .f23px { font-size:23px !important; } .f24px { font-size:24px !important; } .f25px { font-size:25px !important; }.f26px { font-size:26px !important; } .f27px { font-size:27px !important; } .f28px { font-size:28px !important; } .f29px { font-size:29px !important; } .f30px { font-size:30px !important; } .f32px { font-size:32px !important; } .f34px { font-size:34px !important; } .f36px { font-size:36px !important; } .f38px { font-size:38px !important; } .f40px { font-size:40px !important; } div.bold,p.bold,span.bold,strong.bold,em.bold,i.bold,a.bold { font-weight:bold !important; } div.normal,p.normal,span.normal,strong.normal,em.normal,i.normal,a.normal { font-weight:normal !important; } div.italic,p.italic,span.italic,strong.italic,em.italic,i.italic,a.italic { font-style:italic !important; } .line-through,.strike { text-decoration:line-through; } .ellipsis,.fold { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .disable-selection { -webkit-touch-callout:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; } .no-transition { transition:none !important; } /* handle scrolling */ html.scroll-hold { height:calc(100vh - 1px); } html.scroll-hold body { position:fixed; width:100%; height:100%; overflow:hidden; } /* paragraph styles */ p.paragraph { vertical-align:baseline; } p.paragraph + p.paragraph { margin-top:12px; } div.paragraph > p { vertical-align:baseline; line-height:1.8; } div.paragraph > p + p { margin-top:12px; } /*.paragraph-with-tags-and-labels { line-height:32px; vertical-align:baseline; }*/ /* line-height */ .lh100p { line-height:1.0 !important; } .lh110p { line-height:1.1 !important; } .lh120p { line-height:1.2 !important; } .lh130p { line-height:1.3 !important; } .lh140p { line-height:1.4 !important; } .lh150p { line-height:1.5 !important; } .lh160p { line-height:1.6 !important; } .lh170p { line-height:1.7 !important; } .lh180p { line-height:1.8 !important; } .lh190p { line-height:1.9 !important; } .lh200p { line-height:2.0 !important; } .lh210p { line-height:2.1 !important; } .lh220p { line-height:2.2 !important; } .lh230p { line-height:2.3 !important; } .lh240p { line-height:2.4 !important; } .lh250p { line-height:2.5 !important; } .lh260p { line-height:2.6 !important; } .lh270p { line-height:2.7 !important; } .lh280p { line-height:2.8 !important; } .lh290p { line-height:2.9 !important; } .lh300p { line-height:3.0 !important; } /* border styles */ .r0 { border-radius:0 !important; } .r1 { border-radius:1px !important; } .r2 { border-radius:2px !important; } .r3 { border-radius:3px !important; } .r4 { border-radius:4px !important; } .r5 { border-radius:5px !important; } .r6 { border-radius:6px !important; } .r7 { border-radius:7px !important; } .r8 { border-radius:8px !important; } .r9 { border-radius:9px !important; } .r10 { border-radius:10px !important; } .r12 { border-radius:12px !important; } .r16 { border-radius:16px !important; } .r20 { border-radius:20px !important; } .r30 { border-radius:30px !important; } .r40 { border-radius:40px !important; } .r50p { border-radius:50% !important; } .r100p { border-radius:100% !important; } .top-r2 { border-radius:2px 2px 0 0 !important; } .top-r3 { border-radius:3px 3px 0 0 !important; } .top-r4 { border-radius:4px 4px 0 0 !important; } .top-r5 { border-radius:5px 5px 0 0 !important; } .top-r6 { border-radius:6px 6px 0 0 !important; } .top-r7 { border-radius:7px 7px 0 0 !important; } .top-r8 { border-radius:8px 8px 0 0 !important; } .top-r9 { border-radius:9px 9px 0 0 !important; } .top-r10 { border-radius:10px 10px 0 0 !important; } .top-r12 { border-radius:12px 12px 0 0 !important; } .top-r16 { border-radius:16px 16px 0 0 !important; } .right-r2 { border-radius:0 2px 2px 0 !important; } .right-r3 { border-radius:0 3px 3px 0 !important; } .right-r4 { border-radius:0 4px 4px 0 !important; } .right-r5 { border-radius:0 5px 5px 0 !important; } .right-r6 { border-radius:0 6px 6px 0 !important; } .right-r7 { border-radius:0 7px 7px 0 !important; } .right-r8 { border-radius:0 8px 8px 0 !important; } .right-r9 { border-radius:0 9px 9px 0 !important; } .right-r10 { border-radius:0 10px 10px 0 !important; } .right-r12 { border-radius:0 12px 12px 0 !important; } .right-r16 { border-radius:0 16px 16px 0 !important; } .bottom-r2 { border-radius:0 0 2px 2px !important; } .bottom-r3 { border-radius:0 0 3px 3px !important; } .bottom-r4 { border-radius:0 0 4px 4px !important; } .bottom-r5 { border-radius:0 0 5px 5px !important; } .bottom-r6 { border-radius:0 0 6px 6px !important; } .bottom-r7 { border-radius:0 0 7px 7px !important; } .bottom-r8 { border-radius:0 0 8px 8px !important; } .bottom-r9 { border-radius:0 0 9px 9px !important; } .bottom-r10 { border-radius:0 0 10px 10px !important; } .bottom-r12 { border-radius:0 0 12px 12px !important; } .bottom-r16 { border-radius:0 0 16px 16px !important; } .left-r2 { border-radius:2px 0 0 2px !important; } .left-r3 { border-radius:3px 0 0 3px !important; } .left-r4 { border-radius:4px 0 0 4px !important; } .left-r5 { border-radius:5px 0 0 5px !important; } .left-r6 { border-radius:6px 0 0 6px !important; } .left-r7 { border-radius:7px 0 0 7px !important; } .left-r8 { border-radius:8px 0 0 8px !important; } .left-r9 { border-radius:9px 0 0 9px !important; } .left-r10 { border-radius:10px 0 0 10px !important; } .left-r12 { border-radius:12px 0 0 12px !important; } .left-r16 { border-radius:16px 0 0 16px !important; } /* opacity */ .op25 { opacity:0.25 !important; } .op50 { opacity:0.5 !important; } .op75 { opacity:0.75 !important; } .op80 { opacity:0.8 !important; } .op85 { opacity:0.85 !important; } .op90 { opacity:0.9 !important; } .hover25:hover { opacity:0.25 !important; } .hover50:hover { opacity:0.5 !important; } .hover75:hover { opacity:0.75 !important; } .hover80:hover { opacity:0.8 !important; } .hover85:hover { opacity:0.85 !important; } .hover90:hover { opacity:0.9 !important; } .hover100:hover { opacity:1.0 !important; } /* width and height */ .wauto { width:auto !important; } .w1 { width:1px !important; } .w2 { width:2px !important; } .w3 { width:3px !important; } .w4 { width:4px !important; } .w5 { width:5px !important; } .w6 { width:6px !important; } .w7 { width:7px !important; } .w8 { width:8px !important; } .w9 { width:9px !important; } .w10 { width:10px !important; } .w12 { width:12px !important; } .w15 { width:15px !important; } .w16 { width:16px !important; } .w20 { width:20px !important; } .w24 { width:24px !important; } .w25 { width:25px !important; } .w30 { width:30px !important; } .w32 { width:32px !important; } .w36 { width:36px !important; } .w40 { width:40px !important; } .w48 { width:48px !important; } .w50 { width:50px !important; } .w60 { width:60px !important; } .w70 { width:70px !important; } .w80 { width:80px !important; } .w90 { width:90px !important; } .w100 { width:100px !important; } .w110 { width:110px !important; } .w120 { width:120px !important; } .w130 { width:130px !important; } .w140 { width:140px !important; } .w150 { width:150px !important; } .w160 { width:160px !important; } .w170 { width:170px !important; } .w180 { width:180px !important; } .w190 { width:190px !important; } .w200 { width:200px !important; } .w210 { width:210px !important; } .w220 { width:220px !important; } .w230 { width:230px !important; } .w240 { width:240px !important; } .w250 { width:250px !important; } .w260 { width:260px !important; } .w270 { width:270px !important; } .w280 { width:280px !important; } .w290 { width:290px !important; } .w300 { width:300px !important; } .w320 { width:320px !important; } .w350 { width:350px !important; } .w400 { width:400px !important; } .w450 { width:450px !important; } .w500 { width:500px !important; } .w600 { width:600px !important; } .w700 { width:700px !important; } .w800 { width:800px !important; } .w900 { width:900px !important; } .w1000 { width:1000px !important; } .w1p { width:1% !important; } .w10p { width:10% !important; } .w20p { width:20% !important; } .w25p { width:25% !important; } .w30p { width:30% !important; } .w33p { width:33% !important; } .w40p { width:40% !important; } .w45p { width:45% !important; } .w50p { width:50% !important; } .w60p { width:60% !important; } .w70p { width:70% !important; } .w80p { width:80% !important; } .w90p { width:90% !important; } .w100p { width:100% !important; } .minw10 { min-width:10px; } .minw20 { min-width:20px; } .minw30 { min-width:30px; } .minw40 { min-width:40px; } .minw50 { min-width:50px; } .minw60 { min-width:60px; } .minw70 { min-width:70px; } .minw80 { min-width:80px; } .minw90 { min-width:90px; } .minw100 { min-width:100px; } .minw150 { min-width:150px; } .minw180 { min-width:180px; } .minw200 { min-width:200px; } .minw210 { min-width:210px; } .minw220 { min-width:220px; } .minw230 { min-width:230px; } .minw240 { min-width:240px; } .minw250 { min-width:250px; } .minw300 { min-width:300px; } .minw350 { min-width:350px; } .minw400 { min-width:400px; } .maxw10 { max-width:10px; } .maxw20 { max-width:20px; } .maxw30 { max-width:30px; } .maxw40 { max-width:40px; } .maxw50 { max-width:50px; } .maxw60 { max-width:60px; } .maxw70 { max-width:70px; } .maxw80 { max-width:80px; } .maxw90 { max-width:90px; } .maxw100 { max-width:100px; } .maxw150 { max-width:150px; } .maxw200 { max-width:200px; } .maxw250 { max-width:250px; } .maxw300 { max-width:300px; } .maxw400 { max-width:400px; } .maxw100p { max-width:100%; } .hauto { height:auto !important; } .h1 { height:1px !important; } .h2 { height:2px !important; } .h3 { height:3px !important; } .h4 { height:4px !important; } .h5 { height:5px !important; } .h6 { height:6px !important; } .h7 { height:7px !important; } .h8 { height:8px !important; } .h9 { height:9px !important; } .h10 { height:10px !important; } .h12 { height:12px !important; } .h15 { height:15px !important; } .h16 { height:16px !important; } .h20 { height:20px !important; } .h24 { height:24px !important; } .h25 { height:25px !important; } .h30 { height:30px !important; } .h32 { height:32px !important; } .h35 { height:35px !important; } .h36 { height:36px !important; } .h40 { height:40px !important; } .h48 { height:48px !important; } .h50 { height:50px !important; } .h60 { height:60px !important; } .h70 { height:70px !important; } .h80 { height:80px !important; } .h90 { height:90px !important; } .h100 { height:100px !important; } .h110 { height:110px !important; } .h120 { height:120px !important; } .h130 { height:130px !important; } .h140 { height:140px !important; } .h150 { height:150px !important; } .h160 { height:160px !important; } .h170 { height:170px !important; } .h180 { height:180px !important; } .h190 { height:190px !important; } .h200 { height:200px !important; } .h210 { height:210px !important; } .h220 { height:220px !important; } .h230 { height:230px !important; } .h240 { height:240px !important; } .h250 { height:250px !important; } .h260 { height:260px !important; } .h270 { height:270px !important; } .h280 { height:280px !important; } .h290 { height:290px !important; } .h300 { height:300px !important; } .h320 { height:320px !important; } .h350 { height:300px !important; } .h400 { height:400px !important; } .h450 { height:450px !important; } .h500 { height:500px !important; } .h600 { height:600px !important; } .h700 { height:700px !important; } .h800 { height:800px !important; } .h900 { height:900px !important; } .h1000 { height:1000px !important; } .h1p { height:1% !important; } .h33p { height:33% !important; } .h50p { height:50% !important; } .h100p { height:100% !important; } .minh50 { min-height:50px; } .minh70 { min-height:70px; } .minh80 { min-height:80px; } .minh90 { min-height:90px; } .minh100 { min-height:100px; } .minh150 { min-height:150px; } .minh160 { min-height:160px; } .minh200 { min-height:200px; } .minh400 { min-height:400px; } .maxh50 { max-height:50px; } .maxh100 { max-height:100px; } .maxh150 { max-height:150px; } .maxh200 { max-height:200px; } .maxh400 { max-height:400px; } /* margins and paddings */ .mauto { margin-left:auto !important; margin-right:auto !important; } .mrauto { margin-right:auto !important; } .mlauto { margin-left:auto !important; } .m0 { margin:0px !important; } .m1 { margin:1px !important; } .m2 { margin:2px !important; } .m3 { margin:3px !important; } .m4 { margin:4px !important; } .m5 { margin:5px !important; } .m6 { margin:6px !important; } .m7 { margin:7px !important; } .m8 { margin:8px !important; } .m9 { margin:9px !important; } .m10 { margin:10px !important; } .m12 { margin:12px !important; } .m15 { margin:15px !important; } .m16 { margin:16px !important; } .m20 { margin:20px !important; } .m24 { margin:24px !important; } .m25 { margin:25px !important; } .m30 { margin:30px !important; } .m40 { margin:40px !important; } .m50 { margin:50px !important; } .mb0 { margin-bottom:0px !important; } .mb1 { margin-bottom:1px !important; } .mb2 { margin-bottom:2px !important; } .mb3 { margin-bottom:3px !important; } .mb4 { margin-bottom:4px !important; } .mb5 { margin-bottom:5px !important; } .mb6 { margin-bottom:6px !important; } .mb7 { margin-bottom:7px !important; } .mb8 { margin-bottom:8px !important; } .mb9 { margin-bottom:9px !important; } .mb10 { margin-bottom:10px !important; } .mb12 { margin-bottom:12px !important; } .mb15 { margin-bottom:15px !important; } .mb16 { margin-bottom:16px !important; } .mb20 { margin-bottom:20px !important; } .mb24 { margin-bottom:24px !important; } .mb25 { margin-bottom:25px !important; } .mb30 { margin-bottom:30px !important; } .mb32 { margin-bottom:32px !important; } .mb40 { margin-bottom:40px !important; } .mb50 { margin-bottom:50px !important; } .mb60 { margin-bottom:60px !important; } .mb70 { margin-bottom:70px !important; } .mb80 { margin-bottom:80px !important; } .mb90 { margin-bottom:90px !important; } .mb100 { margin-bottom:100px !important; } .mb110 { margin-bottom:110px !important; } .mb120 { margin-bottom:120px !important; } .mb130 { margin-bottom:130px !important; } .mb140 { margin-bottom:140px !important; } .mb150 { margin-bottom:150px !important; } .mb160 { margin-bottom:160px !important; } .mb170 { margin-bottom:170px !important; } .mb180 { margin-bottom:180px !important; } .mb190 { margin-bottom:190px !important; } .mb200 { margin-bottom:200px !important; } .mb300 { margin-bottom:300px !important; } .mt0 { margin-top:0px !important; } .mt1 { margin-top:1px !important; } .mt2 { margin-top:2px !important; } .mt3 { margin-top:3px !important; } .mt4 { margin-top:4px !important; } .mt5 { margin-top:5px !important; } .mt6 { margin-top:6px !important; } .mt7 { margin-top:7px !important; } .mt8 { margin-top:8px !important; } .mt9 { margin-top:9px !important; } .mt10 { margin-top:10px !important; } .mt12 { margin-top:12px !important; } .mt15 { margin-top:15px !important; } .mt16 { margin-top:16px !important; } .mt20 { margin-top:20px !important; } .mt24 { margin-top:24px !important; } .mt25 { margin-top:25px !important; } .mt30 { margin-top:30px !important; } .mt32 { margin-top:32px !important; } .mt40 { margin-top:40px !important; } .mt50 { margin-top:50px !important; } .mt60 { margin-top:60px !important; } .mt70 { margin-top:70px !important; } .mt80 { margin-top:80px !important; } .mt90 { margin-top:90px !important; } .mt100 { margin-top:100px !important; } .mt110 { margin-top:110px !important; } .mt120 { margin-top:120px !important; } .mt130 { margin-top:130px !important; } .mt140 { margin-top:140px !important; } .mt150 { margin-top:150px !important; } .mt160 { margin-top:160px !important; } .mt170 { margin-top:170px !important; } .mt180 { margin-top:180px !important; } .mt190 { margin-top:190px !important; } .mt200 { margin-top:200px !important; } .mt300 { margin-top:300px !important; } .mt-1 { margin-top:-1px !important; } .mt-2 { margin-top:-2px !important; } .mt-3 { margin-top:-3px !important; } .mt-4 { margin-top:-4px !important; } .mt-5 { margin-top:-5px !important; } .mt-10 { margin-top:-10px !important; } .mt-20 { margin-top:-20px !important; } .mt-30 { margin-top:-30px !important; } .mr0 { margin-right:0px !important; } .mr1 { margin-right:1px !important; } .mr2 { margin-right:2px !important; } .mr3 { margin-right:3px !important; } .mr4 { margin-right:4px !important; } .mr5 { margin-right:5px !important; } .mr6 { margin-right:6px !important; } .mr7 { margin-right:7px !important; } .mr8 { margin-right:8px !important; } .mr9 { margin-right:9px !important; } .mr10 { margin-right:10px !important; } .mr12 { margin-right:12px !important; } .mr15 { margin-right:15px !important; } .mr16 { margin-right:16px !important; } .mr20 { margin-right:20px !important; } .mr24 { margin-right:24px !important; } .mr25 { margin-right:25px !important; } .mr30 { margin-right:30px !important; } .mr32 { margin-right:32px !important; } .mr40 { margin-right:40px !important; } .mr50 { margin-right:50px !important; } .mr60 { margin-right:60px !important; } .mr70 { margin-right:70px !important; } .mr80 { margin-right:80px !important; } .mr90 { margin-right:90px !important; } .mr-1 { margin-right:-1px !important; } .mr-2 { margin-right:-2px !important; } .mr-3 { margin-right:-3px !important; } .mr-4 { margin-right:-4px !important; } .mr-5 { margin-right:-5px !important; } .ml0 { margin-left:0px !important; } .ml1 { margin-left:1px !important; } .ml2 { margin-left:2px !important; } .ml3 { margin-left:3px !important; } .ml4 { margin-left:4px !important; } .ml5 { margin-left:5px !important; } .ml6 { margin-left:6px !important; } .ml7 { margin-left:7px !important; } .ml8 { margin-left:8px !important; } .ml9 { margin-left:9px !important; } .ml10 { margin-left:10px !important; } .ml12 { margin-left:12px !important; } .ml15 { margin-left:15px !important; } .ml16 { margin-left:16px !important; } .ml20 { margin-left:20px !important; } .ml24 { margin-left:24px !important; } .ml25 { margin-left:25px !important; } .ml30 { margin-left:30px !important; } .ml32 { margin-left:32px !important; } .ml40 { margin-left:40px !important; } .ml50 { margin-left:50px !important; } .ml60 { margin-left:60px !important; } .ml70 { margin-left:70px !important; } .ml80 { margin-left:80px !important; } .ml90 { margin-left:90px !important; } .ml-1 { margin-left:-1px !important; } .ml-2 { margin-left:-2px !important; } .ml-3 { margin-left:-3px !important; } .ml-4 { margin-left:-4px !important; } .ml-5 { margin-left:-5px !important; } .ml-10 { margin-left:-10px !important; } .pauto { padding-left:auto !important; padding-right:auto !important; } .prauto { padding-right:auto !important; } .plauto { padding-left:auto !important; } .p0 { padding:0px !important; } .p1 { padding:1px !important; } .p2 { padding:2px !important; } .p3 { padding:3px !important; } .p4 { padding:4px !important; } .p5 { padding:5px !important; } .p6 { padding:6px !important; } .p7 { padding:7px !important; } .p8 { padding:8px !important; } .p9 { padding:9px !important; } .p10 { padding:10px !important; } .p12 { padding:12px !important; } .p15 { padding:15px !important; } .p16 { padding:16px !important; } .p20 { padding:20px !important; } .p24 { padding:24px !important; } .p25 { padding:25px !important; } .p30 { padding:30px !important; } .p40 { padding:40px !important; } .p50 { padding:50px !important; } .p60 { padding:60px !important; } .pb0 { padding-bottom:0px !important; } .pb1 { padding-bottom:1px !important; } .pb2 { padding-bottom:2px !important; } .pb3 { padding-bottom:3px !important; } .pb4 { padding-bottom:4px !important; } .pb5 { padding-bottom:5px !important; } .pb6 { padding-bottom:6px !important; } .pb7 { padding-bottom:7px !important; } .pb8 { padding-bottom:8px !important; } .pb9 { padding-bottom:9px !important; } .pb10 { padding-bottom:10px !important; } .pb12 { padding-bottom:12px !important; } .pb15 { padding-bottom:15px !important; } .pb16 { padding-bottom:16px !important; } .pb20 { padding-bottom:20px !important; } .pb24 { padding-bottom:24px !important; } .pb25 { padding-bottom:25px !important; } .pb30 { padding-bottom:30px !important; } .pb32 { padding-bottom:32px !important; } .pb40 { padding-bottom:40px !important; } .pb50 { padding-bottom:50px !important; } .pb60 { padding-bottom:60px !important; } .pb70 { padding-bottom:70px !important; } .pb80 { padding-bottom:80px !important; } .pb90 { padding-bottom:90px !important; } .pb100 { padding-bottom:100px !important; } .pb110 { padding-bottom:110px !important; } .pb120 { padding-bottom:120px !important; } .pb130 { padding-bottom:130px !important; } .pb140 { padding-bottom:140px !important; } .pb150 { padding-bottom:150px !important; } .pb160 { padding-bottom:160px !important; } .pb170 { padding-bottom:170px !important; } .pb180 { padding-bottom:180px !important; } .pb190 { padding-bottom:190px !important; } .pb200 { padding-bottom:200px !important; } .pb300 { padding-bottom:300px !important; } .pt0 { padding-top:0px !important; } .pt1 { padding-top:1px !important; } .pt2 { padding-top:2px !important; } .pt3 { padding-top:3px !important; } .pt4 { padding-top:4px !important; } .pt5 { padding-top:5px !important; } .pt6 { padding-top:6px !important; } .pt7 { padding-top:7px !important; } .pt8 { padding-top:8px !important; } .pt9 { padding-top:9px !important; } .pt10 { padding-top:10px !important; } .pt12 { padding-top:12px !important; } .pt15 { padding-top:15px !important; } .pt16 { padding-top:16px !important; } .pt20 { padding-top:20px !important; } .pt24 { padding-top:24px !important; } .pt25 { padding-top:25px !important; } .pt30 { padding-top:30px !important; } .pt32 { padding-top:32px !important; } .pt40 { padding-top:40px !important; } .pt50 { padding-top:50px !important; } .pt60 { padding-top:60px !important; } .pt70 { padding-top:70px !important; } .pt80 { padding-top:80px !important; } .pt90 { padding-top:90px !important; } .pt100 { padding-top:100px !important; } .pt110 { padding-top:110px !important; } .pt120 { padding-top:120px !important; } .pt130 { padding-top:130px !important; } .pt140 { padding-top:140px !important; } .pt150 { padding-top:150px !important; } .pt160 { padding-top:160px !important; } .pt170 { padding-top:170px !important; } .pt180 { padding-top:180px !important; } .pt190 { padding-top:190px !important; } .pt200 { padding-top:200px !important; } .pt300 { padding-top:300px !important; } .pt-1 { padding-top:-1px !important; } .pt-2 { padding-top:-2px !important; } .pt-3 { padding-top:-3px !important; } .pt-4 { padding-top:-4px !important; } .pt-5 { padding-top:-5px !important; } .pt-10 { padding-top:-10px !important; } .pt-20 { padding-top:-20px !important; } .pr0 { padding-right:0px !important; } .pr1 { padding-right:1px !important; } .pr2 { padding-right:2px !important; } .pr3 { padding-right:3px !important; } .pr4 { padding-right:4px !important; } .pr5 { padding-right:5px !important; } .pr6 { padding-right:6px !important; } .pr7 { padding-right:7px !important; } .pr8 { padding-right:8px !important; } .pr9 { padding-right:9px !important; } .pr10 { padding-right:10px !important; } .pr12 { padding-right:12px !important; } .pr15 { padding-right:15px !important; } .pr16 { padding-right:16px !important; } .pr20 { padding-right:20px !important; } .pr24 { padding-right:24px !important; } .pr25 { padding-right:25px !important; } .pr30 { padding-right:30px !important; } .pr32 { padding-right:32px !important; } .pr40 { padding-right:40px !important; } .pr50 { padding-right:50px !important; } .pr60 { padding-right:60px !important; } .pr70 { padding-right:70px !important; } .pr80 { padding-right:80px !important; } .pr90 { padding-right:90px !important; } .pr-1 { padding-right:-1px !important; } .pr-2 { padding-right:-2px !important; } .pr-3 { padding-right:-3px !important; } .pr-4 { padding-right:-4px !important; } .pr-5 { padding-right:-5px !important; } .pl0 { padding-left:0px !important; } .pl1 { padding-left:1px !important; } .pl2 { padding-left:2px !important; } .pl3 { padding-left:3px !important; } .pl4 { padding-left:4px !important; } .pl5 { padding-left:5px !important; } .pl6 { padding-left:6px !important; } .pl7 { padding-left:7px !important; } .pl8 { padding-left:8px !important; } .pl9 { padding-left:9px !important; } .pl10 { padding-left:10px !important; } .pl12 { padding-left:12px !important; } .pl15 { padding-left:15px !important; } .pl16 { padding-left:16px !important; } .pl20 { padding-left:20px !important; } .pl24 { padding-left:24px !important; } .pl25 { padding-left:25px !important; } .pl30 { padding-left:30px !important; } .pl32 { padding-left:32px !important; } .pl40 { padding-left:40px !important; } .pl50 { padding-left:50px !important; } .pl60 { padding-left:60px !important; } .pl70 { padding-left:70px !important; } .pl80 { padding-left:80px !important; } .pl90 { padding-left:90px !important; } .pl100 { padding-left:100px !important; } .pl-1 { padding-left:-1px !important; } .pl-2 { padding-left:-2px !important; } .pl-3 { padding-left:-3px !important; } .pl-4 { padding-left:-4px !important; } .pl-5 { padding-left:-5px !important; } .cgap0 { column-gap:0 !important; } .cgap1 { column-gap:1px !important; } .cgap2 { column-gap:2px !important; } .cgap3 { column-gap:3px !important; } .cgap4 { column-gap:4px !important; } .cgap5 { column-gap:5px !important; } .cgap6 { column-gap:6px !important; } .cgap7 { column-gap:7px !important; } .cgap8 { column-gap:8px !important; } .cgap9 { column-gap:9px !important; } .cgap10 { column-gap:10px !important; } .cgap15 { column-gap:15px !important; } .cgap20 { column-gap:20px !important; } .cgap25 { column-gap:25px !important; } .cgap30 { column-gap:30px !important; } .cgap40 { column-gap:40px !important; } .cgap50 { column-gap:50px !important; } .rgap0 { row-gap:0 !important; } .rgap5 { row-gap:5px !important; } .rgap10 { row-gap:10px !important; } .rgap15 { row-gap:15px !important; } .rgap20 { row-gap:20px !important; } .rgap25 { row-gap:25px !important; } .rgap30 { row-gap:30px !important; } .rgap40 { row-gap:40px !important; } .rgap50 { row-gap:50px !important; } /**** Cursor ****/ .pointer { cursor:pointer; } /**** Languages ****/ body,.lang-en,.lang-ja { font-family:"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif; } .lang-ko { font-family:"Noto Sans KR","Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif; } .lang-pt { font-family:"Helvetica Neue",Arial,sans-serif; } /**** Icons ****/ [class^="icon-"], [class*=" icon-"] { font-family:"icon","Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif !important; speak:none; font-style:inherit; font-weight:normal; font-variant:normal; text-transform:none; line-height:inherit; vertical-align:middle; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } .icon-debugger::before { content:"\e992"; } /**** Country flags ****/ [class^="country-flag-"] { display:inline-block; background:#f3f3f3 url(../../images/country-flag/sprite.png) top left no-repeat; background-size:16px 2346px; width:16px; line-height:inherit; vertical-align:middle; } [class^="country-flag-"].border { outline:1px solid rgba(0,0,0,0.1); } .country-flag-afg { background-position:0 -0px; height:10px; } .country-flag-alb { background-position:0 -10px; height:11px; } .country-flag-ata { background-position:0 -21px; height:10px; } .country-flag-dza { background-position:0 -31px; height:10px; } .country-flag-asm { background-position:0 -41px; height:8px; } .country-flag-and { background-position:0 -49px; height:11px; } .country-flag-ago { background-position:0 -60px; height:10px; } .country-flag-atg { background-position:0 -70px; height:10px; } .country-flag-aze { background-position:0 -80px; height:8px; } .country-flag-arg { background-position:0 -88px; height:10px; } .country-flag-aus { background-position:0 -98px; height:8px; } .country-flag-aut { background-position:0 -106px; height:10px; } .country-flag-bhs { background-position:0 -116px; height:8px; } .country-flag-bhr { background-position:0 -124px; height:9px; } .country-flag-bgd { background-position:0 -133px; height:9px; } .country-flag-arm { background-position:0 -142px; height:8px; } .country-flag-brb { background-position:0 -150px; height:10px; } .country-flag-bel { background-position:0 -160px; height:14px; } .country-flag-bmu { background-position:0 -174px; height:8px; } .country-flag-btn { background-position:0 -182px; height:10px; } .country-flag-bol { background-position:0 -192px; height:11px; } .country-flag-bih { background-position:0 -203px; height:8px; } .country-flag-bwa { background-position:0 -211px; height:10px; } .country-flag-bvt { background-position:0 -221px; height:11px; } .country-flag-bra { background-position:0 -232px; height:11px; } .country-flag-blz { background-position:0 -243px; height:10px; } .country-flag-iot { background-position:0 -253px; height:8px; } .country-flag-slb { background-position:0 -261px; height:8px; } .country-flag-vgb { background-position:0 -269px; height:8px; } .country-flag-brn { background-position:0 -277px; height:8px; } .country-flag-bgr { background-position:0 -285px; height:9px; } .country-flag-mmr { background-position:0 -294px; height:10px; } .country-flag-bdi { background-position:0 -304px; height:9px; } .country-flag-blr { background-position:0 -313px; height:8px; } .country-flag-khm { background-position:0 -321px; height:10px; } .country-flag-cmr { background-position:0 -331px; height:10px; } .country-flag-can { background-position:0 -341px; height:8px; } .country-flag-cpv { background-position:0 -349px; height:9px; } .country-flag-cym { background-position:0 -358px; height:8px; } .country-flag-caf { background-position:0 -366px; height:10px; } .country-flag-lka { background-position:0 -376px; height:8px; } .country-flag-tcd { background-position:0 -384px; height:10px; } .country-flag-chl { background-position:0 -394px; height:10px; } .country-flag-chn { background-position:0 -404px; height:10px; } .country-flag-twn { background-position:0 -414px; height:10px; } .country-flag-cxr { background-position:0 -424px; height:8px; } .country-flag-cck { background-position:0 -432px; height:8px; } .country-flag-col { background-position:0 -440px; height:10px; } .country-flag-com { background-position:0 -450px; height:9px; } .country-flag-myt { background-position:0 -459px; height:10px; } .country-flag-cog { background-position:0 -469px; height:10px; } .country-flag-cod { background-position:0 -479px; height:12px; } .country-flag-cok { background-position:0 -491px; height:8px; } .country-flag-cri { background-position:0 -499px; height:9px; } .country-flag-hrv { background-position:0 -508px; height:8px; } .country-flag-cub { background-position:0 -516px; height:8px; } .country-flag-cyp { background-position:0 -524px; height:10px; } .country-flag-cze { background-position:0 -534px; height:10px; } .country-flag-ben { background-position:0 -544px; height:10px; } .country-flag-dnk { background-position:0 -554px; height:12px; } .country-flag-dma { background-position:0 -566px; height:8px; } .country-flag-dom { background-position:0 -574px; height:10px; } .country-flag-ecu { background-position:0 -584px; height:10px; } .country-flag-slv { background-position:0 -594px; height:9px; } .country-flag-gnq { background-position:0 -603px; height:10px; } .country-flag-eth { background-position:0 -613px; height:8px; } .country-flag-eri { background-position:0 -621px; height:8px; } .country-flag-est { background-position:0 -629px; height:10px; } .country-flag-fro { background-position:0 -639px; height:11px; } .country-flag-flk { background-position:0 -650px; height:8px; } .country-flag-sgs { background-position:0 -658px; height:8px; } .country-flag-fji { background-position:0 -666px; height:8px; } .country-flag-fin { background-position:0 -674px; height:10px; } .country-flag-ala { background-position:0 -684px; height:10px; } .country-flag-fra { background-position:0 -694px; height:10px; } .country-flag-guf { background-position:0 -704px; height:10px; } .country-flag-pyf { background-position:0 -714px; height:10px; } .country-flag-atf { background-position:0 -724px; height:10px; } .country-flag-dji { background-position:0 -734px; height:10px; } .country-flag-gab { background-position:0 -744px; height:12px; } .country-flag-geo { background-position:0 -756px; height:10px; } .country-flag-gmb { background-position:0 -766px; height:10px; } .country-flag-pse { background-position:0 -776px; height:8px; } .country-flag-deu { background-position:0 -784px; height:9px; } .country-flag-gha { background-position:0 -793px; height:10px; } .country-flag-gib { background-position:0 -803px; height:8px; } .country-flag-kir { background-position:0 -811px; height:8px; } .country-flag-grc { background-position:0 -819px; height:10px; } .country-flag-grl { background-position:0 -829px; height:10px; } .country-flag-grd { background-position:0 -839px; height:9px; } .country-flag-glp { background-position:0 -848px; height:10px; } .country-flag-gum { background-position:0 -858px; height:8px; } .country-flag-gtm { background-position:0 -866px; height:10px; } .country-flag-gin { background-position:0 -876px; height:10px; } .country-flag-guy { background-position:0 -886px; height:9px; } .country-flag-hti { background-position:0 -895px; height:9px; } .country-flag-hmd { background-position:0 -904px; height:8px; } .country-flag-vat { background-position:0 -912px; height:16px; } .country-flag-hnd { background-position:0 -928px; height:8px; } .country-flag-hkg { background-position:0 -936px; height:10px; } .country-flag-hun { background-position:0 -946px; height:8px; } .country-flag-isl { background-position:0 -954px; height:11px; } .country-flag-ind { background-position:0 -965px; height:10px; } .country-flag-idn { background-position:0 -975px; height:10px; } .country-flag-irn { background-position:0 -985px; height:9px; } .country-flag-irq { background-position:0 -994px; height:10px; } .country-flag-irl { background-position:0 -1004px; height:8px; } .country-flag-isr { background-position:0 -1012px; height:11px; } .country-flag-ita { background-position:0 -1023px; height:10px; } .country-flag-civ { background-position:0 -1033px; height:10px; } .country-flag-jam { background-position:0 -1043px; height:8px; } .country-flag-jpn { background-position:0 -1051px; height:10px; } .country-flag-kaz { background-position:0 -1061px; height:8px; } .country-flag-jor { background-position:0 -1069px; height:8px; } .country-flag-ken { background-position:0 -1077px; height:10px; } .country-flag-prk { background-position:0 -1087px; height:8px; } .country-flag-kor { background-position:0 -1095px; height:10px; } .country-flag-kwt { background-position:0 -1105px; height:8px; } .country-flag-kgz { background-position:0 -1113px; height:9px; } .country-flag-lao { background-position:0 -1122px; height:10px; } .country-flag-lbn { background-position:0 -1132px; height:10px; } .country-flag-lso { background-position:0 -1142px; height:10px; } .country-flag-lva { background-position:0 -1152px; height:8px; } .country-flag-lbr { background-position:0 -1160px; height:8px; } .country-flag-lby { background-position:0 -1168px; height:8px; } .country-flag-lie { background-position:0 -1176px; height:9px; } .country-flag-ltu { background-position:0 -1185px; height:9px; } .country-flag-lux { background-position:0 -1194px; height:9px; } .country-flag-mac { background-position:0 -1203px; height:10px; } .country-flag-mdg { background-position:0 -1213px; height:10px; } .country-flag-mwi { background-position:0 -1223px; height:10px; } .country-flag-mys { background-position:0 -1233px; height:8px; } .country-flag-mdv { background-position:0 -1241px; height:10px; } .country-flag-mli { background-position:0 -1251px; height:10px; } .country-flag-mlt { background-position:0 -1261px; height:10px; } .country-flag-mtq { background-position:0 -1271px; height:10px; } .country-flag-mrt { background-position:0 -1281px; height:10px; } .country-flag-mus { background-position:0 -1291px; height:10px; } .country-flag-mex { background-position:0 -1301px; height:9px; } .country-flag-mco { background-position:0 -1310px; height:13px; } .country-flag-mng { background-position:0 -1323px; height:8px; } .country-flag-mda { background-position:0 -1331px; height:8px; } .country-flag-mne { background-position:0 -1339px; height:8px; } .country-flag-msr { background-position:0 -1347px; height:8px; } .country-flag-mar { background-position:0 -1355px; height:10px; } .country-flag-moz { background-position:0 -1365px; height:10px; } .country-flag-omn { background-position:0 -1375px; height:8px; } .country-flag-nam { background-position:0 -1383px; height:10px; } .country-flag-nru { background-position:0 -1393px; height:8px; } .country-flag-npl { background-position:0 -1401px; height:19px; } .country-flag-nld { background-position:0 -1420px; height:10px; } .country-flag-cuw { background-position:0 -1430px; height:10px; } .country-flag-abw { background-position:0 -1440px; height:10px; } .country-flag-sxm { background-position:0 -1450px; height:10px; } .country-flag-bes { background-position:0 -1460px; height:10px; } .country-flag-ncl { background-position:0 -1470px; height:8px; } .country-flag-vut { background-position:0 -1478px; height:9px; } .country-flag-nzl { background-position:0 -1487px; height:8px; } .country-flag-nic { background-position:0 -1495px; height:9px; } .country-flag-ner { background-position:0 -1504px; height:13px; } .country-flag-nga { background-position:0 -1517px; height:8px; } .country-flag-niu { background-position:0 -1525px; height:8px; } .country-flag-nfk { background-position:0 -1533px; height:8px; } .country-flag-nor { background-position:0 -1541px; height:11px; } .country-flag-mnp { background-position:0 -1552px; height:8px; } .country-flag-umi { background-position:0 -1560px; height:8px; } .country-flag-fsm { background-position:0 -1568px; height:8px; } .country-flag-mhl { background-position:0 -1576px; height:8px; } .country-flag-plw { background-position:0 -1584px; height:10px; } .country-flag-pak { background-position:0 -1594px; height:10px; } .country-flag-pan { background-position:0 -1604px; height:10px; } .country-flag-png { background-position:0 -1614px; height:12px; } .country-flag-pry { background-position:0 -1626px; height:9px; } .country-flag-per { background-position:0 -1635px; height:10px; } .country-flag-phl { background-position:0 -1645px; height:8px; } .country-flag-pcn { background-position:0 -1653px; height:8px; } .country-flag-pol { background-position:0 -1661px; height:10px; } .country-flag-prt { background-position:0 -1671px; height:10px; } .country-flag-gnb { background-position:0 -1681px; height:8px; } .country-flag-tls { background-position:0 -1689px; height:8px; } .country-flag-pri { background-position:0 -1697px; height:10px; } .country-flag-qat { background-position:0 -1707px; height:6px; } .country-flag-reu { background-position:0 -1713px; height:10px; } .country-flag-rou { background-position:0 -1723px; height:10px; } .country-flag-rus { background-position:0 -1733px; height:10px; } .country-flag-rwa { background-position:0 -1743px; height:10px; } .country-flag-blm { background-position:0 -1753px; height:10px; } .country-flag-shn { background-position:0 -1763px; height:8px; } .country-flag-kna { background-position:0 -1771px; height:10px; } .country-flag-aia { background-position:0 -1781px; height:8px; } .country-flag-lca { background-position:0 -1789px; height:8px; } .country-flag-maf { background-position:0 -1797px; height:10px; } .country-flag-spm { background-position:0 -1807px; height:10px; } .country-flag-vct { background-position:0 -1817px; height:10px; } .country-flag-smr { background-position:0 -1827px; height:12px; } .country-flag-stp { background-position:0 -1839px; height:8px; } .country-flag-sau { background-position:0 -1847px; height:10px; } .country-flag-sen { background-position:0 -1857px; height:10px; } .country-flag-srb { background-position:0 -1867px; height:10px; } .country-flag-syc { background-position:0 -1877px; height:8px; } .country-flag-sle { background-position:0 -1885px; height:10px; } .country-flag-sgp { background-position:0 -1895px; height:10px; } .country-flag-svk { background-position:0 -1905px; height:10px; } .country-flag-vnm { background-position:0 -1915px; height:10px; } .country-flag-svn { background-position:0 -1925px; height:8px; } .country-flag-som { background-position:0 -1933px; height:10px; } .country-flag-zaf { background-position:0 -1943px; height:10px; } .country-flag-zwe { background-position:0 -1953px; height:8px; } .country-flag-esp { background-position:0 -1961px; height:10px; } .country-flag-ssd { background-position:0 -1971px; height:8px; } .country-flag-sdn { background-position:0 -1979px; height:8px; } .country-flag-esh { background-position:0 -1987px; height:8px; } .country-flag-sur { background-position:0 -1995px; height:10px; } .country-flag-sjm { background-position:0 -2005px; height:11px; } .country-flag-swz { background-position:0 -2016px; height:10px; } .country-flag-swe { background-position:0 -2026px; height:10px; } .country-flag-che { background-position:0 -2036px; height:16px; } .country-flag-syr { background-position:0 -2052px; height:10px; } .country-flag-tjk { background-position:0 -2062px; height:8px; } .country-flag-tha { background-position:0 -2070px; height:10px; } .country-flag-tgo { background-position:0 -2080px; height:10px; } .country-flag-tkl { background-position:0 -2090px; height:8px; } .country-flag-ton { background-position:0 -2098px; height:8px; } .country-flag-tto { background-position:0 -2106px; height:9px; } .country-flag-are { background-position:0 -2115px; height:8px; } .country-flag-tun { background-position:0 -2123px; height:10px; } .country-flag-tur { background-position:0 -2133px; height:10px; } .country-flag-tkm { background-position:0 -2143px; height:10px; } .country-flag-tca { background-position:0 -2153px; height:8px; } .country-flag-tuv { background-position:0 -2161px; height:8px; } .country-flag-uga { background-position:0 -2169px; height:10px; } .country-flag-ukr { background-position:0 -2179px; height:10px; } .country-flag-mkd { background-position:0 -2189px; height:8px; } .country-flag-egy { background-position:0 -2197px; height:10px; } .country-flag-gbr { background-position:0 -2207px; height:8px; } .country-flag-ggy { background-position:0 -2215px; height:10px; } .country-flag-jey { background-position:0 -2225px; height:9px; } .country-flag-imn { background-position:0 -2234px; height:8px; } .country-flag-tza { background-position:0 -2242px; height:10px; } .country-flag-usa { background-position:0 -2252px; height:8px; } .country-flag-vir { background-position:0 -2260px; height:10px; } .country-flag-bfa { background-position:0 -2270px; height:10px; } .country-flag-ury { background-position:0 -2280px; height:10px; } .country-flag-uzb { background-position:0 -2290px; height:8px; } .country-flag-ven { background-position:0 -2298px; height:10px; } .country-flag-wlf { background-position:0 -2308px; height:10px; } .country-flag-wsm { background-position:0 -2318px; height:8px; } .country-flag-yem { background-position:0 -2326px; height:10px; } .country-flag-zmb { background-position:0 -2336px; height:10px; } /*======== Grid system ========*/ .container { clear:both; min-width:1024px; max-width:1140px; margin:0 auto 0 auto; padding:0 20px 0 20px; } .container.no-margin { min-width:1024px; max-width:1100px; padding:0; } .container.full { min-width:auto; max-width:100%; } .container.full.no-margin { padding:0; } .container.cover { min-width:auto; max-width:100%; padding:0; } .container.natural { padding-top:60px; padding-bottom:150px; min-height:600px; } .container.dashboard { padding-top:30px; padding-bottom:150px; min-height:600px; } .layout-single { clear:both; } .layout-form { clear:both; max-width:840px; margin-left:auto; margin-right:auto; } .layout-menu-left { display:flex; justify-content:flex-start; align-items:flex-start; column-gap:60px; } .layout-menu-left > .main { order:1; flex-grow:1; } .layout-menu-left > .menu { order:0; flex-shrink:0; width:240px; } .layout-menu-right { width:100%; display:flex; justify-content:flex-start; align-items:flex-start; column-gap:60px; } .layout-menu-right > .main { order:0; flex-grow:1; } .layout-menu-right > .menu { order:1; flex-shrink:0; width:240px; } .layout-two-columns { display:flex; justify-content:flex-start; align-items:flex-start; column-gap:40px; } .layout-two-columns > .left,.layout-two-columns > .right { width:100%; } .layout-three-columns { display:flex; justify-content:flex-start; align-items:flex-start; column-gap:40px; } .layout-three-columns > .left,.layout-three-columns > .center,.layout-three-columns > .right { width:100%; } /*======== Styles ========*/ body { /*background-color:#f6f7f7;*/ background-color:#ffffff; color:#444444; font-size:16px; /*line-height:1.5;*/ line-height:32px; vertical-align:baseline; } a { color:#239765; text-decoration:none; transition:opacity 0.2s linear; } a:hover { opacity:0.85; text-decoration:none; } a:active { opacity:0.6; text-decoration:none; } input[type="submit"],input[type="reset"],input[type="button"] { transition:opacity 0.2s linear; } input[type="submit"]:hover,input[type="reset"]:hover,input[type="button"]:hover { opacity:0.85; } input[type="submit"]:active,input[type="reset"]:active,input[type="button"]:active { opacity:0.6; } [class^="underline-"],[class*=" underline-"] { border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:inherit; } [class^="underline-dotted-"],[class*=" underline-dotted-"] { border-bottom-width:1px; border-bottom-style:dotted; border-bottom-color:inherit; } [class^="emphasis-dotted-"],[class*=" emphasis-dotted-"] { text-emphasis:filled dot; -webkit-text-emphasis:filled dot; } .disabled { opacity:0.6; cursor:default; transition:none; } .disabled:hover { opacity:0.6; } /**** Font Sizes ****/ .xxxlarge { font-size:32px; } .xxlarge { font-size:28px; } .xlarge { font-size:24px; } .large { font-size:20px; } .regular { font-size:16px; } .small { font-size:14px; } .xsmall { font-size:12px; } .xxsmall { font-size:10px; } .lh-xxxlarge, p.paragraph.xxxlarge { line-height:48px !important; } .lh-xxlarge, p.paragraph.xxlarge { line-height:42px !important; } .lh-xlarge, p.paragraph.xlarge { line-height:36px !important; } .lh-large, p.paragraph.large { line-height:30px !important; } .lh-regular, p.paragraph.regular { line-height:24px !important; } .lh-small, p.paragraph.small { line-height:21px !important; } .lh-xsmall, p.paragraph.xsmall { line-height:18px !important; } .lh-xxsmall, p.paragraph.xxsmall { line-height:15px !important; } /**** Image Sizes ****/ .size-XL { width:152px; height:152px; } .size-L { width:102px; height:102px; } .size-M { width:72px; height:72px; } .size-S { width:50px; height:50px; } .size-XS { width:30px; height:30px; } .size-XXS { width:24px; height:24px; } .size-free { width:auto; height:auto; } /**** Colors ****/ .plain { color:inherit; } .underline { border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:inherit; } .underline-dotted { border-bottom-width:1px; border-bottom-style:dotted; border-bottom-color:inherit; } .ruby-dotted { text-emphasis-color:dot; -webkit-text-emphasis-color:dot; } .border-plain { border-color:inherit; } .bg-plain,.fill-plain { background-color:inherit; } .label-plain { border-color:inherit; color:inherit; } .green { color:#239765; } .underline-green,.underline-dotted-green { border-bottom-color:#239765; } .emphasis-dotted-green { text-emphasis-color:#239765; -webkit-text-emphasis-color:#239765; } .border-green { border-color:#239765 !important; } .bg-green,.fill-green { background-color:#239765 !important; } .label-green { border-color:#239765 !important; color:#239765 !important; } .palegreen { color:#a9d6c3; } .underline-palegreen,.underline-dotted-palegreen { border-bottom-color:#a9d6c3; } .emphasis-dotted-palegreen { text-emphasis-color:#a9d6c3; -webkit-text-emphasis-color:#a9d6c3; } .border-palegreen { border-color:#a9d6c3 !important; } .bg-palegreen,.fill-palegreen { background-color:#a9d6c3 !important; } .label-palegreen { border-color:#a9d6c3 !important; color:#a9d6c3 !important; } .lightgreen { color:#eef5f4; } .underline-lightgreen,.underline-dotted-lightgreen { border-bottom-color:#eef5f4; } .emphasis-dotted-lightgreen { text-emphasis-color:#eef5f4; -webkit-text-emphasis-color:#eef5f4; } .border-lightgreen { border-color:#eef5f4 !important; } .bg-lightgreen,.fill-lightgreen { background-color:#eef5f4 !important; } .label-lightgreen { border-color:#eef5f4 !important; color:#eef5f4 !important; } .darkgreen { color:#668877; } .underline-darkgreen,.underline-dotted-darkgreen { border-bottom-color:#668877; } .emphasis-dotted-darkgreen { text-emphasis-color:#668877; -webkit-text-emphasis-color:#668877; } .border-darkgreen { border-color:#668877 !important; } .bg-darkgreen,.fill-darkgreen { background-color:#668877 !important; } .label-darkgreen { border-color:#668877 !important; color:#668877 !important; } .red { color:#ee0000; } .underline-red,.underline-dotted-red { border-bottom-color:#ee0000; } .emphasis-dotted-red { text-emphasis-color:#ee0000; -webkit-text-emphasis-color:#ee0000; } .border-red { border-color:#ee0000 !important; } .bg-red,.fill-red { background-color:#ee0000 !important; } .label-red { border-color:#ee0000 !important; color:#ee0000 !important; } .orange { color:#d94d38; } .underline-orange,.underline-dotted-orange { border-bottom-color:#d94d38; } .emphasis-dotted-orange { text-emphasis-color:#d94d38; -webkit-text-emphasis-color:#d94d38; } .border-orange { border-color:#d94d38 !important; } .bg-orange,.fill-orange { background-color:#d94d38 !important; } .label-orange { border-color:#d94d38 !important; color:#d94d38 !important; } .yellow { color:#f39801; } .underline-yellow,.underline-dotted-yellow { border-bottom-color:#f39801; } .emphasis-dotted-yellow { text-emphasis-color:#f39801; -webkit-text-emphasis-color:#f39801; } .border-yellow { border-color:#f39801 !important; } .bg-yellow,.fill-yellow { background-color:#f39801 !important; } .label-yellow { border-color:#f39801 !important; color:#f39801 !important; } .lightyellow { color:#fdf1dc; } .underline-lightyellow,.underline-dotted-lightyellow { border-bottom-color:#fdf1dc; } .emphasis-dotted-lightyellow { text-emphasis-color:#fdf1dc; -webkit-text-emphasis-color:#fdf1dc; } .border-lightyellow { border-color:#fdf1dc !important; } .bg-lightyellow,.fill-lightyellow { background-color:#fdf1dc !important; } .label-lightyellow { border-color:#fdf1dc !important; color:#fdf1dc !important; } .gray { color:#999999; } .underline-gray,.underline-dotted-gray { border-bottom-color:#999999; } .emphasis-dotted-gray { text-emphasis-color:#999999; -webkit-text-emphasis-color:#999999; } .border-gray { border-color:#999999 !important; } .bg-gray { background-color:#fcfcfc !important; } .fill-gray { background-color:#999999 !important; } .label-gray { border-color:#999999 !important; color:#999999 !important; } .lightgray { color:#bbbbbb; } .underline-lightgray,.underline-dotted-lightgray { border-bottom-color:#bbbbbb; } .emphasis-dotted-lightgray { text-emphasis-color:#bbbbbb; -webkit-text-emphasis-color:#bbbbbb; } .border-lightgray { border-color:#bbbbbb !important; } .bg-lightgray { background-color:#fefefe !important; } .fill-lightgray { background-color:#bbbbbb !important; } .label-lightgray { border-color:#bbbbbb !important; color:#bbbbbb !important; } .bordergray { color:#cccccc; } .underline-bordergray,.underline-dotted-bordergray { border-bottom-color:#cccccc; } .emphasis-dotted-bordergray { text-emphasis-color:#cccccc; -webkit-text-emphasis-color:#cccccc; } .border-bordergray { border-color:#cccccc !important; } .bg-bordergray,.fill-bordergray { background-color:#cccccc !important; } .label-bordergray { border-color:#cccccc !important; color:#cccccc !important; } .borderlightgray { color:#e1e1e1; } .underline-borderlightgray,.underline-dotted-borderlightgray { border-bottom-color:#e1e1e1; } .emphasis-dotted-borderlightgray { text-emphasis-color:#e1e1e1; -webkit-text-emphasis-color:#e1e1e1; } .border-borderlightgray { border-color:#e1e1e1 !important; } .bg-borderlightgray,.fill-borderlightgray { background-color:#e1e1e1 !important; } .label-borderlightgray { border-color:#e1e1e1 !important; color:#e1e1e1 !important; } .bggray { color:#f6f7f7; } .underline-bggray,.underline-dotted-bggray { border-bottom-color:#f6f7f7; } .emphasis-dotted-bggray { text-emphasis-color:#f6f7f7; -webkit-text-emphasis-color:#f6f7f7; } .border-bggray { border-color:#f6f7f7 !important; } .bg-bggray,.fill-bggray { background-color:#f6f7f7 !important; } .label-bggray { border-color:#f6f7f7 !important; color:#f6f7f7 !important; } .textgray { color:#444444; } .underline-textgray,.underline-dotted-textgray { border-bottom-color:#444444; } .emphasis-dotted-textgray { text-emphasis-color:#444444; -webkit-text-emphasis-color:#444444; } .border-textgray { border-color:#444444 !important; } .bg-textgray { background-color:#444444 !important; } .fill-textgray { background-color:#444444 !important; } .label-textgray { border-color:#444444 !important; color:#444444 !important; } .darkgray { color:#888888; } .underline-darkgray,.underline-dotted-darkgray { border-bottom-color:#888888; } .emphasis-dotted-darkgray { text-emphasis-color:#888888; -webkit-text-emphasis-color:#888888; } .border-darkgray { border-color:#888888 !important; } .bg-darkgray { background-color:#f3f3f3 !important; } .fill-darkgray { background-color:#888888 !important; } .label-darkgray { border-color:#888888 !important; color:#888888 !important; } .deepgray { color:#555555; } .underline-deepgray,.underline-dotted-deepgray { border-bottom-color:#555555; } .emphasis-dotted-deepgray { text-emphasis-color:#555555; -webkit-text-emphasis-color:#888888; } .border-deepgray { border-color:#555555 !important; } .bg-deepgray { background-color:#eeeeee !important; } .fill-deepgray { background-color:#555555 !important; } .label-deepgray { border-color:#555555 !important; color:#555555 !important; } .black { color:#222222; } .underline-black,.underline-dotted-black { border-bottom-color:#222222; } .emphasis-dotted-black { text-emphasis-color:#222222; -webkit-text-emphasis-color:#222222; } .border-black { border-color:#222222 !important; } .bg-black,.fill-black { background-color:#222222 !important; } .label-black { border-color:#222222 !important; color:#222222 !important; } .white { color:#ffffff; } .underline-white,.underline-dotted-white { border-bottom-color:#ffffff; } .emphasis-dotted-white { text-emphasis-color:#ffffff; -webkit-text-emphasis-color:#ffffff; } .border-white { border-color:#ffffff !important; } .bg-white,.fill-white { background-color:#ffffff !important; } .label-white { border-color:#ffffff !important; color:#ffffff !important; } .kimini-green { color:#008672; } .underline-kimini-green,.underline-dotted-kimini-green { border-bottom-color:#008672; } .emphasis-dotted-kimini-green { text-emphasis-color:#008672; -webkit-text-emphasis-color:#008672; } .border-kimini-green { border-color:#008672 !important; } .bg-kimini-green,.fill-kimini-green { background-color:#008672 !important; } .label-kimini-green { border-color:#008672 !important; color:#008672 !important; } .kimini-blue { color:#00b6eb; } .underline-kimini-blue,.underline-dotted-kimini-blue { border-bottom-color:#00b6eb; } .emphasis-dotted-kimini-blue { text-emphasis-color:#00b6eb; -webkit-text-emphasis-color:#00b6eb; } .border-kimini-blue { border-color:#00b6eb !important; } .bg-kimini-blue,.fill-kimini-blue { background-color:#00b6eb !important; } .label-kimini-blue { border-color:#00b6eb !important; color:#00b6eb !important; } .kimini-lime { color:#9ed238; } .underline-kimini-lime,.underline-dotted-kimini-lime { border-bottom-color:#9ed238; } .emphasis-dotted-kimini-lime { text-emphasis-color:#9ed238; -webkit-text-emphasis-color:#9ed238; } .border-kimini-lime { border-color:#9ed238 !important; } .bg-kimini-lime,.fill-kimini-lime { background-color:#9ed238 !important; } .label-kimini-lime { border-color:#9ed238 !important; color:#9ed238 !important; } .facebook { color:#3b5999; } .underline-facebook,.underline-dotted-facebook { border-bottom-color:#3b5999; } .emphasis-dotted-facebook { text-emphasis-color:#3b5999; -webkit-text-emphasis-color:#3b5999; } .border-facebook { border-color:#3b5999 !important; } .bg-facebook,.fill-facebook { background-color:#3b5999 !important; } .label-facebook { border-color:#3b5999 !important; color:#3b5999 !important; } .google { color:#dc4e41; } .underline-google,.underline-dotted-google { border-bottom-color:#dc4e41; } .emphasis-dotted-google { text-emphasis-color:#dc4e41; -webkit-text-emphasis-color:#dc4e41; } .border-google { border-color:#dc4e41 !important; } .bg-google,.fill-google { background-color:#dc4e41 !important; } .label-google { border-color:#dc4e41 !important; color:#dc4e41 !important; } .border-none,.no-border { border:none; } .border-dotted { border-style:dotted; } .fill-none,.fill-transparent,.bg-none,.bg-transparent { background:transparent; } .fill-dotted,.bg-dotted { background:#f9f9f9 url("../../images/common/bg.dotted.png") top left repeat; } .fill-dotted,.bg-mesh { background:#f9f9f9 url("../../images/common/bg.mesh.png") top left repeat; } /**** Gradients ****/ .bg-gradient-green { background:rgb(35,151,101); background:linear-gradient(120deg, rgba(35,151,101,1) 30%, rgba(76,171,86,1) 100%); } .bg-gradient-green-to-blue { background:rgb(35,151,101); background:linear-gradient(120deg, rgba(35,151,101,1) 20%, rgba(22,163,152,1) 100%); } .bg-gradient-kimini-green-to-blue { background:rgb(0,134,114); background:linear-gradient(120deg, rgba(0,134,114,1) 0%, rgba(0,182,235,1) 100%); } .bg-gradient-kimini-lime-to-blue { background:rgb(158,210,56); background:linear-gradient(120deg, rgba(158,210,56,1) 0%, rgba(0,182,235,1) 100%); } .bg-gradient-kimini-green-to-lime { background:rgb(0,134,114); background:linear-gradient(120deg, rgba(0,134,114,1) 0%, rgba(158,210,56,1) 100%); } .bg-gradient-kimini { background:rgb(0,134,114); background:linear-gradient(120deg, rgba(0,134,114,1) 0%, rgba(158,210,56,1) 50%, rgba(0,182,235,1) 100%); } /**** anchor styles ****/ a.plain { color:inherit; } a.plain:hover { color:#239765; } a.inherit { color:inherit; } a.inherit:hover { color:inherit; } /*======== Layout ========*/ /**** header ****/ header { width:100%; height:50px; background-color:#ffffff; position:relative; } header > div { position:fixed; top:0; left:0; width:100%; height:50px; background-color:#ffffff; box-shadow:0 0 0 1px #f1f3f3; z-index:2000; } header > div > div { display:table; width:100%; height:100%; min-width:1024px; max-width:1140px; margin:0 auto 0 auto; padding:0 20px 0 20px; position:relative; } header > div > div > div.logo { display:table-cell; text-align:left; vertical-align:middle; } header > div > div > div.logo .kimini-logo { width:120px; height:38px; } header > div > div > ul.buttons { display:table-cell; text-align:right; vertical-align:middle; font-size:0; } header > div > div > ul.buttons > li { display:inline-block; font-size:16px; height:36px; } header > div > div > ul.buttons > li + li { margin-left:15px; } header > div > div > ul.buttons > li:first-child { position:relative; top:-1px; } header a.button { font-size:16px; display:inline-block; width:36px; height:36px; border-radius:50%; background-color:#f3f3f3; color:#aaaaaa; position:relative; transition:background-color 0.2s linear; } header a.button::before { content:"\e9e1"; font-family:"icon"; display:block; width:24px; height:24px; line-height:24px; font-size:24px; text-align:center; vertical-align:middle; position:absolute; top:6px; left:6px; } header a.button:hover,header a.button:active { opacity:1.0; background-color:#efefef; color:#999999; transition:color 0.2s linear; } header a.button > label { display:none; } header a.button.button-menu::before { content:"\e9e1"; } header a.button.button-help::before { content:"\e9b8"; font-size:18px; } header a.button.button-help > label { display:inline-block; position:absolute; top:2px; left:42px; text-align:left; white-space:nowrap; font-size:16px; color:#444444; cursor:pointer; } header a.button.button-cancel::before { content:"\e98e"; font-size:20px; } header a.button.button-suspend::before { content:"\e935"; font-size:18px; } header a.button.button-message::before { content:"\ebbe"; font-size:18px; } header a.button.button-message > i.badge { position:absolute; top:-1px; left:20px; z-index:10; } header a.button.button-message:hover > i,header a.button.button-message:active > i { background-color:#ee3333; } header a.button.button-account { width:auto; height:30px; border-radius:none; background-color:transparent; color:#444444; padding:3px 18px 0 0; transition:opacity 0.2s linear; } header a.button.button-account::before { display:none; } header a.button.button-account > img.thumb { width:30px; height:30px; border-radius:50%; border:none; background-color:#f3f3f3; } header a.button.button-account > label { display:inline-block; padding-left:8px; position:relative; top:1px; cursor:pointer; } header a.button.button-account:hover { opacity:0.8; } header a.button.button-login { width:auto; height:30px; border-radius:none; background-color:transparent; color:#444444; padding:3px 18px 0 0; transition:opacity 0.2s linear; } header a.button.button-login::before { display:none; } header a.button.button-login:hover { opacity:0.8; } i.badge { font-size:12px; line-height:20px; min-width:20px; height:20px; border-radius:10px; padding:0 5px 0 5px; color:#ffffff; background-color:#ee0000; text-align:center; vertical-align:middle; white-space:nowrap; } .ribbon { width:100%; background-color:#239765; color:#ffffff; box-shadow:0 0 0 1px #f1f3f3; } .ribbon > div { width:100%; height:100%; min-width:1024px; max-width:1140px; margin:0 auto 0 auto; } .ribbon > div > div { display:flex; justify-content:center; flex-wrap:nowrap; align-items:center; gap:15px 20px; padding:10px; } /**** footer ****/ footer { background-color:#f6f7f7; position:relative; } footer.border-top { border:1px solid #e1e1e1; } footer > div { min-width:1024px; max-width:1140px; min-height:200px; margin:0 auto 0 auto; padding:40px 20px 60px 20px; position:relative; } footer > div > .menu { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:nowrap; padding:20px 20px 60px 0; } footer > div > .menu > div { display:inline-block; text-align:left; } footer > div > .menu > div > .heading { font-size:18px; color:#aaaaaa; margin:0 0 16px 0; } footer > div > .menu > div > ul > li + li { margin-top:4px; } footer > div > .menu > div > ul > li a { font-size:14px; color:#666666; } footer > div > .menu > div > ul > li a:hover { color:#239765; } footer > div > .menu > div > ul > li.indent { margin-top:0 !important; line-height:22px; } footer > div > .menu > div > ul > li.indent a { font-size:12px; color:#aaaaaa; } footer > div > .menu > div > ul > li.indent:before { display:inline-block; content:"└"; color:#bbbbbb; font-size:12px; margin-right:6px; } footer > div > .media { background-color:#ffffff; border-radius:10px; padding:20px; margin:0 0 20px 0; display:flex; justify-content:flex-start; flex-wrap:nowrap; align-items:center; } footer > div > .media > .logo { display:inline-block; width:260px; text-align:center; margin-right:20px; } footer > div > .media > .logo .kimini-logo { width:130px; height:50px; } footer > div > .media > .links { display:inline-block; } footer > div > .media > .links > div { position:relative; top:-2px; } footer > div > .media > .links > div > a { color:#444444; } footer > div > .media > .links > div > a > span { margin-right:8px; } footer > div > .media > .links > div > a > strong { font-weight:normal; font-size:22px; } footer > div > .media > .links > ul { display:block; } footer > div > .media > .links > ul > li { display:inline-block; margin-right:20px; } footer > div > .media > .links > ul > li > a { font-size:14px; color:#889290; } footer > div > .media > .links > ul > li > a:hover { color:#239765; } footer > div > .bottom { display:flex; justify-content:space-between; flex-wrap:wrap; align-items:center; } footer > div > .bottom > .copyright { display:inline-block; font-size:14px; color:#bbbbbb; padding:0 0 0 3px; position:relative; top:2px; } footer > div > .bottom > .gakken-group { display:inline-block; } footer > div > .bottom > .gakken-group .gakken-group-logo { width:120px; height:18px; position:relative; top:-2px; } footer > div > a.to-top { width:50px; height:50px; position:absolute; top:-25px; right:20px; background-color:#f6f7f7; color:#777777; border-radius:25px; display:flex; justify-content:center; align-items:center; } footer > div > a.to-top:hover { opacity:1.0; color:#aaaaaa; } /**** .navigation ****/ /* bar (for mobile) */ .navigation > .bar { display:none; position:fixed; bottom:0; left:0; width:100%; height:36px; background-color:#eff2f2; box-shadow:0 0 2px 1px rgba(0,0,0,0.1); text-align:center; z-index:1001; } .navigation > .bar::before { content:""; display:block; width:60px; height:60px; border-radius:50%; position:relative; top:-30px; z-index:0; background-color:inherit; margin:0 auto 0 auto; box-shadow:0 0 2px 1px rgba(0,0,0,0.1); } .navigation > .bar::after { content:""; display:block; width:100%; height:100%; position:absolute; top:0; left:0; background-color:inherit; z-index:1; } .navigation > .bar > .buttons { width:100%; height:100%; position:absolute; top:0; left:0; z-index:2; } .navigation > .bar > .buttons a.button-launcher { display:block; width:60px; height:36px; margin:0 auto 0 auto; position:relative; cursor:pointer; /*background-color:#ffcccc;*/ } .navigation > .bar > .buttons a.button-launcher::before { content:""; display:block; width:90px; height:60px; position:absolute; top:-40px; left:-15px; /*background:#ccccff;*/ } .navigation > .bar > .buttons a.button-launcher::after { content:"\ec7c"; font-family:"icon"; display:block; font-size:18px; width:30px; height:30px; line-height:30px; text-align:center; vertical-align:middle; color:#555555; position:absolute; top:-18px; left:15px; } .navigation > .bar > .buttons a.button-launcher.expanded::after { content:"\e98e"; } .navigation > .bar > .buttons a.button-launcher > label { position:absolute; bottom:7px; left:0; width:100%; height:36px; padding-top:12px; text-align:center; font-size:10px; color:#777777; text-indent:3px; } /* launcher (for mobile) */ .navigation > .launcher { display:none; position:fixed; bottom:0; left:0; width:100%; height:100%; background-color:rgba(240,242,242,0.9); color:#444444; background:rgb(246,247,247); background:linear-gradient(0deg, rgba(246,247,247,0.95) 25%, rgba(246,247,247,0.75) 100%); z-index:1000; } .navigation > .launcher > .swipe { position:absolute; bottom:36px; left:0; width:100%; height:100%; } .navigation > .launcher > .buttons { position:absolute; bottom:36px; left:50%; width:100%; height:200px; text-align:center; } .navigation > .launcher > .buttons > span.background { content:""; display:block; width:230px; height:230px; border-radius:50%; border:1px solid #239765; background-color:#eef5f4; position:absolute; bottom:-85px; left:-115px; z-index:0; } .navigation > .launcher > .buttons > a.button { display:block; width:44px; height:44px; border-radius:50%; position:relative; cursor:pointer; text-align:center; background:rgb(35,151,101); background:linear-gradient(30deg, rgba(35,151,101,1) 30%, rgba(76,171,86,1) 100%); position:absolute; z-index:1; } .navigation > .launcher > .buttons > a.button::before { content:"\ea81"; font-family:"icon"; display:block; width:20px; height:20px; font-size:16px; line-height:20px; color:#ffffff; text-align:center; vertical-align:middle; margin:11px auto 0 auto; } .navigation > .launcher > .buttons > a.button > label { position:absolute; bottom:-11px; left:-28px; width:100px; padding:4px 0 3px 0; font-size:12px; line-height:10px; text-align:center; vertical-align:middle; color:#555555; background:#ffffff; border-radius:4px; border:1px solid #239765; } .navigation > .launcher > .buttons > a.button.button-speaking-test > label { left:-38px; width:120px; } .navigation > .launcher > .buttons > a.button.button-drill > label { left:-43px; width:130px; } .navigation > .launcher > .buttons > a.button.button-lesson > label { left:-38px; width:120px; } .navigation > .launcher > .buttons > a.button.button-support > label { left:-18px; width:80px; } .navigation > .launcher > .buttons > a.button:hover,.navigation > .launcher > .buttons > a.button:active { background:rgba(76,171,86,1); } .navigation > .launcher > .buttons > a.button:hover > label,.navigation > .launcher > .buttons > a.button:active > label { border-color:rgba(76,171,86,1); } .navigation > .launcher > .buttons > a.button.button-home { box-shadow:0 0 0 2px #239765 inset, 0 0 0 3px #ffffff inset; } .navigation > .launcher > .buttons > a.button.button-home::before { content:"\ea81"; } .navigation > .launcher > .buttons > a.button.button-task::before { content:"\ea8b" } .navigation > .launcher > .buttons > a.button.button-calendar::before { content:"\eb90"; } .navigation > .launcher > .buttons > a.button.button-sns::before { content:"\e97d"; } .navigation > .launcher > .buttons > a.button.button-score::before { content:"\ec07"; } .navigation > .launcher > .buttons > a.button.button-alarm::before { content:"\eb85"; } .navigation > .launcher > .buttons > a.button.button-settings::before { content:"\ebc4"; font-size:20px; margin-top:10px; } .navigation > .launcher > .buttons > a.button.button-alarm::before { content:"\eb85"; } .navigation > .launcher > .buttons > a.button.button-lesson::before { content:"\ebc3"; } .navigation > .launcher > .buttons > a.button.button-lesson-next::before { content:"\eb85"; } .navigation > .launcher > .buttons > a.button.button-drill::before { content:"\eaf8"; } .navigation > .launcher > .buttons > a.button.button-menu::before { content:"\e9e1"; font-size:20px; } .navigation > .launcher > .buttons > a.button.button-reserve::before { content:"\ea91"; } .navigation > .launcher > .buttons > a.button.button-message::before { content:"\ebbe"; } .navigation > .launcher > .buttons > a.button.button-speaking-test::before { content:"\eaf4"; } .navigation > .launcher > .buttons > a.button.button-support::before { content:"？"; } /* menu */ .navigation > .menu { display:none; position:fixed; top:0; left:0; width:100%; height:100%; padding:50px 0 36px 0; background-color:#f6f7f7; z-index:1000; } .navigation > .menu > .inner { width:100%; min-width:1024px; max-width:1140px; max-height:100%; margin:0 auto 0 auto; padding:20px 20px 20px 20px; overflow-y:scroll; } .navigation > .menu > .inner > .profile { padding:10px 10px 30px 10px; border-bottom:1px solid #dddddd; display:flex; justify-content:space-between; flex-wrap:nowrap; align-items:center; } .navigation > .menu > .inner > .profile > .account > a { opacity:1.0; } /* for bug fix... */ .navigation > .menu > .inner > .profile > .account > a > span { font-size:20px; color:#777777; padding-left:15px; vertical-align:middle; } .navigation > .menu > .inner > .profile > .buttons { display:flex; justify-content:flex-end; flex-wrap:nowrap; align-items:center; } .navigation > .menu > .inner > .profile > .buttons a.btn { margin-left:20px; width:100px; } .navigation > .menu > .inner > .profile > .buttons a.btn > i { font-size:16px; top:0; } .navigation > .menu > .inner > .shortcuts { padding:50px 0 35px 0; border-bottom:1px solid #dddddd; } .navigation > .menu > .inner > .shortcuts > ul { display:flex; justify-content:center; flex-wrap:nowrap; align-items:center; overflow-x:scroll; overflow-y:hidden; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; } .navigation > .menu > .inner > .shortcuts > ul > li { margin:0 20px 0 20px; padding:5px 0 20px 0; } .navigation > .menu > .inner > .shortcuts > ul > li a.button { display:block; width:140px; height:140px; padding-top:30px; background:#fefefe; border-radius:10px; text-align:center; cursor:pointer; } .navigation > .menu > .inner > .shortcuts > ul > li a.button > i { display:block; margin:0 auto 0 auto; width:60px; height:60px; border-radius:50%; position:relative; text-align:center; cursor:pointer; background-color:#239765; transition:background-color 0.2s linear,margin-top 0.2s linear; position:relative; } .navigation > .menu > .inner > .shortcuts > ul > li a.button > i::before { content:"\ea81"; font-family:"icon"; display:block; width:30px; height:30px; font-size:26px; line-height:30px; color:#ffffff; text-align:center; cursor:pointer; vertical-align:middle; position:absolute; top:15px; left:15px; } .navigation > .menu > .inner > .shortcuts > ul > li a.button > label { display:block; margin:8px 0 0 0; font-size:16px; text-align:center; vertical-align:middle; color:#777777; } .navigation > .menu > .inner > .shortcuts > ul > li a.button:hover { opacity:1.0; box-shadow:0 0 0 5px #eeeeee; } .navigation > .menu > .inner > .shortcuts > ul > li a.button.button-home > i::before { content:"\ea81"; } .navigation > .menu > .inner > .shortcuts > ul > li a.button.button-task> i::before { content:"\ea8b" } .navigation > .menu > .inner > .shortcuts > ul > li a.button.button-calendar> i::before { content:"\eb90"; } .navigation > .menu > .inner > .shortcuts > ul > li a.button.button-sns> i::before { content:"\e97d"; } .navigation > .menu > .inner > .shortcuts > ul > li a.button.button-settings> i::before { content:"\ebc4"; font-size:30px; top:13px; } .navigation > .menu > .inner > .menu { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:nowrap; padding:40px 20px 0 0; } .navigation > .menu > .inner > .menu > div { display:inline-block; text-align:left; font-size:16px; } .navigation > .menu > .inner > .menu > div > .heading { font-size:18px; color:#aaaaaa; margin:0 0 16px 0; } .navigation > .menu > .inner > .menu > div > ul > li + li { margin-top:4px; } .navigation > .menu > .inner > .menu > div > ul > li a { font-size:14px; color:#666666; } .navigation > .menu > .inner > .menu > div > ul > li a:hover { color:#239765; } .navigation > .menu > .inner > .menu > div > ul > li.indent { margin-top:0 !important; line-height:22px; } .navigation > .menu > .inner > .menu > div > ul > li.indent a { font-size:12px; color:#aaaaaa; } .navigation > .menu > .inner > .menu > div > ul > li.indent:before { display:inline-block; content:"└"; color:#bbbbbb; font-size:12px; margin-right:6px; } .navigation > .menu > .inner > .media { background-color:#ffffff; border-radius:10px; padding:20px; margin-top:60px; display:flex; justify-content:flex-start; flex-wrap:nowrap; align-items:center; } .navigation > .menu > .inner > .media > .logo { display:inline-block; width:260px; text-align:center; margin-right:20px; } .navigation > .menu > .inner > .media > .logo .kimini-logo { width:130px; height:50px; } .navigation > .menu > .inner > .media > .links { display:inline-block; } .navigation > .menu > .inner > .media > .links > div { position:relative; top:-2px; } .navigation > .menu > .inner > .media > .links > div > a { color:#444444; } .navigation > .menu > .inner > .media > .links > div > a > span { margin-right:8px; } .navigation > .menu > .inner > .media > .links > div > a > strong { font-weight:normal; font-size:22px; } .navigation > .menu > .inner > .media > .links > ul { display:block; } .navigation > .menu > .inner > .media > .links > ul > li { display:inline-block; margin-right:20px; } .navigation > .menu > .inner > .media > .links > ul > li > a { font-size:14px; color:#889290; } .navigation > .menu > .inner > .media > .links > ul > li > a:hover { color:#239765; } /* .navigation > .menu { display:none; position:fixed; top:0; left:0; width:100%; height:100%; padding:50px 0 36px 0; background-color:#f6f7f7; color:#444444; z-index:1000; } .navigation > .menu > .inner { width:100%; height:100%; overflow-x:scroll; } */ /**** ul,dl ****/ ul.inline-block { display:inline-block; } ul.inline-block > li { display:inline-block; } ul.table { display:table; } ul.table > li { display:table-cell; } dl.table { display:table; } dl.table > dt, dl.table > dd { display:table-cell; } /**** ul.list ****/ ul.list {} ul.list > li { padding:20px; } ul.list > li + li { border-top:1px solid #e1e1e1; } ul.list.border-top { border-top:1px solid #e1e1e1; } ul.list.border-bottom { border-bottom:1px solid #e1e1e1; } ul.list.border-white { border-color:#ffffff; } ul.list.border-white > li { border-color:#ffffff; } ul.list > li.border-top-double { border-top-style:double; border-top-width:3px; } ul.list.with-link > li { padding:0; } ul.list.with-link > li > a { display:block; padding:20px; } ul.list.with-link.with-icon > li > a { padding:20px 10px 20px 20px; display:flex; justify-content:space-between; flex-wrap:nowrap; align-items:center; } ul.list.with-link.with-icon > li > a * { flex-grow:1; } ul.list.with-link.with-icon > li > a::after { content:"\e92a"; font-family:"icon"; color:#cccccc; display:inline-block; padding-left:10px; flex-grow:0; } ul.list.with-link.with-icon > li.unread { font-weight:bold; } ul.list.with-link.with-icon > li.unread > a::after { content:"\e937"; font-family:"icon"; color:#ff0000; display:inline-block; padding-left:10px; flex-grow:0; } ul.list.no-padding > li { padding:0; } ul.list.hover > li:hover { background:#fcfcfc; } ul.list.with-disc {} ul.list.with-disc > li { padding:0; margin-left:20px; list-style-type:disc; line-height:24px; } ul.list.with-disc > li + li { border-top:none; margin-top:8px; } ul.list.with-disc > li.indent { list-style-type:none; } ul.list.with-disc.small { line-height:21px; } ul.list.with-disc.small > li + li { border-top:none; margin-top:4px; } li.with-disc { margin-left:20px; list-style-type:disc; } ul.list.with-checkmark {} ul.list.with-checkmark > li { padding:0 0 0 24px; line-height:24px; position:relative; } ul.list.with-checkmark > li:before { display:inline-block; content:"\ed15"; color:#239765; font-family:"icon"; position:absolute; top:0; left:0; } ul.list.with-checkmark > li + li { border-top:none; margin-top:8px; } ul.list.with-checkmark.op75 { opacity:1.0 !important; } ul.list.with-checkmark.op75 > li:before { opacity:0.75; } ul.list.menu-with-icon {} ul.list.menu-with-icon > li { padding:0 0 4px 0; } ul.list.menu-with-icon > li + li { border-top:none; padding-top:4px; } ul.list.menu-with-icon > li > a { display:block; padding:6px 10px 6px 10px; border:none; border-radius:10px; color:#444444; transition:none; } ul.list.menu-with-icon > li > a > [class^="icon-"] { opacity:0.75; display:inline-block; width:30px; text-align:center; margin-right:4px; position:relative; top:-2px; } ul.list.menu-with-icon > li > a.active { opacity:1.0; background-color:#eef5f4; } ul.list.menu-with-icon > li > a:hover { opacity:1.0; background-color:#eef5f4; } /**** ul.hlist ****/ ul.hlist { display:table; } ul.hlist > li { display:table-cell; padding:20px; } ul.hlist > li + li { border-left:1px solid #e1e1e1; } ul.hlist.border-left { border-left:1px solid #e1e1e1; } ul.hlist.border-right { border-right:1px solid #e1e1e1; } ul.hlist > li.border-left-double { border-left-style:double; border-left-width:3px; } ul.hlist > li.border-right-double + li { border-left-style:double; border-left-width:3px; } ul.hlist.with-link > li { padding:0; } ul.hlist.with-link > li > a { display:block; padding:20px; } /**** table.list ****/ table.list { border:1px solid #e1e1e1; border-collapse:collapse; position:relative; } table.list > thead > tr > th { border:1px solid #e1e1e1; background:#f3f3f3; padding:20px; font-size:14px; text-align:center; vertical-align:middle; white-space:nowrap; } table.list > tbody > tr > td { border:1px solid #e1e1e1; padding:20px; text-align:left; vertical-align:middle; } table.list.no-padding > thead > tr > th,table.list.no-padding > thead > tr > td { padding:0; } table.list > thead > tr > th.border-left-double,table.list > tbody > tr > td.border-left-double { border-left-style:double; border-left-width:3px; } table.list > thead > tr > th.border-right-double,table.list > tbody > tr > td.border-right-double { border-right-style:double; border-right-width:3px; } table.list > thead > tr > th.min,table.list > tbody > tr > td.min { width:1%; white-space:nowrap; } table.list.nr > thead > tr > th,table.list.nr > tbody > tr > td { white-space:nowrap; } /**** dl.list ****/ dl.list { display:talbe; text-align:left; vertical-align:top; } dl.list > dt { display:table-cell; width:150px; text-align:right; padding:20px 12px 20px 12px; line-height:24px; font-size:14px; color:#999999; } dl.list > dd { display:table-cell; min-width:150px; text-align:left; padding:20px 12px 20px 12px; line-height:24px; } dl.list + dl.list { border-top:1px solid #e1e1e1; } dl.list.border-top { border-top:1px solid #e1e1e1; } dl.list.border-bottom { border-bottom:1px solid #e1e1e1; } dl.list.border-top-double { border-top-style:double; border-top-width:3px; } dl.list.border-none, dl.list + dl.list.border-none { border:none; } /**** dl.with-thumb ****/ dl.with-thumb { display:flex; justify-content:flex-start; flex-wrap:nowrap; align-items:center; column-gap:10px; } dl.with-thumb > dt,dl.with-thumb > dd { line-height:24px; } /**** dl.notes ****/ dl.notes { display:table; line-height:1.5; } dl.notes > dt { display:table-cell; text-align:left; vertical-align:top; white-space:nowrap; width:30px; } dl.notes > dd { display:table-cell; text-align:left; vertical-align:top; } dl.notes + dl.notes { margin-top:10px; } /**** talbe.kimini-level ****/ table.kimini-level { border:2px solid #ffffff; border-collapse:collapse; position:relative; } table.kimini-level > thead > tr > th { border:2px solid #ffffff; background:#dddddd; padding:12px; font-size:14px; text-align:center; vertical-align:middle; white-space:nowrap; } table.kimini-level > tbody > tr > th { border:2px solid #ffffff; background:#62bbd3; color:#ffffff; padding:12px; font-size:30px; font-weight:bold; text-align:center; vertical-align:middle; white-space:nowrap; } table.kimini-level > tbody > tr > td { border:2px solid #ffffff; background:#f3f3f3; padding:12px; vertical-align:middle; } table.kimini-level > tbody > tr > td.cefr_j { text-align:center; white-space:nowrap; } table.kimini-level > tbody > tr > td.cefr { text-align:center; white-space:nowrap; } table.kimini-level > tbody > tr > td.eiken { text-align:center; white-space:nowrap; } table.kimini-level > tbody > tr > td.ielts { text-align:center; white-space:nowrap; } table.kimini-level > tbody > tr > td.can_do { text-align:left; line-height:1.6; } table.kimini-level > tbody > tr > td.rowspan { display:none; } table.kimini-level > tbody > tr.beginner > th { background:#62bbd3; } table.kimini-level > tbody > tr.intermediate > th { background:#b5cf4b; } table.kimini-level > tbody > tr.advanced > th { background:#fdb307; } table.kimini-level > tbody > tr.master > th { background:#f46931; } /**** ul.kimini-level, ul.avaialbe-plans ****/ ul.kimini-level { display:flex; justify-content:space-between; flex-wrap:nowrap; align-items:flex-start; gap:2px 2px; } ul.kimini-level > li { background-color:#f6f7f7; color:#666666; font-size:14px; line-height:1.6; padding:0 8px 0 8px; flex-grow:1; text-align:center; white-space:nowrap; } ul.kimini-level > li.active { background-color:#239765; color:#ffffff; } ul.kimini-level.face-white > li { background:rgba(255,255,255,0.3); color:rgba(255,255,255,0.75); } ul.kimini-level.face-white > li.active { background:#ffffff; color:#239765; } ul.kimini-level.face-bggray > li { background-color:#ffffff; } ul.kimini-level.face-bggray > li.active { background-color:#239765; color:#ffffff; } ul.avaialbe-plans { display:flex; justify-content:flex-start; flex-wrap:wrap; align-items:flex-start; gap:2px 2px; } ul.avaialbe-plans > li { background-color:#f6f7f7; color:#666666; font-size:14px; line-height:1.6; padding:0 8px 0 8px; text-align:center; white-space:nowrap; } ul.avaialbe-plans > li.active { background-color:#239765; color:#ffffff; } ul.avaialbe-plans.face-white > li { background:rgba(255,255,255,0.3); color:rgba(255,255,255,0.75); } ul.avaialbe-plans.face-white > li.active { background:#ffffff; color:#239765; } ul.avaialbe-plans.face-bggray > li { background-color:#ffffff; } ul.avaialbe-plans.face-bggray > li.active { background-color:#239765; color:#ffffff; } /**** .course-category-box ****/ .course-category-box { border:1px solid #cccccc; border-radius:10px; box-shadow:3px 3px 0 0 rgba(0,0,0,0.1); position:relative; padding-bottom:45px; } .course-category-box > a { background-color:#239765; color:#ffff; padding:20px; border-radius:10px 10px 0 0; display:flex; justify-content:space-between; flex-wrap:nowrap; align-items:flex-start; } .course-category-box > div { padding:20px; line-height:1.8; } .course-category-box > div + div { padding-top:0; } .course-category-box > div.footer { position:absolute; bottom:0; left:0; right:0; } .course-category-box.disabled { opacity:1.0; } .course-category-box.disabled > a { opacity:0.6; _background-color:#aaaaaa; } .course-category-box.disabled > div { opacity:0.6; } .course-category-box.disabled > div.warning { opacity:1.0; } /**** .course-category-fucure-details ****/ .course-category-fucure-details { display:flex; justify-content:flex-start; flex-wrap:nowrap; align-items:flex-start; column-gap:20px; } .course-category-fucure-details.even { flex-direction:row-reverse; } .course-category-fucure-details > img { max-width:300px; } .course-category-fucure-details > div { line-height:1.8; } .course-category-fucure-details > div > strong { display:block; font-size:24px; margin-bottom:5px; } .course-category-fucure-details > div > strong > span { display:inline-block; } /**** .radar-chart ****/ .radar-chart { position:relative; } .radar-chart > svg { display:block; width:100px; margin:0 auto 0 auto; position:relative; z-index:0; } .radar-chart > svg > circle.center { fill:#a9d6c3; stroke:none; stroke-width:0; opacity:0.75; } .radar-chart > svg > polygon.guide { fill:none; stroke:#a9d6c3; stroke-width:1px; opacity:0.5; } .radar-chart > svg > line.axis { fill:none; stroke:#a9d6c3; stroke-width:1px; opacity:0.5; stroke-dasharray:2px } .radar-chart > svg > polygon.score { fill:#239765; stroke:none; stroke-width:0; opacity:0.8; } .radar-chart > span { position:absolute; z-index:1; white-space:nowrap; } /**** ul.crumb ****/ ul.crumb { margin:0 0 20px 0; } ul.crumb > li { display:inline-block; } ul.crumb > li > a, ul.crumb > li > span { color:#999999; } ul.crumb > li > a:after, ul.crumb > li > span:after { content:"\e92a"; font-family:"icon"; opacity:0.75; margin:0 6px 0 6px; position:relative; top:1px; } ul.crumb > li > .form-select.form-select-face-text > label { color:#999999; } ul.crumb.reverse > li > a:after, ul.crumb.reverse > li > span:after { display:none; } ul.crumb.reverse > li > a:before, ul.crumb.reverse > li > span:before { content:"\e929"; font-family:"icon"; opacity:0.75; margin:0 6px 0 0; position:relative; top:1px; } ul.crumb.reverse > li { padding-right:4px; } /**** ul.index-(inline|block) ****/ ul.index-inline { display:block; } ul.index-inline > li { display:inline-block; margin-right:5px; } ul.index-inline > li::before { display:inline; content:"\e93a"; font-family:"icon"; font-size:16px; color:#999999; position:relative; top:1px; } ul.index-block { display:block; } ul.index-block > li { display:block; } ul.index-block > li::before { display:inline; content:"\e93a"; font-family:"icon"; font-size:16px; color:#999999; position:relative; top:1px; left:-5px; } /**** flex shortcut ****/ .flex-between-top { display:flex !important; justify-content:space-between !important; flex-wrap:nowrap !important; align-items:flex-start !important; } .flex-between-middle { display:flex !important; justify-content:space-between !important; flex-wrap:nowrap !important; align-items:center !important; } .flex-between-bottom { display:flex !important; justify-content:space-between !important; flex-wrap:nowrap !important; align-items:flex-end !important; } .flex-between-stretch { display:flex !important; justify-content:space-between !important; flex-wrap:nowrap !important; align-items:stretch !important; } .flex-left-top { display:flex !important; justify-content:flex-start !important; flex-wrap:nowrap !important; align-items:flex-start !important; } .flex-left-middle { display:flex !important; justify-content:flex-start !important; flex-wrap:nowrap !important; align-items:center !important; } .flex-left-bottom { display:flex !important; justify-content:flex-start !important; flex-wrap:nowrap !important; align-items:flex-end !important; } .flex-left-stretch { display:flex !important; justify-content:flex-start !important; flex-wrap:nowrap !important; align-items:stretch !important; } .flex-center-top { display:flex !important; justify-content:center !important; flex-wrap:nowrap !important; align-items:flex-start !important; } .flex-center-middle { display:flex !important; justify-content:center !important; flex-wrap:nowrap !important; align-items:center !important; } .flex-center-bottom { display:flex !important; justify-content:center !important; flex-wrap:nowrap !important; align-items:flex-end !important; } .flex-center-stretch { display:flex !important; justify-content:center !important; flex-wrap:nowrap !important; align-items:stretch !important; } .flex-right-top { display:flex !important; justify-content:flex-end !important; flex-wrap:nowrap !important; align-items:flex-start !important; } .flex-right-middle { display:flex !important; justify-content:flex-end !important; flex-wrap:nowrap !important; align-items:center !important; } .flex-right-bottom { display:flex !important; justify-content:flex-end !important; flex-wrap:nowrap !important; align-items:flex-end !important; } .flex-right-stretch { display:flex !important; justify-content:flex-end !important; flex-wrap:nowrap !important; align-items:stretch !important; } .flex-direction-row { flex-direction:row !important; } .flex-direction-row-reverse { flex-direction:row-reverse !important; } .flex-grow { flex-grow:2 !important; } .flex-grow-0 { flex-grow:0 !important; } .flex-grow-1 { flex-grow:1 !important; } .flex-grow-2 { flex-grow:2 !important; } .flex-wrap { flex-wrap:wrap !important; } .flex-nowrap { flex-wrap:nowrap !important; } .align-items-auto { align-items:auto !important; } .align-items-stretch { align-items:stretch !important; } .align-items-top { align-items:flex-start !important; } .align-items-middle { align-items:center !important; } .align-items-bottom { align-items:flex-end !important; } .align-self-auto { align-self:auto !important; } .align-self-stretch { align-self:stretch !important; } .align-self-top { align-self:flex-start !important; } .align-self-middle { align-self:center !important; } .align-self-bottom { align-self:flex-end !important; } .flex-one-column { display:flex; width:100%; justify-content:flex-start; flex-wrap:wrap; align-items:center; gap:20px 20px; } .flex-one-column > * { display:block; width:100%; } .flex-two-column { display:flex; width:100%; justify-content:flex-start; flex-wrap:wrap; align-items:stretch; gap:20px 20px; } .flex-two-column > * { display:block; width:calc(50% - 10px); } .flex-two-column.gap10 { gap:10px 10px; } .flex-two-column.gap10 > * { display:block; width:calc(50% - 5px); } .flex-two-column.gap30 { gap:30px 30px; } .flex-two-column.gap30 > * { display:block; width:calc(50% - 15px); } .flex-two-column.gap40 { gap:40px 40px; } .flex-two-column.gap40 > * { display:block; width:calc(50% - 20px); } .flex-three-column { display:flex; width:100%; justify-content:flex-start; flex-wrap:wrap; align-items:stretch; gap:20px 20px; } .flex-three-column > * { display:block; width:calc(33% - 14px); } .flex-four-column { display:flex; width:100%; justify-content:flex-start; flex-wrap:wrap; align-items:stretch; gap:20px 20px; } .flex-four-column > * { display:block; width:calc(25% - 15px); } .flex-five-column { display:flex; width:100%; justify-content:flex-start; flex-wrap:wrap; align-items:stretch; gap:20px 20px; } .flex-five-column > * { display:block; width:calc(20% - 16px); } .flex-five-column-cgap10 { display:flex; width:100%; justify-content:flex-start; flex-wrap:wrap; align-items:stretch; gap:10px 10px; } .flex-five-column-cgap10 > * { display:block; width:calc(20% - 8px); } .flex-six-column { display:flex; width:100%; justify-content:flex-start; flex-wrap:wrap; align-items:stretch; gap:20px 20px; } .flex-six-column > * { display:block; width:calc((100% - 100px)/6) ; } /**** slider ****/ .slider,.to-slider { width:100%; padding-bottom:20px; overflow-x:scroll !important; overflow-y:hidden !important; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; } .slider > ul { display:flex; width:100%; justify-content:flex-start; flex-wrap:nowrap; align-items:stretch; column-gap:20px; } .slider > ul > li { scroll-snap-align:none; } .slider.vertical-align-stretch > ul { align-items:stretch; } .slider.vertical-align-top > ul { align-items:flex-start; } .slider.vertical-align-bottom > ul { align-items:flex-end; } .slider.vertical-align-center,.slider.vertical-align-middle > ul { align-items:center; } .slider.snap-none > ul > li { scroll-snap-align:none; } .slider.snap-start > ul > li { scroll-snap-align:start; } .slider.snap-center > ul > li { scroll-snap-align:center; } .slider.snap-end > ul > li { scroll-snap-align:end; } /**** pager ****/ ul.pager { width:100%; display:flex; justify-content:flex-start; flex-wrap:wrap; align-items:center; column-gap:15px; row-gap:15px; } ul.pager.nowrap { flex-wrap:nowrap; } ul.pager > li > span.dots { display:inline-block; color:#bbbbbb; } ul.pager > li > span.dots::after { content:"\e93b"; display:inline-block; font-family:"icon"; } ul.pager.align-left { justify-content:flex-start; } ul.pager.align-right { justify-content:flex-end; } ul.pager.align-center { justify-content:center; } /**** tab ****/ /* line face */ ul.tab-bar.tab-bar-face-line { width:100%; position:relative; display:flex; justify-content:flex-start; flex-wrap:nowrap; align-items:flex-end; overflow-x:scroll; overflow-y:visible; } ul.tab-bar.tab-bar-face-line::after { display:block; content:""; width:100%; border-top:1px solid #e1e1e1; position:absolute; bottom:2px; left:0; z-index:0; } ul.tab-bar.tab-bar-face-line > li { display:inline-block; white-space:nowrap; } ul.tab-bar.tab-bar-face-line > li > a, ul.tab-bar.tab-bar-face-line > li > span { display:inline-block; width:100%; padding:8px 32px 12px 32px; text-align:left; color:#999999; position:relative; transition:none; } ul.tab-bar.tab-bar-face-line > li > a.active::after, ul.tab-bar.tab-bar-face-line > li > span.active::after { display:block; content:""; width:100%; height:5px; background:#239765; border-radius:3px; position:absolute; bottom:0; left:0; z-index:1; } ul.tab-bar.tab-bar-face-line > li > a:hover { color:#239765; } ul.tab-bar.tab-bar-face-line > li > span.active, ul.tab-bar.tab-bar-face-line > li > a.active, ul.tab-bar.tab-bar-face-line > li > a.active:hover { color:#444444; } ul.tab-bar.tab-bar-face-line > li > a.active:hover, ul.tab-bar.tab-bar-face-line > li > a.active:active { opacity:1.0; color:#777777; } ul.tab-bar.tab-bar-face-line.dashboard { justify-content:flex-end; } ul.tab-bar.tab-bar-face-line.dashboard > li > a, ul.tab-bar.tab-bar-face-line.dashboard > li > span { padding-left:25px; padding-right:25px; color:#bbbbbb; } ul.tab-bar.tab-bar-face-line.dashboard > li > a:hover { color:#239765; } ul.tab-bar.tab-bar-face-line.dashboard > li > a.active,ul.tab-bar.tab-bar-face-line.dashboard > li > a.active:hover { color:#444444; } ul.tab-bar.tab-bar-face-line.dashboard > li > a.active:hover, ul.tab-bar.tab-bar-face-line.dashboard > li > a.active:active { color:#777777; } ul.tab-bar.tab-bar-face-line.reverse {} ul.tab-bar.tab-bar-face-line.reverse::after { top:2px; bottom:auto; } ul.tab-bar.tab-bar-face-line.reverse > li > a, ul.tab-bar.tab-bar-face-line.reverse > li > span { padding:12px 32px 8px 32px; } ul.tab-bar.tab-bar-face-line.reverse > li > a.active::after, ul.tab-bar.tab-bar-face-line.reverse > li > span.active::after { top:0; bottom:auto; } ul.tab-bar.tab-bar-face-line.w100p { display:table; } ul.tab-bar.tab-bar-face-line.w100p > li { display:table-cell; } ul.tab-bar.tab-bar-face-line.w100p > li > a, ul.tab-bar.tab-bar-face-line.w100p > li > span { text-align:center; padding-left:0; padding-right:0; } /* step face */ ul.tab-bar.tab-bar-face-step { width:100%; display:table; } ul.tab-bar.tab-bar-face-step > li { display:table-cell; } ul.tab-bar.tab-bar-face-step > li > a, ul.tab-bar.tab-bar-face-step > li > span { display:block; background:#eef5f4; color:#444444; padding:6px 6px 8px 18px; text-align:center; vertical-align:middle; position:relative; } ul.tab-bar.tab-bar-face-step > li > a::before, ul.tab-bar.tab-bar-face-step > li > span::before { display:block; content:""; width:12px; height:100%; z-index:2; position:absolute; top:0; right:-12px; background:linear-gradient(to bottom left, transparent 50%, #eef5f4 50%) top left / 100% 50% no-repeat, linear-gradient(to top left, transparent 50%, #eef5f4 50%) bottom left / 100% 50% no-repeat; } ul.tab-bar.tab-bar-face-step > li > a::after, ul.tab-bar.tab-bar-face-step > li > span::after { display:block; content:""; width:18px; height:100%; z-index:1; position:absolute; top:0; right:-18px; background:linear-gradient(to bottom left, transparent 50%, #ffffff 50%) top left / 100% 50% no-repeat, linear-gradient(to top left, transparent 50%, #ffffff 50%) bottom left / 100% 50% no-repeat; border-left:6px #ffffff solid; } ul.tab-bar.tab-bar-face-step > li > a:hover { opacity:1.0; color:#777777; } ul.tab-bar.tab-bar-face-step > li > a.active, ul.tab-bar.tab-bar-face-step > li > span.active { background:#239765; color:#ffffff; } ul.tab-bar.tab-bar-face-step > li > a.active::before, ul.tab-bar.tab-bar-face-step > li > span.active::before { background:linear-gradient(to bottom left, transparent 50%, #239765 50%) top left / 100% 50% no-repeat, linear-gradient(to top left, transparent 50%, #239765 50%) bottom left / 100% 50% no-repeat; } ul.tab-bar.tab-bar-face-step > li > a.active:hover { color:#e0ffe0; } ul.tab-bar.tab-bar-face-step > li:first-child > a, ul.tab-bar.tab-bar-face-step > li:first-child > span { padding-left:15px; } ul.tab-bar.tab-bar-face-step > li:last-child > a::before, ul.tab-bar.tab-bar-face-step > li:last-child > span::before, ul.tab-bar.tab-bar-face-step > li:last-child > a::after, ul.tab-bar.tab-bar-face-step > li:last-child > span::after { display:none; } /* table face */ ul.tab-bar.tab-bar-face-table { display:table; width:100%; border:1px solid #cccccc; border-radius:4px; } ul.tab-bar.tab-bar-face-table > li { display:table-cell; text-align:center; vertical-align:middle; line-height:1.0; } ul.tab-bar.tab-bar-face-table > li > a { display:flex; justify-content:center; flex-wrap:wrap; align-items:flex-end; gap:6px 6px; padding:8px 4px 8px 4px; color:#444444; text-align:center; position:relative; } ul.tab-bar.tab-bar-face-table > li + li { border-left:1px solid #cccccc; } ul.tab-bar.tab-bar-face-table > li.selected > a { background-color:#239765; color:#ffffff; border:1px solid #239765; } ul.tab-bar.tab-bar-face-table > li.selected > a:before { display:block; content:""; position:absolute; top:-2px; bottom:-2px; left:-2px; right:-2px; border:1px solid #239765; } ul.tab-bar.tab-bar-face-table > li.disabled { opacity:1.0; } ul.tab-bar.tab-bar-face-table > li.disabled > a { background-color:#f3f3f3; color:#bbbbbb; cursor:default; } ul.tab-bar.tab-bar-face-table > li.first-child.selected > a { border-radius:4px 0 0 4px; } ul.tab-bar.tab-bar-face-table > li.first-child.selected > a:before { border-radius:6px 0 0 6px; } ul.tab-bar.tab-bar-face-table > li.last-child.selected > a { border-radius:0 4px 4px 0; } ul.tab-bar.tab-bar-face-table > li.last-child.selected > a:before { border-radius:0 6px 6px 0; } /* grid face */ table.tab-bar.tab-bar-face-grid { border:1px solid #cccccc; border-radius:5px; border-spacing:0; overflow:hidden; width:100%; } table.tab-bar.tab-bar-face-grid tr {} table.tab-bar.tab-bar-face-grid tr > td { border-right:1px solid #cccccc; border-bottom:1px solid #cccccc; border-collapse:collapse; white-space:nowrap; position:relative; z-index:0; } table.tab-bar.tab-bar-face-grid tr > td:last-child { border-right:none; } table.tab-bar.tab-bar-face-grid tr:last-child > td { border-bottom:none; } table.tab-bar.tab-bar-face-grid tr > td > a { display:flex; justify-content:space-between; flex-wrap:nowrap; align-items:center; column-gap:5px; color:#777777; padding:5px 8px 5px 8px; } table.tab-bar.tab-bar-face-grid tr > td > a:after { display:inline-block; content:"\e92a"; font-family:"icon"; color:#cccccc; } table.tab-bar.tab-bar-face-grid tr > td.active { background-color:#239765; } table.tab-bar.tab-bar-face-grid tr > td.active > a, table.tab-bar.tab-bar-face-grid tr > td.active > a:after { color:#ffffff; } table.tab-bar.tab-bar-face-grid tr > td.active:after { display:block; content:""; border:1px solid #239765; position:absolute; top:-1px; left:-1px; width:calc(100% + 2px); height:calc(100% + 2px); z-index:1; pointer-events:none; } /*======== Components ========*/ /**** .heading ****/ div.heading { font-size:28px; line-height:42px; margin:0 0 20px 0; display:flex; flex-wrap:nowrap; justify-content:space-between; align-items:center; } div.heading .options { font-size:16px; line-height:32px; } div.heading.tc { justify-content:center; } /**** .cover-* ****/ div.cover-with-image { padding:80px 0 80px; } div.cover-with-image > .outer { text-align:center; position:relative; } div.cover-with-image > .outer > .inner { display:inline-block; } div.cover-with-image > .outer > .image.right { position:absolute; bottom:0; right:0; } /**** .hr, .hr-with-label ****/ div.hr,div.hr-with-label { width:100%; height:16px; line-height:16px; background-color:transparent !important; border-top:1px solid #e1e1e1; margin:30px 0 14px 0; text-align:center; position:relative; color:#bbbbbb; } div.hr-with-label > span { display:inline-block; font-size:14px; height:16px; line-height:16px; background-color:#ffffff; padding:0 6px 0 6px; position:relative; top:-9px; } div.hr-with-label.label-mobile-only > span { display:none; } /**** .message ****/ div.message { padding-top:130px; padding-bottom:110px; } div.message > dl { display:flex; flex-wrap:nowrap; justify-content:center; align-items:center; } div.message > dl > dt {} div.message > dl > dt + dd { margin-left:40px; } div.message > dl > dd > strong { display:block; font-size:20px; } div.message > dl > dd > p { margin-top:8px; } div.message > ul { display:flex; flex-wrap:nowrap; justify-content:center; align-items:center; margin-top:50px; } div.message > ul > li > a.btn { min-width:200px; } /**** .box ****/ .box { border:1px solid #cccccc; text-align:left; /*vertical-align:top;*/ position:relative; } /* inline face */ .box.one-liner { display:inline-block; font-size:16px; line-height:22px; } /* border styles */ .box.border-top { border:none; border-top:1px solid #cccccc; } .box.border-right { border:none; border-right:1px solid #cccccc; } .box.border-bottom { border:none; border-bottom:1px solid #cccccc; } .box.border-left { border:none; border-left:1px solid #cccccc; } .box.border-top-bottom { border:none; border-top:1px solid #cccccc; border-bottom:1px solid #cccccc; } .box.border-left-right { border:none; border-left:1px solid #cccccc; border-right:1px solid #cccccc; } .box.border-dotted { border-style:dotted; } .box.border-none,.box.no-border { border:none; } .box.shadow { box-shadow:3px 3px 0 0 rgba(0,0,0,0.1); } /* box inner (vertial inner elements with border) */ .box .box-inner { border-top:1px solid #e1e1e1; } .box .box-inner.border-bottom { border-bottom:1px solid #e1e1e1; } .box .box-inner.border-none { border:none; } /* box cell (horizonal inner elements with border) */ .box .box-table { display:table; } .box .box-table > .box-cell { display:table-cell; } .box .box-table > .box-cell + .box-cell { border-left:1px solid #e1e1e1; } /* balloon */ .box.balloon { position:relative; } .box.balloon::after { content:''; position:absolute; bottom:-12px; left:49%; border-top:14px solid #ffffff; border-right:7px solid transparent; border-left:7px solid transparent; } .box.balloon::before { content:''; position:absolute; bottom:-14px; left:49%; border-top:14px solid #cccccc; border-right:7px solid transparent; border-left:7px solid transparent; } .box.balloon.left-side::after { left:40px; } .box.balloon.left-side::before { left:40px; } .box.balloon.right-side::after { left:auto; right:40px; } .box.balloon.right-side::before { left:auto; right:40px; } .box.balloon.border-green::before, .box.balloon.border-darkgreen::before, .box.balloon.border-red::before, .box.balloon.border-orange::before, .box.balloon.border-yellow::before, .box.balloon.border-gray::before, .box.balloon.border-lightgray::before, .box.balloon.border-borderlightgray::before, .box.balloon.border-darkgray::before, .box.balloon.border-deepgray::before, .box.balloon.border-black::before, .box.balloon.border-white::before, .box.balloon.border-kimini-green::before, .box.balloon.border-kimini-blue::before, .box.balloon.border-kimini-lime::before { border-top-color:inherit; } .box.balloon.border-none::before { border-top-color:transparent; } .box.balloon.bg-green::after,.box.balloon.fill-green::after { border-top-color:#239765; } .box.balloon.bg-palegreen::after,.box.balloon.fill-palegreen::after { border-top-color:#a9d6c3; } .box.balloon.bg-lightgreen::after,.box.balloon.fill-lightgreen::after { border-top-color:#eef5f4; } .box.balloon.bg-darkgreen::after,.box.balloon.fill-darkgreen::after { border-top-color:#668877; } .box.balloon.bg-red::after,.box.balloon.fill-red::after { border-top-color:#ee0000; } .box.balloon.bg-orange::after,.box.balloon.fill-orange::after { border-top-color:#d94d38; } .box.balloon.bg-yellow::after,.box.balloon.fill-yellow::after { border-top-color:#f39801; } .box.balloon.bg-gray::after { border-top-color:#fcfcfc; } .box.balloon.fill-gray::after { border-top-color:#999999; } .box.balloon.bg-lightgray::after { border-top-color:#fefefe; } .box.balloon.fill-lightgray::after { border-top-color:#bbbbbb; } .box.balloon.bg-borderlightgray::after,.box.balloon.fill-borderlightgray::after { border-top-color:#e1e1e1; } .box.balloon.bg-darkgray::after { border-top-color:#f3f3f3; } .box.balloon.fill-darkgray::after { border-top-color:#888888; } .box.balloon.bg-deepgray::after { border-top-color:#eeeeee; } .box.balloon.fill-deepgray::after { border-top-color:#555555; } .box.balloon.bg-black::after,.box.balloon.fill-black::after { border-top-color:#222222; } .box.balloon.bg-white::after,.box.balloon.fill-white::after { border-top-color:#ffffff; } .box.balloon.bg-kimini-green::after,.box.balloon.fill-kimini-green::after { border-top-color:#008672; } .box.balloon.bg-kimini-blue::after,.box.balloon.fill-kimini-blue::after { border-top-color:#00b6eb; } .box.balloon.bg-kimini-lime::after,.box.balloon.fill-kimini-lime::after { border-top-color:#9ed238; } /* box with title (peaky) */ .box.with-title > .title { display:inline-block; position:absolute; top:-19px; left:20px; white-space:nowrap; } .box.with-title > .title > span { height:14px; line-height:14px; font-size:14px; position:relative; z-index:1; } .box.with-title > .title::before { content:""; display:block; border-top:1px solid #ffffff; width:100%; height:1px; z-index:0; position:absolute; top:18px; left:0; } .box.with-title > .title > span::before,.box.with-title > .title > span::after { content:""; display:block; border-top:1px solid #ffffff; width:4px; height:1px; z-index:0; position:absolute; top:9px; } .box.with-title > .title > span::before { left:-4px; } .box.with-title > .title > span::after { right: -4px; } /**** .label ****/ .label { display:inline-block; font-size:16px; line-height:22px; border:1px solid #444444; background-color:transparent; color:#444444; border-radius:4px; padding:0 8px 0 8px; text-align:center; } .label.selected { background-color:#444444; color:#ffffff } /* round style */ .label.round { border-radius:12px; } /* sizes */ .label.xlarge { font-size:24px; line-height:34px; } .label.xlarge.round { border-radius:18px; } .label.large { font-size:20px; line-height:28px; } .label.large.round { border-radius:15px; } .label.regular { font-size:16px; line-height:22px; } .label.regular.round { border-radius:12px; } .label.small { font-size:14px; /*line-height:19px;*/ line-height:18px; } .label.small.round { border-radius:10px; } .label.xsmall { font-size:12px; line-height:16px; } .label.xsmall.round { border-radius:9px; } /* arrow styles */ .label.arrow-right { border-radius:0; padding-right:5px; border-right:none; margin-right:12px; position:relative; } .label.arrow-right::before { content:""; position:absolute; top:-1px; right:-24px; border-left:12px solid #444444; border-top:12px solid transparent; border-right:12px solid transparent; border-bottom:12px solid transparent; } .label.arrow-right::after { content:""; position:absolute; top:0; right:-22px; border-left:11px solid #ffffff; border-top:11px solid transparent; border-right:11px solid transparent; border-bottom:11px solid transparent; } .label.arrow-right.selected::after { display:none; } .label.large.arrow-right { margin-right:15px; } .label.large.arrow-right::before { right:-30px; border-width:15px; } .label.large.arrow-right::after { right:-28px; border-width:14px; } .label.arrow-left { border-radius:0; padding-left:5px; border-left:none; margin-left:12px; position:relative; } .label.arrow-left::before { content:""; position:absolute; top:-1px; left:-24px; border-right:12px solid #444444; border-top:12px solid transparent; border-left:12px solid transparent; border-bottom:12px solid transparent; } .label.arrow-left::after { content:""; position:absolute; top:0; left:-22px; border-right:11px solid #ffffff; border-top:11px solid transparent; border-left:11px solid transparent; border-bottom:11px solid transparent; } .label.arrow-left.selected::after { display:none; } .label.small.arrow-right { border-radius:0; padding-right:5px; border-right:none; margin-right:10px; position:relative; } .label.small.arrow-right::before { content:""; position:absolute; top:-1px; right:-20px; border-left:10px solid #444444; border-top:10px solid transparent; border-right:10px solid transparent; border-bottom:10px solid transparent; } .label.small.arrow-right::after { content:""; position:absolute; top:0; right:-18px; border-left:9px solid #ffffff; border-top:9px solid transparent; border-right:9px solid transparent; border-bottom:9px solid transparent; } .label.small.arrow-right.selected::after { display:none; } .label.small.arrow-left { border-radius:0; padding-left:5px; border-left:none; margin-left:10px; position:relative; } .label.small.arrow-left::before { content:""; position:absolute; top:-1px; left:-20px; border-right:10px solid #444444; border-top:10px solid transparent; border-left:10px solid transparent; border-bottom:10px solid transparent; } .label.small.arrow-left::after { content:""; position:absolute; top:0; left:-18px; border-right:9px solid #ffffff; border-top:9px solid transparent; border-left:9px solid transparent; border-bottom:9px solid transparent; } .label.small.arrow-left.selected::after { display:none; } /* balloon styles */ .label.balloon { border-radius:0; position:relative; } .label.balloon::before { content:""; position:absolute; bottom:-16px; left:calc(50% - 8px); border-top:8px solid #444444; border-left:8px solid transparent; border-right:8px solid transparent; border-bottom:8px solid transparent; } .label.balloon::after { content:""; position:absolute; bottom:-14px; left:calc(50% - 8px); border-top:8px solid #ffffff; border-left:8px solid transparent; border-right:8px solid transparent; border-bottom:8px solid transparent; } .label.balloon.selected::after { display:none; } /* colors */ .label.green { border-color:#239765; color:#239765; } .label.green.selected { background-color:#239765; color:#ffffff; } .label.arrow-right.green::before { border-left-color:#239765; } .label.arrow-left.green::before { border-right-color:#239765; } .label.balloon.green::before { border-top-color:#239765; } .label.palegreen { border-color:#a9d6c3; color:#a9d6c3; } .label.palegreen.selected { background-color:#a9d6c3; color:#ffffff; color:#444444; } .label.arrow-right.palegreen::before { border-left-color:#a9d6c3; } .label.arrow-left.palegreen::before { border-right-color:#a9d6c3; } .label.balloon.palegreen::before { border-top-color:#a9d6c3; } .label.lightgreen { border-color:#eef5f4; color:#eef5f4; } .label.lightgreen.selected { background-color:#eef5f4; color:#ffffff; } .label.arrow-right.lightgreen::before { border-left-color:#eef5f4; } .label.arrow-left.lightgreen::before { border-right-color:#eef5f4; } .label.balloon.lightgreen::before { border-top-color:#eef5f4; } .label.darkgreen { border-color:#668877; color:#668877; } .label.darkgreen.selected { background-color:#668877; color:#ffffff; } .label.arrow-right.darkgreen::before { border-left-color:#668877; } .label.arrow-left.darkgreen::before { border-right-color:#668877; } .label.balloon.darkgreen::before { border-top-color:#668877; } .label.red { border-color:#ee0000; color:#ee0000; } .label.red.selected { background-color:#ee0000; color:#ffffff; } .label.arrow-right.red::before { border-left-color:#ee0000; } .label.arrow-left.red::before { border-right-color:#ee0000; } .label.balloon.red::before { border-top-color:#ee0000; } .label.orange { border-color:#d94d38; color:#d94d38; } .label.orange.selected { background-color:#d94d38; color:#ffffff; } .label.arrow-right.orange::before { border-left-color:#d94d38; } .label.arrow-left.orange::before { border-right-color:#d94d38; } .label.balloon.orange::before { border-top-color:#d94d38; } .label.yellow { border-color:#f39801; color:#f39801; } .label.yellow.selected { background-color:#f39801; color:#ffffff; } .label.arrow-right.yellow::before { border-left-color:#f39801; } .label.arrow-left.yellow::before { border-right-color:#f39801; } .label.balloon.yellow::before { border-top-color:#f39801; } .label.gray { border-color:#999999; color:#999999; } .label.gray.selected { background-color:#999999; color:#ffffff; } .label.arrow-right.gray::before { border-left-color:#999999; } .label.arrow-left.gray::before { border-right-color:#999999; } .label.balloon.gray::before { border-top-color:#999999; } .label.lightgray { border-color:#bbbbbb; color:#bbbbbb; } .label.lightgray.selected { background-color:#bbbbbb; color:#ffffff; } .label.arrow-right.lightgray::before { border-left-color:#bbbbbb; } .label.arrow-left.lightgray::before { border-right-color:#bbbbbb; } .label.balloon.lightgray::before { border-top-color:#bbbbbb; } .label.darkgray { border-color:#888888; color:#888888; } .label.darkgray.selected { background-color:#888888; color:#ffffff; } .label.arrow-right.darkgray::before { border-left-color:#888888; } .label.arrow-left.darkgray::before { border-right-color:#888888; } .label.balloon.darkgray::before { border-top-color:#888888; } .label.deepgray { border-color:#555555; color:#555555; } .label.deepgray.selected { background-color:#555555; color:#ffffff; } .label.arrow-right.deepgray::before { border-left-color:#555555; } .label.arrow-left.deepgray::before { border-right-color:#555555; } .label.balloon.deepgray::before { border-top-color:#555555; } .label.black { border-color:#222222; color:#222222; } .label.black.selected { background-color:#222222; color:#ffffff; } .label.arrow-right.black::before { border-left-color:#222222; } .label.arrow-left.black::before { border-right-color:#222222; } .label.balloon.black::before { border-top-color:#222222; } .label.white { border-color:#ffffff; color:#ffffff; } .label.white.selected { background-color:#ffffff; color:#444444; } .label.arrow-right.white::before { border-left-color:#ffffff; } .label.arrow-left.white::before { border-right-color:#ffffff; } .label.balloon.white::before { border-top-color:#ffffff; } .label.kimini-green { border-color:#008672; color:#008672; } .label.kimini-green.selected { background-color:#008672; color:#ffffff; } .label.arrow-right.kimini-green::before { border-left-color:#008672; } .label.arrow-left.kimini-green::before { border-right-color:#008672; } .label.balloon.kimini-green::before { border-top-color:#008672; } .label.kimini-blue { border-color:#00b6eb; color:#00b6eb; } .label.kimini-blue.selected { background-color:#00b6eb; color:#ffffff; } .label.arrow-right.kimini-blue::before { border-left-color:#00b6eb; } .label.arrow-left.kimini-blue::before { border-right-color:#00b6eb; } .label.balloon.kimini-blue::before { border-top-color:#00b6eb; } .label.kimini-lime { border-color:#9ed238; color:#9ed238; } .label.kimini-lime.selected { background-color:#9ed238; color:#ffffff; } .label.arrow-right.kimini-lime::before { border-left-color:#9ed238; } .label.arrow-left.kimini-lime::before { border-right-color:#9ed238; } .label.balloon.kimini-lime::before { border-top-color:#9ed238; } /**** .tag ****/ .tag { display:inline-block; font-size:16px; line-height:22px; border:1px solid rgba(68,68,68,0.25); background-color:rgba(68,68,68,0.25); color:#444444; border-radius:4px; padding:0 8px 0 8px; text-align:center; } /* round style */ .tag.round { border-radius:12px; } /* sizes */ .tag.xlarge { font-size:24px; line-height:34px; } .tag.xlarge.round { border-radius:18px; } .tag.large { font-size:20px; line-height:28px; } .tag.large.round { border-radius:15px; } .tag.regular { font-size:16px; line-height:22px; } .tag.regular.round { border-radius:12px; } .tag.small { font-size:14px; /*line-height:19px;*/ line-height:18px; } .tag.small.round { border-radius:10px; } .tag.xsmall { font-size:12px; line-height:16px; } .tag.xsmall.round { border-radius:9px; } /* colors */ .tag.green { border-color:rgba(35,151,101,0.25); background-color:rgba(35,151,101,0.25); color:#444444; } .tag.palegreen { border-color:rgba(169,214,195,0.25); background-color:rgba(169,214,195,0.25); color:#444444; } .tag.darkgreen { border-color:rgba(102,136,119,0.25); background-color:rgba(102,136,119,0.25); color:#444444; } .tag.orange { border-color:rgba(217,77,56,0.25); background-color:rgba(217,77,56,0.25); color:#444444; } .tag.yellow { border-color:rgba(243,152,1,0.25); background-color:rgba(243,152,1,0.25); color:#444444; } .tag.red { border-color:rgba(238,0,0,0.25); background-color:rgba(238,0,0,0.25); color:#444444; } .tag.gray { border-color:rgba(150,150,150,0.25); background-color:rgba(150,150,150,0.25); color:#444444; } .tag.lightgray { border-color:rgba(180,180,180,0.25); background-color:rgba(180,180,180,0.25); color:#444444; } .tag.darkgray { border-color:rgba(136,136,136,0.25); background-color:rgba(136,136,136,0.25); color:#444444; } .tag.deepgray { border-color:rgba(85,85,85,0.25); background-color:rgba(85,85,85,0.25); color:#444444; } .tag.black { border-color:rgba(34,34,34,0.25); background-color:rgba(34,34,34,0.25); color:#444444; } .tag.white { border-color:rgba(0,,0,0.25); background-color:rgba(0,0,0,0.25); color:#444444; } .tag.kimini-green { border-color:rgba(0,134,114,0.25); background-color:rgba(0,134,114,0.25); color:#444444; } .tag.kimini-blue { border-color:rgba(0,182,235,0.25); background-color:rgba(0,182,235,0.25); color:#444444; } .tag.kimini-lime { border-color:rgba(158,210,56,0.25); background-color:rgba(158,210,56,0.25); color:#444444; } /**** .highlight ****/ .highlight { display:inline; background-color:rgba(180,180,180,0.25); } /* colors */ .highlight.green { background-color:rgba(35,151,101,0.25); color:#444444; } .highlight.palegreen { background-color:rgba(169,214,195,0.25); color:#444444; } .highlight.darkgreen { background-color:rgba(102,136,119,0.25); color:#444444; } .highlight.orange { background-color:rgba(217,77,56,0.25); color:#444444; } .highlight.yellow { background-color:rgba(243,152,1,0.25); color:#444444; } .highlight.red { background-color:rgba(238,0,0,0.25); color:#444444; } .highlight.gray { background-color:rgba(150,150,150,0.25); color:#444444; } .highlight.lightgray { background-color:rgba(180,180,180,0.25); color:#444444; } .highlight.darkgray { background-color:rgba(136,136,136,0.25); color:#444444; } .highlight.deepgray { background-color:rgba(85,85,85,0.25); color:#444444; } .highlight.black { background-color:rgba(34,34,34,0.25); color:#444444; } .highlight.white { background-color:rgba(0,0,0,0.25); color:#444444; } .highlight.kimini-green { background-color:rgba(0,134,114,0.25); color:#444444; } .highlight.kimini-blue { background-color:rgba(0,182,235,0.25); color:#444444; } .highlight.kimini-lime { background-color:rgba(158,210,56,0.25); color:#444444; } /**** .circle, .square ****/ .circle,.square { display:inline-block; background-color:transparent; font-size:16px; line-height:22px; width:24px; height:24px; border:1px solid #444444; border-radius:50%; text-align:center; /*vertical-align:middle;*/ } .square { border-radius:0; } .circle.filled,.square.filled { color:#ffffff; background-color:#444444; } .circle.border-none,.circle.no-border,.square.border-none,.square.no-border { border-color:transparent; } a.circle,a.square,a > .circle,a > .square { transition:color 0.2s linear, background-color 0.2s linear; } /* sizes */ .circle.xxxlarge,.square.xxzlarge { font-size:32px; line-height:48px; width:50px; height:50px; } .circle.xxlarge,.square.xxlarge { font-size:28px; line-height:40px; width:42px; height:42px; } .circle.xlarge,.square.xlarge { font-size:24px; line-height:34px; width:36px; height:36px; } .circle.large,.square.large { font-size:20px; line-height:28px; width:30px; height:30px; } .circle.regular,.square.regular { font-size:16px; line-height:22px; width:24px; height:24px; } .circle.small,.square.small { font-size:14px; line-height:18px; width:20px; height:20px; } .circle.xsmall,.square.xsmall { font-size:12px; line-height:16px; width:18px; height:18px; } /* colors */ .circle.green,.square.green { color:#239765; border-color:#239765; } .circle.filled.green,.square.filled.green, a.circle.green:hover,a.square.green:hover, a:hover > .circle.green,a:hover > .square.green { color:#ffffff; background-color:#239765; } .circle.palegreen,.square.palegreen { color:#a9d6c3; border-color:#a9d6c3; } .circle.filled.palegreen,.square.filled.palegreen, a.circle.palegreen:hover,a.square.palegreen:hover, a:hover > .circle.palegreen,a:hover > .square.palegreen { color:#ffffff; background-color:#a9d6c3; } .circle.lightgreen,.square.lightgreen { color:#eef5f4; border-color:#eef5f4; } .circle.filled.lightgreen,.square.filled.lightgreen, a.circle.lightgreen:hover,a.square.lightgreen:hover, a:hover > .circle.lightgreen,a:hover > .square.lightgreen { color:#ffffff; background-color:#eef5f4; } .circle.darkgreen,.square.darkgreen { color:#668877; border-color:#668877; } .circle.filled.darkgreen,.square.filled.darkgreen, a.circle.darkgreen:hover,a.square.darkgreen:hover, a:hover > .circle.darkgreen,a:hover > .square.darkgreen { color:#ffffff; background-color:#668877; } .circle.red,.square.red { color:#ee0000; border-color:#ee0000; } .circle.filled.red,.square.filled.red, a.circle.red:hover,a.square.red:hover, a:hover > .circle.red,a:hover > .square.red { color:#ffffff; background-color:#ee0000; } .circle.orange,.square.orange { color:#d94d38; border-color:#d94d38; } .circle.filled.orange,.square.filled.orange, a.circle.orange:hover,a.square.orange:hover, a:hover > .circle.orange,a:hover > .square.orange { color:#ffffff; background-color:#d94d38; } .circle.yellow,.square.yellow { color:#f39801; border-color:#f39801; } .circle.filled.yellow,.square.filled.yellow, a.circle.yellow:hover,a.square.yellow:hover, a:hover > .circle.yellow,a:hover > .square.yellow { color:#ffffff; background-color:#f39801; } .circle.gray,.square.gray { color:#999999; border-color:#999999; } .circle.filled.gray,.square.filled.gray, a.circle.gray:hover,a.square.gray:hover, a:hover > .circle.gray,a:hover > .square.gray { color:#ffffff; background-color:#999999; } .circle.lightgray,.square.lightgray { color:#bbbbbb; border-color:#bbbbbb; } .circle.filled.lightgray,.square.filled.lightgray, a.circle.lightgray:hover,a.square.lightgray:hover, a:hover > .circle.lightgray,a:hover > .square.lightgray { color:#ffffff; background-color:#bbbbbb; } .circle.bordergray,.square.bordergray { color:#cccccc; border-color:#cccccc; } .circle.filled.bordergray,.square.filled.bordergray, a.circle.bordergray:hover,a.square.bordergray:hover, a:hover > .circle.bordergray,a:hover > .square.bordergray { color:#ffffff; background-color:#bbbbbb; } .circle.borderlightgray,.square.borderlightgray { color:#e1e1e1; border-color:#e1e1e1; } .circle.filled.borderlightgray,.square.filled.borderlightgray, a.circle.borderlightgray:hover,a.square.borderlightgray:hover, a:hover > .circle.borderlightgray,a:hover > .square.borderlightgray { color:#ffffff; background-color:#bbbbbb; } .circle.darkgray,.square.darkgray { color:#888888; border-color:#888888; } .circle.filled.darkgray,.square.filled.darkgray, a.circle.darkgray:hover,a.square.darkgray:hover, a:hover > .circle.darkgray,a:hover > .square.darkgray { color:#ffffff; background-color:#888888; } .circle.deepgray,.square.deepgray { color:#555555; border-color:#555555; } .circle.filled.deepgray,.square.filled.deepgray, a.circle.deepgray:hover,a.square.deepgray:hover, a:hover > .circle.deepgray,a:hover > .square.deepgray { color:#ffffff; background-color:#555555; } .circle.black,.square.black { color:#222222; border-color:#222222; } .circle.filled.black,.square.filled.black, a.circle.black:hover,a.square.black:hover, a:hover > .circle.black,a:hover > .square.black { color:#ffffff; background-color:#222222; } .circle.white,.square.white { color:#ffffff; border-color:#ffffff; } .circle.filled.white,.square.filled.white, a.circle.white:hover,a.square.white:hover, a:hover > .circle.white,a:hover > .square.white { color:#444444; background-color:#ffffff; } .circle.kimini-green,.square.kimini-green { color:#008672; border-color:#008672; } .circle.filled.kimini-green,.square.filled.kimini-green, a.circle.kimini-green:hover,a.square.kimini-green:hover, a:hover > .circle.kimini-green,a:hover > .square.kimini-green { color:#ffffff; background-color:#008672; } .circle.kimini-blue,.square.kimini-blue { color:#00b6eb; border-color:#00b6eb; } .circle.filled.kimini-blue,.square.filled.kimini-blue, a.circle.kimini-blue:hover,a.square.kimini-blue:hover, a:hover > .circle.kimini-blue,a:hover > .square.kimini-blue { color:#ffffff; background-color:#00b6eb; } .circle.kimini-lime,.square.kimini-lime { color:#9ed238; border-color:#9ed238; } .circle.filled.kimini-lime,.square.filled.kimini-lime, a.circle.kimini-lime:hover,a.square.kimini-lime:hover, a:hover > .circle.kimini-lime,a:hover > .square.kimini-lime { color:#ffffff; background-color:#9ed238; } /**** .btn ****/ .btn { display:inline-block; font-size:16px; height:40px; line-height:40px; padding:0 12px 0 12px; border:none; background-color:#239765; text-align:center; vertical-align:top; white-space:nowrap; position:relative; outline:0; } .btn.round { border-radius:20px; } /* sizing */ .btn.xlarge { font-size:24px; height:60px; line-height:60px; padding:0 30px 0 30px; } .btn.xlarge.round { border-radius:30px; } .btn.large { font-size:20px; height:50px; line-height:50px; padding:0 24px 0 24px; } .btn.large.round { border-radius:25px; } .btn.regular { font-size:16px; height:40px; line-height:40px; } .btn.regular.round { border-radius:20px; } .btn.small { font-size:14px; height:30px; line-height:30px; } .btn.small.round { border-radius:15px; } /* fill styles */ .btn[class^="fill-"],.btn[class*=" fill-"] { color:#ffffff; } /* circle,square */ .btn.circle,.btn.square { font-size:16px; width:40px; height:40px; line-height:40px; padding:0; } .btn.circle.xlarge,.btn.square.xlarge { font-size:24px; width:60px; height:60px; line-height:60px; } .btn.circle.large,.btn.square.large { font-size:20px; width:50px; height:50px; line-height:50px; } .btn.circle.regular,.btn.square.regular { font-size:16px; width:40px; height:40px; line-height:40px; } .btn.circle.small,.btn.square.small { font-size:14px; width:30px; height:30px; line-height:30px; } /* label styles */ .btn[class^="label-"],.btn[class*=" label-"] { line-height:38px; border-width:1px; border-style:solid; background:transparent; transition:background-color 0.1s linear,color 0.1s linear; } .btn.xlarge[class^="label-"],.btn.xlarge[class*=" label-"] { line-height:58px; } .btn.large[class^="label-"],.btn.large[class*=" label-"] { line-height:48px; } .btn.regular[class^="label-"],.btn.regular[class*=" label-"] { line-height:38px; } .btn.small[class^="label-"],.btn.small[class*=" label-"] { line-height:28px; } .btn[class^="label-"]:hover,.btn[class*=" label-"]:hover,.btn[class^="label-"]:hover,.btn[class*=" label-"]:active { color:#ffffff !important; opacity:1.0; } .btn.label-green:hover,.btn.label-green:active { background-color:#239765; } .btn.label-palegreen:hover,.btn.label-palegreen:active { background-color:#a9d6c3; } .btn.label-lightgreen:hover,.btn.label-lightgreen:active { background-color:#eef5f4; } .btn.label-darkgreen:hover,.btn.label-darkgreen:active { background-color:#668877; } .btn.label-red:hover,.btn.label-red:active { background-color:#ee0000; } .btn.label-orange:hover,.btn.label-orange:active { background-color:#d94d38; } .btn.label-yellow:hover,.btn.label-yellow:active { background-color:#f39801; } .btn.label-gray:hover,.btn.label-gray:active { background-color:#999999; } .btn.label-lightgray:hover,.btn.label-lightgray:active { background-color:#bbbbbb; } .btn.label-bggray:hover,.btn.label-bggray:active { background-color:#f6f7f7; } .btn.label-bordergray:hover,.btn.label-bordergray:active { background-color:#cccccc; } .btn.label-borderlightgray:hover,.btn.label-borderlightgray:active { background-color:#e1e1e1; } .btn.label-darkgray:hover,.btn.label-darkgray:active { background-color:#888888; } .btn.label-deepgray:hover,.btn.label-deepgray:active { background-color:#555555; } .btn.label-textgray:hover,.btn.label-deepgray:active { background-color:#444444; } .btn.label-black:hover,.btn.label-black:active { background-color:#222222; } .btn.label-white:hover,.btn.label-white:active { background-color:#ffffff; color:#239765 !important; } .btn.label-kimini-green:hover,.btn.label-kimini-green:active { background-color:#008672; } .btn.label-kimini-blue:hover,.btn.label-kimini-blue:active { background-color:#00b6eb; } .btn.label-kimini-lime:hover,.btn.label-kimini-lime:active { background-color:#9ed238; } .btn[class^="label-"].disabled:hover,.btn[class*=" label-"].disabled:hover,.btn[class^="label-"]:hover,.btn[class*=" label-"].disabled:active { opacity:0.6; } .btn.disabled.label-green,.btn.disabled.label-green:hover,.btn.disabled.label-green:active { color:#239765 !important; background-color:transparent !important; } .btn.disabled.label-palegreen,.btn.disabled.label-palegreen:hover,.btn.disabled.label-palegreen:active { color:#a9d6c3 !important; background-color:transparent !important; } .btn.disabled.label-lightgreen,.btn.disabled.label-lightgreen:hover,.btn.disabled.label-lightgreen:active { color:#eef5f4 !important; background-color:transparent !important; } .btn.disabled.label-darkgreen,.btn.disabled.label-darkgreen:hover,.btn.disabled.label-darkgreen:active { color:#668877 !important; background-color:transparent !important; } .btn.disabled.label-red,.btn.disabled.label-red:hover,.btn.disabled.label-red:active { color:#ee0000 !important; background-color:transparent !important; } .btn.disabled.label-orange,.btn.disabled.label-orange:hover,.btn.disabled.label-orange:active { color:#d94d38 !important; background-color:transparent !important; } .btn.disabled.label-yellow,.btn.disabled.label-yellow:hover,.btn.disabled.label-yellow:active { color:#f39801 !important; background-color:transparent !important; } .btn.disabled.label-gray,.btn.disabled.label-gray:hover,.btn.disabled.label-gray:active { color:#999999 !important; background-color:transparent !important; } .btn.disabled.label-lightgray,.btn.disabled.label-lightgray:hover,.btn.disabled.label-lightgray:active { color:#bbbbbb !important; background-color:transparent !important; } .btn.disabled.label-bggray,.btn.disabled.label-bggray:hover,.btn.disabled.label-bggray:active { color:#f6f7f7 !important; background-color:transparent !important; } .btn.disabled.label-bordergray,.btn.disabled.label-bordergray:hover,.btn.disabled.label-bordergray:active { color:#cccccc !important; background-color:transparent !important; } .btn.disabled.label-borderlightgray,.btn.disabled.label-borderlightgray:hover,.btn.disabled.label-borderlightgray:active { color:#e1e1e1 !important; background-color:transparent !important; } .btn.disabled.label-darkgray,.btn.disabled.label-darkgray:hover,.btn.disabled.label-darkgray:active { color:#888888 !important; background-color:transparent !important; } .btn.disabled.label-deepgray,.btn.disabled.label-deepgray:hover,.btn.disabled.label-deepgray:active { color:#555555 !important; background-color:transparent !important; } .btn.disabled.label-black,.btn.disabled.label-black:hover,.btn.disabled.label-black:active { color:#222222 !important; background-color:transparent !important; } .btn.disabled.label-white,.btn.disabled.label-white:hover,.btn.disabled.label-white:active { color:#ffffff !important; background-color:transparent !important; } .btn.disabled.label-kimini,.btn.disabled.label-kimini-green:hover,.btn.disabled.label-kimini-green:active { color:#008672 !important; background-color:transparent !important; } .btn.disabled.label-kimini,.btn.disabled.label-kimini-blue:hover,.btn.disabled.label-kimini-blue:active { color:#00b6eb !important; background-color:transparent !important; } .btn.disabled.label-kimini,.btn.disabled.label-kimini-lime:hover,.btn.disabled.label-kimini-lime:active { color:#9ed238 !important; background-color:transparent !important; } /* with icon */ .btn.prev,.btn.with-icon.left { padding-left:20px; } .btn.prev::after,.btn.with-icon.left > i { display:inline-block; font-size:80%; position:absolute; top:1px; left:12px; } .btn.prev::after { content:"\e929"; font-family:"icon"; } .btn.next,.btn.with-icon.right { padding-right:20px; } .btn.next::after,.btn.with-icon.right > i { display:inline-block; font-size:80%; position:absolute; top:1px; right:12px; } .btn.next::after { content:"\e92a"; font-family:"icon"; } .btn.small.prev::after,.btn.small.with-icon.left > i { left:10px; } .btn.regular.prev::after,.btn.regular.with-icon.left > i { left:12px; } .btn.large.prev::after,.btn.large.with-icon.left > i { left:15px; } .btn.xlarge.prev::after,.btn.xlarge.with-icon.left > i { left:18px; } .btn.small.next::after,.btn.small.with-icon.right > i { right:10px; } .btn.regular.next::after,.btn.regular.with-icon.right > i { right:12px; } .btn.large.next::after,.btn.large.with-icon.right > i { right:15px; } .btn.xlarge.next::after,.btn.xlarge.with-icon.right > i { right:18px; } /**** .link ****/ /* back */ .link.back,.link.next,.link.forward { color:#239765; position:relative; } .link.back:before,.link.next:before,.link.forward:after { content:""; display:inline-block; vertical-align:middle; font-size:24px; line-height:34px; width:36px; height:36px; border:1px solid #239765; border-radius:50%; transition:color 0.2s linear, background-color 0.2s linear; position:relative; top:-1px; z-index:0; } .link.back:hover:before,.link.next:hover:before,.link.forward:hover:after { background-color:#239765; } .link.back:after,.link.next:after,.link.forward:before { font-family:"icon"; display:block; color:#239765; font-size:12px; transition:color 0.2s linear, background-color 0.2s linear; z-index:1; } .link.back:hover:after,.link.next:hover:after,.link.forward:hover:before { color:#ffffff; } .link.back:before,.link.next:before { margin-right:12px; } .link.forward:after { margin-left:12px; } .link.back:after { content:"\ed61"; position:absolute; top:-6px; left:12px; } .link.next:after { content:"\ed5d"; position:absolute; top:-6px; left:12px; } .link.forward:before { content:"\ed5d"; position:absolute; top:-6px; right:12px; } .link.back.green,.link.next.green,.link.forward.green { color:#239765; } .link.back.green:before,.link.next.green:before,.link.forward.green:after { border-color:#239765; } .link.back.green:hover:before,.link.next.green:hover:before,.link.forward.green:hover:after { background-color:#239765; } .link.back.green:after,.link.next.green:after,.link.forward.green:before { color:#239765; } .link.back.green:hover:after,.link.next.green:hover:after,.link.forward.green:hover:before { color:#ffffff; } .link.back.palegreen,.link.next.palegreen,.link.forward.palegreen { color:#a9d6c3; } .link.back.palegreen:before,.link.next.palegreen:before,.link.forward.palegreen:after { border-color:#a9d6c3; } .link.back.palegreen:hover:before,.link.next.palegreen:hover:before,.link.forward.palegreen:hover:after { background-color:#a9d6c3; } .link.back.palegreen:after,.link.next.palegreen:after,.link.forward.palegreen:before { color:#a9d6c3; } .link.back.palegreen:hover:after,.link.next.palegreen:hover:after,.link.forward.palegreen:hover:before { color:#ffffff; } .link.back.red,.link.forward.red { color:#ee0000; } .link.back.red:before,.link.forward.red:after { border-color:#ee0000; } .link.back.red:hover:before,.link.forward.red:hover:after { background-color:#ee0000; } .link.back.red:after,.link.forward.red:before { color:#ee0000; } .link.back.red:hover:after,.link.forward.red:hover:before { color:#ffffff; } .link.back.orange,.link.forward.orange { color:#d94d38; } .link.back.orange:before,.link.forward.orange:after { border-color:#d94d38; } .link.back.orange:hover:before,.link.forward.orange:hover:after { background-color:#d94d38; } .link.back.orange:after,.link.forward.orange:before { color:#d94d38; } .link.back.orange:hover:after,.link.forward.orange:hover:before { color:#ffffff; } .link.back.yellow,.link.forward.yellow { color:#f39801; } .link.back.yellow:before,.link.forward.yellow:after { border-color:#f39801; } .link.back.yellow:hover:before,.link.forward.yellow:hover:after { background-color:#f39801; } .link.back.yellow:after,.link.forward.yellow:before { color:#f39801; } .link.back.yellow:hover:after,.link.forward.yellow:hover:before { color:#ffffff; } .link.back.gray,.link.forward.gray { color:#999999; } .link.back.gray:before,.link.forward.gray:after { border-color:#999999; } .link.back.gray:hover:before,.link.forward.gray:hover:after { background-color:#999999; } .link.back.gray:after,.link.forward.gray:before { color:#999999; } .link.back.gray:hover:after,.link.forward.gray:hover:before { color:#ffffff; } .link.back.lightgray,.link.forward.lightgray { color:#bbbbbb; } .link.back.lightgray:before,.link.forward.lightgray:after { border-color:#bbbbbb; } .link.back.lightgray:hover:before,.link.forward.lightgray:hover:after { background-color:#bbbbbb; } .link.back.lightgray:after,.link.forward.lightgray:before { color:#bbbbbb; } .link.back.lightgray:hover:after,.link.forward.lightgray:hover:before { color:#ffffff; } .link.back.darkgray,.link.forward.darkgray { color:#888888; } .link.back.darkgray:before,.link.forward.darkgray:after { border-color:#888888; } .link.back.darkgray:hover:before,.link.forward.darkgray:hover:after { background-color:#888888; } .link.back.darkgray:after,.link.forward.darkgray:before { color:#888888; } .link.back.darkgray:hover:after,.link.forward.darkgray:hover:before { color:#ffffff; } .link.back.deepgray,.link.forward.deepgray { color:#555555; } .link.back.deepgray:before,.link.forward.deepgray:after { border-color:#555555; } .link.back.deepgray:hover:before,.link.forward.deepgray:hover:after { background-color:#555555; } .link.back.deepgray:after,.link.forward.deepgray:before { color:#555555; } .link.back.deepgray:hover:after,.link.forward.deepgray:hover:before { color:#ffffff; } .link.back.black,.link.forward.black { color:#222222; } .link.back.black:before,.link.forward.black:after { border-color:#222222; } .link.back.black:hover:before,.link.forward.black:hover:after { background-color:#222222; } .link.back.black:after,.link.forward.black:before { color:#222222; } .link.back.black:hover:after,.link.forward.black:hover:before { color:#ffffff; } .link.back.white,.link.next.white,.link.forward.white { color:#ffffff; } .link.back.white:before,.link.next.white:before,.link.forward.white:after { border-color:#ffffff; } .link.back.white:hover:before,.link.next.white:hover:before,.link.forward.white:hover:after { background-color:#ffffff; } .link.back.white:after,.link.next.white:after,.link.forward.white:before { color:#ffffff; } .link.back.white:hover:after,.link.next.white:hover:after,.link.forward.white:hover:before { color:#239765; } .link.back.kimini-green,.link.forward.kimini-green { color:#008672; } .link.back.kimini-green:before,.link.forward.kimini-green:after { border-color:#008672; } .link.back.kimini-green:hover:before,.link.forward.kimini-green:hover:after { background-color:#008672; } .link.back.kimini-green:after,.link.forward.kimini-green:before { color:#008672; } .link.back.kimini-green:hover:after,.link.forward.kimini-green:hover:before { color:#ffffff; } .link.back.kimini-blue,.link.forward.kimini-blue { color:#008672; } .link.back.kimini-blue:before,.link.forward.kimini-blue:after { border-color:#008672; } .link.back.kimini-blue:hover:before,.link.forward.kimini-blue:hover:after { background-color:#008672; } .link.back.kimini-blue:after,.link.forward.kimini-blue:before { color:#008672; } .link.back.kimini-blue:hover:after,.link.forward.kimini-blue:hover:before { color:#ffffff; } .link.back.kimini-lime,.link.forward.kimini-lime { color:#9ed238; } .link.back.kimini-lime:before,.link.forward.kimini-lime:after { border-color:#9ed238; } .link.back.kimini-lime:hover:before,.link.forward.kimini-lime:hover:after { background-color:#9ed238; } .link.back.kimini-lime:after,.link.forward.kimini-lime:before { color:#9ed238; } .link.back.kimini-lime:hover:after,.link.forward.kimini-lime:hover:before { color:#ffffff; } .link.back.disabled:hover:before,.link.next.disabled:hover:before,.link.forward.disabled:hover:after { background-color:inherit; } .link.back.disabled:hover:after,.link.next.disabled:hover:after,.link.forward.disabled:hover:before { color:inherit; } /**** youtube container ****/ /*.youtube-container { position:relative; padding-bottom:56.25%; height:0; overflow:hidden; }*/ /*.youtube-container > iframe { position:absolute; top:0; left:0; width:100%; height:100%; }*/ .youtube-container { width:100%; aspect-ratio:16/9; } .youtube-container > iframe { width:100%; height:100%; } /**** pdf.js container ****/ .pdf-container { width:100%; aspect-ratio:30/24; } .pdf-container > iframe { width:100%; height:100%; } /**** .thumb ****/ .thumb { border:1px solid #cccccc; background-color:#f9f9f9; vertical-align:middle; } .thumb.border-none,.thumb.no-border { border:none; } .thumb.round { border-radius:50%; } .thumb.zoom { transition:transform 0.2s linear; } .thumb.zoom:hover { transform:scale(1.1); } /**** tooltip ****/ .tooltip { display:inline-block; border-radius:4px; background:#333333; min-width:30px; padding: 4px 12px 4px 12px; font-size:14px; line-height:1.5; vertical-align:middle; color:#f0f0f0; text-align:center; white-space:nowrap; position:absolute; z-index:100; pointer-events:none; } .tooltip::after { content:''; position:absolute; bottom:-8px; left:12px; border-top:10px solid #333333; border-right:6px solid transparent; border-left:6px solid transparent; } .tooltip.position-default::after {} .tooltip.position-center::after { left:46%; } /**** .loading ****/ .loading { display:inline-block; vertical-align:middle; border:0.12em solid rgba(0,0,0,0.1); border-left-color:rgba(0,0,0,0.25); border-radius:50%; /*text-indent:-9999px;*/ animation:keyframes-rolling 1.0s infinite linear; } /* colors */ .loading.gray { border-color:rgba(0,0,0,0.1); border-left-color:rgba(0,0,0,0.25); } .loading.green { border-color:rgba(35,151,101,0.3); border-left-color:rgba(35,151,101,1.0); } .loading.white { border-color:rgba(255,255,255,0.3); border-left-color:rgba(255,255,255,1.0); } /* sizing */ .loading.xlarge { width:28px; height:28px; font-size:28px; } .loading.large { width:24px; height:24px; font-size:24px; } .loading.regular { width:20px; height:20px; font-size:20px; } .loading.small { width:16px; height:16px; font-size:16px; } .loading.size-XL { width:72px; height:72px; font-size:72px; margin:40px; } .loading.size-L { width:50px; height:50px; font-size:50px; margin:26px; } .loading.size-M { width:30px; height:30px; font-size:30px; margin:21px; } .loading.size-S { width:24px; height:24px;font-size:24px; margin:13px; } .loading.size-XS { width:20px; height:20px;font-size:20px; margin:5px; } /* see also $.mpjs.loading */ .overlay-loading { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(255,255,255,0.5); z-index:4000; } .overlay-loading > div { display:table; position:absolute; top:50%; left:50%; } .overlay-loading > div > span { display:table-cell; position:relative; top:-100px; left:-100px; width:202px; height:202px; text-align:center; vertical-align:middle; border-radius:24px; } .overlay-loading > div > span > div { display:none; background-color:rgba(220,220,220,0.75); line-height:30px; text-align:center; vertical-align:top; border-radius:15px; margin:0 20px 0 20px; text-shadow: 0 0 1px #ffffff; } .overlay-loading.overlay-loading-face-white { background-color:rgba(255,255,255,0.5); } .overlay-loading.overlay-loading-face-white i.loading { border-color:rgba(0,0,0,0.1); border-left-color:rgba(0,0,0,0.25); } .overlay-loading.overlay-loading-face-white > div > span > div { background-color:rgba(220,220,220,0.75); } .overlay-loading.overlay-loading-face-gray { background-color:rgba(150,150,150,0.5); } .overlay-loading.overlay-loading-face-gray i.loading { border-color:rgba(255,255,255,0.3); border-left-color:rgba(255,255,255,1.0); } .overlay-loading.overlay-loading-face-gray > div > span > div { background-color:rgba(245,245,245,0.75); } .overlay-loading.overlay-loading-face-black { background-color:rgba(0,0,0,0.5); } .overlay-loading.overlay-loading-face-black i.loading { border-color:rgba(255,255,255,0.3); border-left-color:rgba(255,255,255,1.0); } .overlay-loading.overlay-loading-face-black > div > span > div { background-color:rgba(220,220,220,0.75); } .overlay-loading.overlay-loading-face-modal-white > div > span { background-color:rgba(255,255,255,0.75); } .overlay-loading.overlay-loading-face-modal-white i.loading { border-color:rgba(35,151,101,0.3); border-left-color:rgba(35,151,101,1.0); } .overlay-loading.overlay-loading-face-modal-white > div > span > div { background-color:rgba(255,255,255,1.0); } .overlay-loading.overlay-loading-face-modal-gray > div > span { background-color:rgba(150,150,150,0.7); } .overlay-loading.overlay-loading-face-modal-gray i.loading { border-color:rgba(255,255,255,0.3); border-left-color:rgba(255,255,255,1.0); } .overlay-loading.overlay-loading-face-modal-gray > div > span > div { background-color:rgba(255,255,255,0.8); } .overlay-loading.overlay-loading-face-modal-black > div > span { background-color:rgba(90,90,90,0.7); } .overlay-loading.overlay-loading-face-modal-black i.loading { border-color:rgba(255,255,255,0.3); border-left-color:rgba(255,255,255,1.0); } .overlay-loading.overlay-loading-face-modal-black > div > span > div { background-color:rgba(255,255,255,0.9); } /**** .waiting ****/ .waiting,.waiting::before,.waiting::after { display:inline-block; vertical-align:middle; background-color:rgba(0,0,0,0.1); border-radius:50%; /*text-indent:-9999px;*/ position:relative; animation:keyframes-waiting-gray 0.6s infinite alternate; animation-delay:0.2s !important; } .waiting::before,.waiting::after { content:""; position:absolute; top:0; } .waiting::after { animation-delay:0.4s !important; } .waiting.gray,.waiting.gray::before,.waiting.gray::after { animation:keyframes-waiting-gray 0.6s infinite alternate; } .waiting.green,.waiting.green::before,.waiting.green::after { animation:keyframes-waiting-green 0.6s infinite alternate; } .waiting.white,.waiting.white::before,.waiting.white::after { animation:keyframes-waiting-white 0.6s infinite alternate; } .waiting.xlarge,.waiting.xlarge::before,.waiting.xlarge::after { width:6px; height:6px; } .waiting.xlarge { margin:11px; } .waiting.xlarge::before { left:-10px; } .waiting.xlarge::after { right:-10px; } .waiting.large,.waiting.large::before,.waiting.large::after { width:4px; height:4px; } .waiting.large { margin:10px; } .waiting.large::before { left:-8px; } .waiting.large::after { right:-8px; } .waiting.regular,.waiting.regular::before,.waiting.regular::after { width:2px; height:2px; } .waiting.regular { margin:9px; } .waiting.regular::before { left:-6px; } .waiting.regular::after { right:-6px; } .waiting.small,.waiting.small::before,.waiting.small::after { width:2px; height:2px; } .waiting.small { margin:7px; } .waiting.small::before { left:-6px; } .waiting.small::after { right:-6px; } @keyframes keyframes-waiting-gray { 0% { background-color:rgba(0,0,0,0.1) } 50% { background-color:rgba(0,0,0,0.1) } 100% { background-color:rgba(0,0,0,0.4) } } @keyframes keyframes-waiting-green { 0% { background-color:rgba(35,151,101,0.3) } 50% { background-color:rgba(35,151,101,0.3) } 100% { background-color:rgba(35,151,101,1.0) } } @keyframes keyframes-waiting-white { 0% { background-color:rgba(255,255,255,0.3) } 50% { background-color:rgba(255,255,255,0.3) } 100% { background-color:rgba(255,255,255,1.0) } } /**** .timer ****/ .timer { display:inline-flex; justify-content:center; align-items:center; _background-image:conic-gradient(#239765 0% 60%, #d9d9d9 60% 100%); border-radius:50%; font-size:16px; width:40px; height:40px; animation-name:keyframes-timer; } .timer > span { display:flex; justify-content:center; align-items:center; background-color:#ffffff; border-radius:50%; width:30px; height:30px; } .timer.timer-start { animation-duration:6.0s; animation-direction:normal; animation-timing-function:ease; animation-delay:0s; animation-iteration-count:1; animation-fill-mode:both; animation-play-state:running; } @keyframes keyframes-timer { 0% { background-image:conic-gradient(#239765 0% 99%, #d9d9d9 99% 0%); _background:#d9d9d9; } 100% { background-image:conic-gradient(#239765 0% 50%, #d9d9d9 50% 100%); _background:#239765; } } /* sizing */ .timer.xlarge { font-size:24px; width:60px; height:60px; } .timer.large { font-size:20px; width:50px; height:50px; } .timer.regular { font-size:16px; width:40px; height:40px; } .timer.small { font-size:14px; width:30px; height:30px; } /**** .pii ****/ i.pii { display:inline-block; width:80px; height:48px; background:transparent url("../../images/site3/pii/pii.png") top left no-repeat; background-size:cover; vertical-align:middle; } /* sizing */ i.pii.size-XL { width:160px; height:96px; } i.pii.size-L { width:120px; height:72px; } i.pii.size-M { width:80px; height:48px; } i.pii.size-S { width:58px; height:36px; } /* face patterns */ i.pii.face-plain { background-image:url("../../images/site3/pii/pii.png"); } i.pii.face-smile { background-image:url("../../images/site3/pii/smile.png"); } i.pii.face-heart { background-image:url("../../images/site3/pii/heart.png"); } i.pii.face-notify { background-image:url("../../images/site3/pii/notify.png"); } i.pii.face-notify2 { background-image:url("../../images/site3/pii/notify2.png"); } i.pii.face-question { background-image:url("../../images/site3/pii/question.png"); } i.pii.face-question2 { background-image:url("../../images/site3/pii/question2.png"); } i.pii.face-sad { background-image:url("../../images/site3/pii/sad.png"); } i.pii.face-shock { background-image:url("../../images/site3/pii/shock.png"); } i.pii.face-cry { background-image:url("../../images/site3/pii/cry.png"); } i.pii.face-worry { background-image:url("../../images/site3/pii/worry.png"); } i.pii.face-worry2 { background-image:url("../../images/site3/pii/worry2.png"); } i.pii.face-angry { background-image:url("../../images/site3/pii/angry.png"); } /**** logo ****/ /* kimini */ .kimini-icon,.kimini-logo { display:inline-block; height:36px; text-indent:-9999px; vertical-align:middle; background:transparent center center no-repeat; background-size:contain; position:relative; } .kimini-icon { width:36px; background-image:url("../../images/site3/common/ci/kimini-icon.png"); } .kimini-icon.with-name { width:36px; background-image:url("../../images/site3/common/ci/kimini-icon-with-name.png"); } .kimini-logo { width:88px; background-image:url("../../images/site3/common/ci/kimini-logo.png"); } .kimini-logo.with-lead { width:88px; background-image:url("../../images/site3/common/ci/kimini-logo-with-lead.png"); } /* glats */ .glats-icon,.glats-logo { display:inline-block; height:28px; text-indent:-9999px; vertical-align:middle; background:transparent center center no-repeat; background-size:contain; position:relative; } .glats-icon { width:28px; background-image:url("../../images/site3/common/ci/glats-icon.png"); } .glats-logo { width:100px; background-image:url("../../images/site3/common/ci/glats-logo.png"); } .glats-sign { display:inline-block; width:80px; height:80px; text-indent:-9999px; vertical-align:middle; background:transparent center center no-repeat; background-size:contain; background-image:url("../../images/site3/common/ci/glats-sign.png"); position:relative; } /* gakken-group */ .gakken-group-logo { display:inline-block; width:150px; height:24px; text-indent:-9999px; vertical-align:middle; background:transparent center center no-repeat; background-size:contain; position:relative; } .gakken-group-logo.green { background-image:url("../../images/site3/common/ci/gakken-group-logo.green.png"); } .gakken-group-logo.black { background-image:url("../../images/site3/common/ci/gakken-group-logo.black.png"); } .gakken-group-logo.white { background-image:url("../../images/site3/common/ci/gakken-group-logo.white.png"); } /* credit cards */ [class^="credit-"] { display:inline-block; background-position:center center; background-repeat:no-repeat; background-size:contain; vertical-align:middle; text-indent:-9999px; } .credit-visa { width:34px; height:22px; background-image:url("../../images/site3/common/credit/visa.gif"); } .credit-mastercard { width:34px; height:22px; background-image:url("../../images/site3/common/credit/mastercard.gif"); } .credit-jcb { width:31px; height:24px; background-image:url("../../images/site3/common/credit/jcb.gif"); } .credit-amex { width:24px; height:24px; background-image:url("../../images/site3/common/credit/amex.gif"); } .credit-diners { width:33px; height:24px; background-image:url("../../images/site3/common/credit/diners.gif"); } /**** .ticket ****/ .ticket { display:flex; justify-content:space-between; flex-wrap:nowrap; align-items:center; overflow-x:hidden; position:relative; } .ticket > .outer { border:1px solid #cccccc; background:#fcfcfc; width:100%; padding:0px 20px 0px 20px; } .ticket > .outer > .inner { border-left:1px dotted #cccccc; border-right:1px dotted #cccccc; background:#ffffff; padding:25px 20px 20px 20px; } .ticket:before,.ticket:after { content:""; display:block; width:20px; height:20px; border-radius:10px; border:1px solid #cccccc; background-color:#ffffff; position:absolute; } .ticket:before { left:-10px; } .ticket:after { right:-10px; } .ticket > .outer > .inner dl.title { display:table; width:100%; margin-bottom:15px } .ticket > .outer > .inner dl.title > dt,.ticket > .outer > .inner dl.title > dd { display:table-cell; text-align:left; vertical-align:middle; } .ticket > .outer > .inner dl.title > dt { width:1%; white-space:nowrap; padding-right:12px; } .ticket > .outer > .inner > dl.title > dd + dd { width:1%; white-space:nowrap; padding-left:15px; } .ticket > .outer > .inner ul.details { position:relative; } .ticket > .outer > .inner ul.details > li { padding-left:26px; position:relative; } .ticket > .outer > .inner ul.details > li:before { content:""; width:4px; height:4px; border-radius:2px; background:#cccccc; position:absolute; left:12px; top:14px; } .ticket > .outer > .inner ul.details > li.more { display:block; padding:0; font-size:14px; position:absolute; bottom:0; right:0; } .ticket > .outer > .inner ul.details > li.more:before { display:none; } .ticket.status-consumed > .outer > .inner, .ticket.status-expired > .outer > .inner, .ticket.status-revoked > .outer > .inner { background:#fcfcfc; } .ticket.status-consumed dl.title > dt .circle, .ticket.status-expired dl.title > dt .circle, .ticket.status-revoked dl.title > dt .circle { background:#bbbbbb !important; border-color:#bbbbbb !important; } .ticket.status-consumed dl.title > dd, .ticket.status-expired dl.title > dd, .ticket.status-revoked dl.title > dd { color:#999999 !important; } /**** .coupon ****/ .coupon { border:1px solid #cccccc; padding:6px; } .coupon > .inner { border:1px solid #eeeeee; padding:25px 20px 20px 20px; } .coupon > .inner ul.details { position:relative; } .coupon > .inner ul.details > li { padding-left:18px; position:relative; } .coupon > .inner ul.details > li:before { content:""; width:4px; height:4px; border-radius:2px; background:#cccccc; position:absolute; left:4px; top:14px; } .coupon > .inner ul.details > li.more { display:block; padding:0; font-size:14px; position:absolute; bottom:0; right:0; } .coupon > .inner ul.details > li.more:before { display:none; } /**** .bar-graph ****/ .bar-graph { width:100%; height:8px; border-radius:4px; background:#f0f0f0; } .bar-graph > .inner { min-width:8px; height:100%; border-radius:4px; background:#239765 url("../../images/site3/tile/green.png") top left repeat; } .bar-graph.size-L { height:12px; border-radius:6px; } .bar-graph.size-L > .inner { min-width:12px; border-radius:6px; } /**** pages > dashboard ****/ /* profile */ .dashboard-profile { display:flex; justify-content:space-between; flex-wrap:nowrap; align-items:stretch; padding:0 20px 0 30px; column-gap:30px; position:relative; z-index:0; flex-grow:1; } .dashboard-profile:before { display:block; content:""; position:absolute; top:50px; left:0; right:0; bottom:0; z-index:-1; border-radius:10px; background:rgb(35,151,101); background:linear-gradient(120deg, rgba(35,151,101,1) 30%, rgba(76,171,86,1) 100%); } .dashboard-profile > .left { flex-grow:1; color:#ffffff; } .dashboard-profile > .left .thumb { box-sizing:content-box; border:10px solid #239765; } .dashboard-profile > .right { padding:80px 0 15px 0; min-width:200px; } .dashboard-profile > .right a.box { display:block; color:#444444; } .dashboard-profile > .right a.box:hover { opacity:1.0; } .dashboard-profile > .side { flex-grow:1; color:#ffffff; padding-bottom:25px; } .dashboard-profile > .side .thumb { box-sizing:content-box; border:10px solid #239765; } .dashboard-profile-side { padding:0 10px 15px 10px; position:relative; z-index:0; } .dashboard-profile-side:before { display:block; content:""; position:absolute; top:40px; left:0; right:0; bottom:0; z-index:-1; border-radius:10px; background:rgb(35,151,101); background:linear-gradient(120deg, rgba(35,151,101,1) 60%, rgba(76,171,86,1) 100%); } .dashboard-profile-side > .inner { color:#ffffff; } .dashboard-profile-side > .inner .thumb { box-sizing:content-box; border:10px solid #239765; } /* calendar */ table.dashboard-menu-calendar { width:100%; border:none; border-collapse:collapse; position:relative; } table.dashboard-menu-calendar > thead > tr > th { border:none; padding:5px; font-size:12px; line-height:12px; text-align:center; vertical-align:middle; white-space:nowrap; } table.dashboard-menu-calendar > tbody > tr > td { border:none; padding:5px; font-size:16px; line-height:16px; text-align:center; vertical-align:middle; white-space:nowrap; } table.dashboard-menu-calendar > thead > tr > th:first-child, table.dashboard-menu-calendar > thead > tr > th:last-child, table.dashboard-menu-calendar > tbody > tr > td:first-child, table.dashboard-menu-calendar > tbody > tr > td:last-child { _background-color:#f6f7f7; } table.dashboard-menu-calendar > tbody > tr > td > a.day { display:inline-block; width:22px; height:22px; line-height:22px; text-align:center; vertical-align:middle; color:#444444; position:relative; } table.dashboard-menu-calendar > tbody > tr > td > a.day > span { position:relative; z-index:1; } table.dashboard-menu-calendar > tbody > tr > td > a.day.invalid { color:#bbbbbb; } table.dashboard-menu-calendar > tbody > tr > td > a.day.today { color:#ffffff; background-color:#f39801; border-radius:8px; } table.dashboard-menu-calendar > tbody > tr > td > a.day.taken-drill { color:#ffffff; background-color:#9ed238; border-radius:8px; } table.dashboard-menu-calendar > tbody > tr > td > a.day.taken-lesson { color:#ffffff; background-color:#239765; border-radius:8px; } table.dashboard-menu-calendar > tbody > tr > td > a.day.taken-all { color:#ffffff; background-color:#239765; border-radius:8px; } table.dashboard-menu-calendar > tbody > tr > td > a.day.lesson-reserved { color:#ffffff; background-color:#ee0000; border-radius:8px; } /**** pages > calendar ****/ table.calendar { width:100%; border:1px solid #cccccc; border-spacing:0; border-radius:10px; overflow:hidden; } table.calendar > thead > tr > th { border-right:1px solid #cccccc; border-bottom:1px solid #cccccc; text-align:center; vertical-align:middle; white-space:nowrap; background-color:#f6f7f7; font-size:14px; } table.calendar > thead > tr > th:last-child { border-right:none; } table.calendar > tbody > tr > td { border-right:1px solid #cccccc; border-bottom:1px solid #cccccc; text-align:left; vertical-align:top; white-space:nowrap; width:calc(100%/7); padding:45px 5px 32px 5px; line-height:20px; position:relative; z-index:0; } table.calendar > tbody > tr > td:before { display:block; content:""; float:left; height:40px; } table.calendar > tbody > tr > td:last-child { border-right:none; } table.calendar > tbody > tr:last-child > td { border-bottom:none; } table.calendar > tbody > tr > td.today:after { display:block; content:""; border:2px solid #f39801; position:absolute; top:-1px; left:-1px; width:calc(100% + 2px); height:calc(100% + 2px); z-index:1; pointer-events:none; } table.calendar > tbody > tr:last-child > td:first-child.today:after { border-radius:0 0 0 10px; } table.calendar > tbody > tr:last-child > td:last-child.today:after { border-radius:0 0 10px 0; } table.calendar > tbody > tr > td > em { position:absolute; top:14px; right:10px; font-size:22px; cursor:pointer; } table.calendar > tbody > tr > td > em:hover { opacity:0.75; } table.calendar > tbody > tr > td > a.drill { display:block; background-color:#eef5f4; color:#239765; height:20px; font-size:14px; padding:0 0 0 5px; border-radius:4px; } table.calendar > tbody > tr > td > a.lesson { display:block; background-color:#239765; color:#ffffff; text-align:center; font-size:14px; padding:0; border-radius:4px; } table.calendar > tbody > tr > td > a.lesson.status-incompleted { background-color:#bbbbbb; } table.calendar > tbody > tr > td > a.lesson.status-reserved { background-color:#9ed238; } table.calendar > tbody > tr > td > a.slot { display:block; background-color:#d0d0d0; color:#ffffff; text-align:center; font-size:14px; padding:0; border-radius:4px; } table.calendar > tbody > tr > td > a.reserve { display:block; background-color:#ffffff; color:#239765; border:1px solid #239765; text-align:center; font-size:14px; line-height:18px; padding:0; border-radius:4px; } table.calendar > tbody > tr > td > a + a { margin-top:4px; } table.calendar > tbody > tr > td > .total { position:absolute; bottom:5px; right:10px; color:#999999; font-size:14px; } /**** pages > plan ****/ .plans { max-width:830px; max-height:600px; padding-bottom:20px; overflow:scroll; -webkit-overflow-scrolling:touch; } .plans > table { border:none; border-spacing:0; line-height:1.8; } .plans > table tr.thead1 > th { border-right:1px solid #cccccc; border-top:1px solid #cccccc; text-align:center; vertical-align:middle; white-space:nowrap; padding:5px; font-size:14px; background-color:#f6f7f7; } .plans > table tr.thead1 > th:first-child { border-left:1px solid #cccccc; } .plans > table tr.thead2 > th { border-right:1px solid #cccccc; border-bottom:1px solid #cccccc; border-top:1px solid #cccccc; text-align:center; vertical-align:middle; white-space:nowrap; padding:10px; background-color:#f6f7f7; } .plans > table tr.thead2 > th:first-child { border-left:1px solid #cccccc; border-top:none; } .plans > table tr.tbody > th { border-right:1px solid #cccccc; border-bottom:1px solid #cccccc; border-left:1px solid #cccccc; text-align:center; vertical-align:middle; white-space:nowrap; padding:10px; background-color:#f6f7f7; font-size:14px; line-height:1.5; } .plans > table tr.tbody > td { border-right:1px solid #cccccc; border-bottom:1px solid #cccccc; text-align:center; vertical-align:middle; white-space:nowrap; padding:10px; min-width:150px; } .plans > table tr.thead2 > th { position:sticky; top:0; z-index:1; } .plans > table tr.thead1 > th:first-child, .plans > table tr.tbody > th { position:sticky; left:0; z-index:2; } .plans > table tr.thead2 > th:first-child { position:sticky; top:0; left:0; z-index:3; } .plans > table em { font-size:16px; color:#239765; cursor:pointer; margin-left:4px; position:relative; top:-2px; } /**** pages > drill ****/ /* status */ .drill-status {} .drill-status > .inner { display:flex; justify-content:flex-start; flex-wrap:nowrap; align-items:flex-start; column-gap:15px; } .drill-status > .inner > dl > dt { display:block; } .drill-status > .inner > dl > dd { display:block; margin-top:15px; padding-left:10px; } .drill-status > .inner > dl > dd > em { font-size:30px; margin-right:4px; } .drill-status > .inner > dl > dd > span + span { font-size:12px; margin-left:2px; } .drill-status > .inner > div { align-self:center; text-align:center; } /* progress */ .drill-progress-with-no { display:inline-block; line-height:21px; } .drill-progress-with-no > dl { display:block; text-align:center; } .drill-progress-with-no > dl > dt { display:block; text-align:center; } .drill-progress-with-no > dl > dd { display:block; text-align:center; margin-top:3px; color:#668877; font-size:14px; } .drill-progress-with-no.skip > dl > dd { color:#bbbbbb; } .drill-progress-with-no.invalid > dl > dd { color:#bbbbbb; } .drill-progress { display:inline-block; width:30px; height:30px; line-height:30px; border:1px solid #239765; background-color:#ffffff; text-align:center; } .drill-progress > i { color:#ffffff; font-size:16px; position:relative; top:-3px; } .drill-progress.learned { background-color:#eef5f4; } .drill-progress.learned > i { display:inline-block; color:#239765; } .drill-progress.mastered { background-color:#239765; } .drill-progress.mastered > i { display:inline-block; color:#ffffff; } .drill-progress.skip { background-color:#fcfcfc; border-color:#cccccc; } .drill-progress.skip > i { display:inline-block; color:#fcfcfc; } .drill-progress.invalid { background-color:#fcfcfc; border-color:#cccccc; } .drill-progress.invalid > i { display:inline-block; color:#fcfcfc; } /*======== Input forms ========*/ /* * font sizes, line heights and form heights: * - xxlarge : 28px | 42px | - * - xlarge : 24px | 36px | 60px * - large : 20px | 30px | 50px * - regular : 16px | 24px | 40px * - small : 14px | 21px | 30px * - xsmall : 12px | 18px | - * - xxsmall : 10px | 15px | - */ /**** .form-* ****/ [class^="form-"],[class*=" form-"] { display:inline-block; height:40px; line-height:40px; position:relative; vertical-align:top; } [class^="form-"].round,[class*=" form-"].round { border-radius:20px; } /*[class^="form-"]:hover,[class^="form-"]:focus { border-color:#999999; }*/ /* sizing */ [class^="form-"].xlarge,[class*=" form-"].xlarge { height:60px; line-height:60px; } [class^="form-"].xlarge.round,[class*=" form-"].xlarge.round { border-radius:30px; } [class^="form-"].large,[class*=" form-"].large { height:50px; line-height:50px; } [class^="form-"].large.round,[class*=" form-"].large.round { border-radius:25px; } [class^="form-"].regular,[class*=" form-"].regular { height:40px; line-height:40px; } [class^="form-"].regular.round,[class*=" form-"].regular.round { border-radius:20px; } [class^="form-"].small,[class*=" form-"].small { height:30px; line-height:30px; } [class^="form-"].small.round,[class*=" form-"].small.round { border-radius:15px; } /* error */ [class^="form-"].error,[class*=" form-"].error { border-color:#d94d38; color:#d94d38; } [class^="form-"].error:hover,[class*=" form-"].error:hover { border-color:#d94d38; } [class^="form-"].error:focus,[class*=" form-"].error:focus { border-color:#d94d38; background-color:#fffcfc; } /**** .form-line ****/ .form-line {} /**** .form-text ****/ .form-text { border:1px solid #bbbbbb; padding:0 8px 0 8px; } .form-text:hover,.form-text:focus { border-color:#999999; } .form-text.round { padding:0 12px 0 12px; } .form-text.xlarge { padding:0 16px 0 16px; } .form-text.xlarge.round { padding:0 20px 0 20px; } .form-text.large { padding:0 12px 0 12px; } .form-text.large.round { padding:0 16px 0 16px; } .form-text.regular { padding:0 8px 0 8px; } .form-text.regular.round { padding:0 12px 0 12px; } .form-text.small { padding:0 6px 0 6px; } .form-text.small.round { padding:0 10px 0 10px; } /**** .form-textarea ****/ .form-textarea { line-height:1.5 !important; border:1px solid #bbbbbb; padding:8px 8px 8px 8px; } .form-textarea:hover,.form-textarea:focus { border-color:#999999; } .form-textarea.round { padding:8px 12px 8px 12px; } .form-textarea.xlarge { padding:8px 16px 8px 16px; } .form-textarea.xlarge.round { padding:8px 20px 8px 20px; } .form-textarea.large { padding:8px 12px 8px 12px; } .form-textarea.large.round { padding:8px 16px 8px 16px; } .form-textarea.regular { padding:8px 8px 8px 8px; } .form-textarea.regular.round { padding:8px 12px 8px 12px; } .form-textarea.small { padding:8px 6px 8px 6px; } .form-textarea.small.round { padding:8px 10px 8px 10px; } /**** .form-checkbox ****/ .form-checkbox {} .form-checkbox::before { content:""; display:inline-block; vertical-align:top; position:relative; top:5px; width:30px; height:30px; border:1px solid #bbbbbb; background:#ffffff; } .form-checkbox:hover::before,.form-checkbox:active::before { border-color:#999999; } .form-checkbox::after { content:"\ed15"; font-family:"icon"; display:inline-block; position:absolute; top:0; left:1px; width:28px; text-align:center; color:#000000; opacity:0; transform:scale(0.6); transition:opacity 0.1s ease-out,transform 0.1s ease-out; } .form-checkbox.checked::after { opacity:1.0; transform:scale(1.0); } .form-checkbox > label { margin-left:8px; } .form-checkbox > input { display:none; } .form-checkbox.xlarge::before { top:11px; width:38px; height:38px; } .form-checkbox.xlarge::after { width:36px; } .form-checkbox.xlarge > label { margin-left:12px; } .form-checkbox.large::before { top:8px; width:34px; height:34px; } .form-checkbox.large::after { width:32px; } .form-checkbox.large > label { margin-left:10px; } .form-checkbox.regular::before { top:5px; width:30px; height:30px; } .form-checkbox.regular::after { width:28px; } .form-checkbox.regular > label { margin-left:8px; } .form-checkbox.small::before { top:2px; width:26px; height:26px; } .form-checkbox.small::after { width:24px; } .form-checkbox.small > label { margin-left:6px; } .form-checkbox.checkbox-only > label { display:none; } .form-checkbox.unchecked-pale > label { opacity:0.4; } .form-checkbox.unchecked-pale.checked > label { opacity:1.0; } .form-checkbox.unchecked-pale.disabled.checked > label { opacity:0.6; } .form-checkbox.checked-green.checked::before { border-color:#239765; } .form-checkbox.checked-green.checked::after { color:#239765; } .form-checkbox.checked-green.checked > label { color:#239765; } .form-checkbox.green::before { border-color:#239765; } .form-checkbox.green.checked::after { color:#239765; } .form-checkbox.error::before,.form-checkbox.error.checked::before { border-color:#d94d38; } .form-checkbox.error.checked::after,.form-checkbox.error > label,.form-checkbox.error.checked > label { color:#d94d38; } .form-checkbox.disabled.checked::after { opacity:0.5; } /* switch style */ .form-checkbox.switch::before { display:inline-block; vertical-align:top; position:relative; top:6px; width:52px; height:28px; border:none; background-color:#cccccc; border-radius:14px; transition:background-color 0.1s ease-out; } .form-checkbox.switch::after { content:""; display:inline-block; position:absolute; top:9px; left:4px; width:22px; height:22px; opacity:1.0; background-color:#ffffff; border-radius:50%; transform:scale(1.0); transition:left 0.1s ease-out; } .form-checkbox.switch.checked::before { background-color:#239765; border-color:#239765; } .form-checkbox.switch.checked::after { left:26px; } .form-checkbox.switch.error.checked::before { background-color:#d94d38; } .form-checkbox.switch.xlarge::before { top:12px; width:70px; height:36px; border-radius:18px; } .form-checkbox.switch.xlarge::after { top:15px; width:30px; height:30px; } .form-checkbox.switch.xlarge.checked::after { left:36px; } .form-checkbox.switch.large::before { top:9px; width:60px; height:32px; border-radius:16px; } .form-checkbox.switch.large::after { top:12px; width:26px; height:26px; } .form-checkbox.switch.large.checked::after { left:30px; } .form-checkbox.switch.regular::before { top:6px; width:52px; height:28px; border-radius:14px; } .form-checkbox.switch.regular::after { top:9px; width:22px; height:22px; } .form-checkbox.switch.regular.checked::after { left:26px; } .form-checkbox.switch.small::before { top:3px; width:44px; height:24px; border-radius:12px; } .form-checkbox.switch.small::after { top:6px; width:18px; height:18px; } .form-checkbox.switch.small.checked::after { left:22px; } /* label style */ .form-checkbox.label { border-color:#bbbbbb; cursor:pointer; } .form-checkbox.label::before { display:none; } .form-checkbox.label::after { display:none; } .form-checkbox.label > label { margin-left:0; color:#bbbbbb; position:relative; top:-1px; cursor:pointer; } .form-checkbox.label:hover { border-color:#999999; } .form-checkbox.label:hover > label { color:#999999; } .form-checkbox.label.checked { border-color:#239765; } .form-checkbox.label.checked > label { color:#239765; } .form-checkbox.label.checked:hover { opacity:0.85; } .form-checkbox.label.fill-green { border-color:#bbbbbb; background-color:transparent !important; } .form-checkbox.label.fill-green > label { color:#bbbbbb; } .form-checkbox.label.fill-green.checked { border-color:#239765; background-color:#239765 !important; } .form-checkbox.label.fill-green.checked > label { color:#ffffff; } .form-checkbox.label.disabled { opacity:1.0; background-color:#f3f3f3 !important; cursor:default; } .form-checkbox.label.disabled > label { color:#bbbbbb; cursor:default; } /**** .form-radio ****/ .form-radio {} .form-radio::before { content:""; display:inline-block; vertical-align:top; position:relative; top:5px; width:30px; height:30px; border:1px solid #bbbbbb; border-radius:50%; background:#ffffff; } .form-radio:hover::before,.form-radio:active::before { border-color:#999999; } .form-radio::after { content:""; display:inline-block; position:absolute; top:15px; left:10px; width:10px; height:10px; background:#000000; border-radius:50%; opacity:0; transform:scale(0.6); transition:opacity 0.1s ease-out,transform 0.1s ease-out; } .form-radio.checked::after { opacity:1.0; transform:scale(1.0); } .form-radio > label { margin-left:8px; } .form-radio.xlarge::before { top:11px; width:38px; height:38px; } .form-radio.xlarge::after { top:23px; left:12px; width:14px; height:14px; } .form-radio.xlarge > label { margin-left:12px; } .form-radio.large::before { top:8px; width:34px; height:34px; } .form-radio.large::after { top:19px; left:11px; width:12px; height:12px; } .form-radio.large > label { margin-left:10px; } .form-radio.regular::before { top:5px; width:30px; height:30px; } .form-radio.regular::after { top:15px; left:10px; width:10px; height:10px; } .form-radio.regular > label { margin-left:8px; } .form-radio.small::before { top:2px; width:26px; height:26px; } .form-radio.small::after { top:11px; left:9px; width:8px; height:8px; } .form-radio.small > label { margin-left:6px; } .form-radio.unchecked-pale > label { opacity:0.6; } .form-radio.unchecked-pale.checked > label { opacity:1.0; } .form-radio.unchecked-pale.disabled.checked > label { opacity:0.6; } .form-radio.checked-green.checked::before { border-color:#239765; } .form-radio.checked-green.checked::after { background-color:#239765; } .form-radio.checked-green.checked > label { color:#239765; } .form-radio.green::before { border-color:#239765; } .form-radio.green.checked::after { background-color:#239765; } .form-radio.error::before,.form-radio.error.checked::before { border-color:#d94d38; } .form-radio.error.checked::after { background-color:#d94d38; } .form-radio.error > label,.form-radio.error.checked > label { color:#d94d38; } .form-radio.disabled.checked::after { opacity:0.5; } /**** .form-select ****/ .form-select { cursor:pointer; border:1px solid #bbbbbb; background-color:#ffffff; } .form-select.icon > label { font-family:"icon"; } .form-select > label { display:block; padding:0 40px 0 8px; line-height:38px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; } .form-select > label.placeholder { color:inherit; opacity:0.4; } .form-select > a.carret { outline:none; position:absolute; top:-1px; right:0; } .form-select > a.carret::after { content:"\e921"; font-family:"icon"; display:inline-block; width:40px; font-size:24px; text-align:center; vertical-align:middle; color:#444444; opacity:0.5 } .form-select > div { display:none; position:absolute; top:-6px; left:-6px; border-radius:6px; z-index:100; max-height:220px; overflow-x:hidden; overflow-y:auto; background:#ffffff; box-shadow:3px 3px 0 0 rgba(0,0,0,0.2); border:1px solid #cccccc; } .form-select > div > button { display:block; width:100%; padding:0 8px 0 8px; line-height:38px; text-align:left; white-space:nowrap; cursor:pointer; color:#444444; } .form-select > div > button + button, .form-select > div > label + button, .form-select > div > button + label { border-top:1px solid #cccccc; } .form-select > div > button:hover { background-color:#f9f9f9; } .form-select > div > button.selected { background-color:#f3f3f3; } .form-select > div > button:active { color:inherit; } .form-select > div > button.disabled { background-color:#f3f3f3; color:#999999; } /*.form-select > div > label { display:block; background-color:#f9f9f9; padding:12px 8px 12px 8px; font-size:12px; color:#aaaaaa; font-weight:bold; white-space:nowrap; }*/ .form-select > div > label { display:block; background-color:#ffffff; padding:4px 8px 4px 8px; font-size:14px; color:#aaaaaa; white-space:nowrap; } /*.form-select > div > button + label { padding-top:12px; }*/ .form-select:hover,.form-select:active { border-color:#999999; } .form-select:hover > a.carret::after,.form-select:active > a.carret::after { opacity:0.75; } .form-select.green { border-color:#239765; } .form-select.green > a.carret::after { color:#239765; } .form-select.error { border-color:#d94d38; } .form-select.error > a.carret::after { color:#d94d38; } .form-select.selected-lightgreen > div > button:hover, .form-select.selected-lightgreen > div > button.selected { background-color:#eef5f4; } .form-select.disabled { cursor:default; } .form-select.disabled > label { cursor:default; } .form-select.disabled > a.carret { cursor:default; } .form-select.xlarge > div > button { padding:0 16px 0 16px; line-height:58px; } .form-select.xlarge > label { padding-left:16px; line-height:58px; } .form-select.xlarge.round > label { padding-left:20px; } .form-select.large > div > button { padding:0 12px 0 12px; line-height:48px; } .form-select.large > label { padding-left:12px; line-height:48px; } .form-select.large.round > label { padding-left:16px; } .form-select.regular > div > button { padding:0 8px 0 8px; line-height:38px; } .form-select.regular > label { padding-left:8px; } .form-select.regular.round > label { padding-left:12px; } .form-select.small > div > button { padding:0 6px 0 6px; line-height:28px; } .form-select.small > label { padding-left:6px; line-height:28px; } .form-select.small.round > label { padding-left:10px; } .form-select.small > a.carret::after { width:30px; font-size:20px; } .form-select.bg-transparent { background:transparent; } /* text face */ .form-select.form-select-face-text { border:none; line-height:32px; } .form-select.form-select-face-text > label { display:block; padding:0 28px 0 0; line-height:32px; } .form-select.form-select-face-text > a.carret { display:inline-block; top:5px; line-height:18px; width:21px; text-align:center; border:1px solid #bbbbbb; border-radius:4px; } .form-select.form-select-face-text > a.carret::after { content:"\e928"; width:auto; font-size:12px; opacity:1.0; color:#666666; position:relative; top:-1px; } .form-select.form-select-face-text > a.carret:hover { border-color:#239765; } .form-select.form-select-face-text > a.carret:hover::after { color:#239765; } /* carret-only */ .form-select.carret-only { border:none; } .form-select.carret-only > label { display:none; } .form-select.carret-only > a.carret { display:inline-block; position:relative; top:-1px; line-height:18px; width:21px; text-align:center; border:1px solid #bbbbbb; border-radius:4px; } .form-select.carret-only > a.carret::after { content:"\e928"; width:auto; font-size:12px; opacity:1.0; color:#666666; position:relative; top:-1px; } .form-select.carret-only > a.carret:hover { border-color:#239765; } .form-select.carret-only > a.carret:hover::after { color:#239765; } /**** .form-image-uploader ****/ .form-image-uploader { position:relative; width:72px; height:72px; border:1px solid #e1e1e1; background:#f9f9f9; } .form-image-uploader > img { width:100%; } .form-image-uploader.size-XL { width:152px; height:152px; } .form-image-uploader.size-L { width:102px; height:102px; } .form-image-uploader.size-M { width:72px; height:72px; } .form-image-uploader.size-S { width:50px; height:50px; } .form-image-uploader.size-XS { width:30px; height:30px; } .form-image-uploader.size-XXS { width:24px; height:24px; } .form-image-uploader.size-free { width:auto; height:auto; } .form-image-uploader > .mask { display:none; position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; background:rgba(200,200,200,0.5); cursor:pointer; } .form-image-uploader > .mask > .btn-clear { position:absolute; top:-8px; right:-8px; cursor:pointer; width:24px; height:24px; line-height:24px; border-radius:50%; background:#239765; color:#ffffff; text-align:center; vertical-align:middle; } .form-image-uploader > .mask > .btn-clear > i { position:relative; top:-2px; } .form-image-uploader:hover > .mask { display:block; } .form-image-uploader:hover > .mask.processing { display:none; } .form-image-uploader > .loading-wrapper { position:absolute; top:-1px; left:-1px; z-index:2; background:rgba(200,200,200,0.5); } .form-image-uploader > .loading-wrapper > .loading { width:30px; height:30px; font-size:30px; margin:21px; } .form-image-uploader.size-XL > .loading-wrapper > .loading { width:72px; height:72px; font-size:72px; margin:40px; } .form-image-uploader.size-L > .loading-wrapper > .loading { width:50px; height:50px; font-size:50px; margin:26px; } .form-image-uploader.size-M > .loading-wrapper > .loading { width:30px; height:30px; font-size:30px; margin:21px; } .form-image-uploader.size-S > .loading-wrapper > .loading { width:24px; height:24px;font-size:24px; margin:13px; } .form-image-uploader.size-XS > .loading-wrapper > .loading { width:20px; height:20px;font-size:20px; margin:5px; } .form-image-uploader.round,.form-image-uploader.round > img,.form-image-uploader.round > .mask,.form-image-uploader.round > .loading-wrapper { border-radius:50%; } .form-image-uploader.round > .mask > .btn-clear { top:-4px; right:-4px; } .form-image-uploader.round.size-XL > .mask > .btn-clear { top:8px; right:8px; } .form-image-uploader.round.size-L > .mask > .btn-clear { top:0; right:0; } .form-image-uploader.round.size-M > .mask > .btn-clear { top:-4px; right:-4px; } .form-image-uploader.round.size-S > .mask > .btn-clear { top:-6px; right:-6px; } .form-image-uploader.round.size-XS > .mask > .btn-clear { top:-8px; right:-8px; } .form-image-uploader.disabled { cursor:default; } .form-image-uploader.disabled:hover > .mask { display:none; } .form-image-uploader.error { border-color:#ee0000; } /**** .form-date ****/ .form-date { border:1px solid #bbbbbb; padding:0 8px 0 8px; } .form-date:hover,.form-text:focus { border-color:#999999; } .form-date.round { padding:0 12px 0 12px; } .form-date.xlarge { padding:0 16px 0 16px; } .form-date.xlarge.round { padding:0 20px 0 20px; } .form-date.large { padding:0 12px 0 12px; } .form-date.large.round { padding:0 16px 0 16px; } .form-date.regular { padding:0 8px 0 8px; } .form-date.regular.round { padding:0 12px 0 12px; } .form-date.small { padding:0 6px 0 6px; } .form-date.small.round { padding:0 10px 0 10px; } /* Zebra_DatePicker */ .Zebra_DatePicker { background:#ffffff; border:1px solid #cccccc; border-radius:4px; box-shadow:3px 3px 0 0 rgba(0,0,0,0.2); color:#444444; font-size:14px; padding:5px; position:absolute; display:table; z-index:200; } .Zebra_DatePicker *,.Zebra_DatePicker::after,.Zebra_DatePicker::before { box-sizing:content-box!important; } .Zebra_DatePicker * { padding:0; } .Zebra_DatePicker table { border-collapse:collapse; border-radius:4px; border-spacing:0; width:100%; } .Zebra_DatePicker td,.Zebra_DatePicker th { border-radius:4px; padding:5px; cursor:pointer; text-align:center; min-width:25px; width:25px; } .Zebra_DatePicker .dp_body .dp_not_in_month { color:#666666; } .Zebra_DatePicker .dp_body .dp_time_controls_condensed td { width:25%; } .Zebra_DatePicker .dp_body .dp_current { background-color:#eef5f4; } .Zebra_DatePicker .dp_body .dp_selected { background-color:#239765; color:#ffffff; } .Zebra_DatePicker .dp_body .dp_disabled { color: #bbbbbb; cursor:text; } .Zebra_DatePicker .dp_body .dp_hover { background-color:#eeeeee; } .Zebra_DatePicker .dp_body .dp_selected.dp_hover { background-color:#239765; color:#ffffff; } .Zebra_DatePicker .dp_body .dp_hover.dp_time_control { background-color:#eeeeee; } .Zebra_DatePicker .dp_monthpicker td, .Zebra_DatePicker .dp_timepicker td, .Zebra_DatePicker .dp_yearpicker td { width:33.3333%; text-align:center; vertical-align:middle; } .Zebra_DatePicker .dp_timepicker .dp_disabled { border:none; color:#444444; font-size:26px; } .Zebra_DatePicker .dp_time_separator div { position:relative; } .Zebra_DatePicker .dp_time_separator div:after { content:":"; color:#444444; font-size:20px; left:100%; margin-left:2px; margin-top:-16px; position:absolute; top:50%; z-index:1; } .Zebra_DatePicker .dp_header { margin-bottom:5px; } @supports (-ms-ime-align:auto) { .Zebra_DatePicker .dp_header { /*font-family: 'Segoe UI Symbol',Tahoma,Arial,Helvetica,sans-serif*/ } } .Zebra_DatePicker .dp_footer { margin-top:5px; } .Zebra_DatePicker .dp_footer .dp_icon { width:50%; } .Zebra_DatePicker .dp_actions td { border-radius:4px; } .Zebra_DatePicker .dp_actions .dp_caption { font-weight:bold; width:100%; } .Zebra_DatePicker .dp_actions .dp_next,.Zebra_DatePicker .dp_actions .dp_previous { *padding: 0 10px; } .Zebra_DatePicker .dp_actions .dp_hover { background-color:#eeeeee; } .Zebra_DatePicker .dp_footer.dp_actions td { background-color:#f6f7f7; } .Zebra_DatePicker .dp_footer.dp_actions td.dp_hover { background-color:#eeeeee; } .Zebra_DatePicker .dp_footer.dp_actions td.dp_clear { text-indent:-9999px; position:relative; } .Zebra_DatePicker .dp_footer.dp_actions td.dp_clear::after { content:"\e98e"; font-family:"icon"; display:inline-block; position:absolute; top:4px; left:50%; font-size:16px; text-indent:-8px; color:#666666; } .Zebra_DatePicker .dp_daypicker th { cursor:text; font-weight:normal; } .Zebra_DatePicker.dp_hidden { display:none; } .Zebra_DatePicker .dp_icon { height:16px; position:relative; text-indent:-9999px; *text-indent:0; } .Zebra_DatePicker .dp_icon.dp_confirm::after, .Zebra_DatePicker .dp_icon.dp_view_toggler::after, .Zebra_DatePicker .dp_icon.dp_view_toggler.dp_calendar::after { font-family:"icon"; display:inline-block; position:absolute; top:4px; left:50%; font-size:16px; text-indent:-8px; color:#666666; } .Zebra_DatePicker .dp_icon.dp_confirm::after { content:"\ed15"; } .Zebra_DatePicker .dp_icon.dp_view_toggler::after { content:"\eb81"; color:#777777; } .Zebra_DatePicker .dp_icon.dp_view_toggler.dp_calendar::after { content:"\e97a"; } button.Zebra_DatePicker_Icon { border:none; cursor:pointer; display:block; height:16px; line-height:0; padding:0; position:absolute; text-indent:-9000px; width:16px; text-align:center; vertical-align:middle; } button.Zebra_DatePicker_Icon::after { content:"\e97a"; font-family:"icon"; display:inline-block; position:absolute; top:0; left:0; font-size:14px; line-height:16px; text-indent:0; color:#bbbbbb; } button.Zebra_DatePicker_Icon.Zebra_DatePicker_Icon_Disabled { cursor:default; } button.Zebra_DatePicker_Icon.Zebra_DatePicker_Icon_Disabled::after { opacity:0.75; } .Zebra_DatePicker_Icon_Wrapper:hover button.Zebra_DatePicker_Icon::after { color:#999999; } .Zebra_DatePicker_Icon_Wrapper:hover .form-date { border-color:#999999; } .form-date.disabled { cursor:default; } .form-date.error { border-color:#ee0000 !important; } .form-date.error + button.Zebra_DatePicker_Icon::after { color:#ee0000; opacity:0.75; } /**** (combination) .form-with-icon ****/ .form-with-icon > span { position:absolute; top:0; left:10px; line-height:40px; opacity: 0.5; z-index:1; } .form-with-icon > span > i { position:relative; top:-1px; } .form-with-icon > span + .form-text { padding-left:30px; } .form-with-icon.right-side > .form-text { padding-right:30px; } .form-with-icon.right-side > span { left:auto; right:10px; opacity: 0.75; } /*======== Fields ========*/ dl.field { display:table; width:100%; position:relative; } dl.field > dt { display:table-cell; text-align:right; vertical-align:top; padding:24px 20px 20px 10px; width:220px; background:#eef5f4; color:#668877; } dl.field > dt.vm { padding-top:20px; } dl.field > dd { display:table-cell; text-align:left; vertical-align:top; padding:20px; } dl.field > dd p.warning { display:none; margin-top:10px; color:#d94d38; } dl.field + dl.field { margin-top:1px; } dl.field > dt > span.required { display:inline-block; font-size:12px; line-height:18px; height:18px; padding:0 8px 0 8px; margin-left:4px; text-align:left; vertical-align:middle; color:#ffffff; background:#80bb99; border-radius:8px; position:relative; top:-2px; } dl.field > dt > span.not-required { display:inline-block; font-size:12px; line-height:18px; height:18px; padding:0 8px 0 8px; margin-left:4px; text-align:left; vertical-align:middle; color:#779988; background:#cce4d6; border-radius:8px; position:relative; top:-2px; } dl.field > dd > dl.inner-with-button { display:flex; flex-wrap:nowrap; justify-content:space-between; align-items:center; } dl.field > dd > dl.inner-with-button > dt { vertical-align:middle; padding-right:10px; } dl.field > dd > dl.inner-with-button > dd { vertical-align:middle; padding-left:10px; } /* simple face */ dl.field.simple {} dl.field.simple > dt { padding:0 30px 0 0; width:220px; background:transparent; color:inherit; } dl.field.simple > dd { padding:0; } div.flex-buttons { border-top:1px solid #e1e1e1; padding:30px 0 30px 0; background:#ffffff; } div.fixed-buttons { position:fixed; bottom:0; left:0; z-index:150; width:100%; border-top:1px solid #e1e1e1; padding:30px 0 30px 0; background:#ffffff; } div.sticky-buttons { position:sticky; bottom:0; left:0; z-index:150; width:100%; border-top:1px solid #e1e1e1; padding:30px 0 30px 0; background:#ffffff; } div.flex-buttons > ul, div.fixed-buttons > ul, div.sticky-buttons > ul { width:100%; display:flex; justify-content:space-between; align-items:center; } .layout-form div.fixed-buttons > ul { max-width:840px; margin:0 auto 0 auto; } /*======== Dialogs ========*/ .overlay-dialog { /*display:flex;*/ display:none; justify-content:center; align-items:center; position:fixed; top:0; left:0; width:100%; height:100%; padding:0 20px 0 20px; background-color:rgba(150,150,150,0.7); z-index:3000; } .overlay-dialog.overlay-dialog-face-white { background-color:rgba(255,255,255,0.8); } .overlay-dialog.overlay-dialog-face-gray { background-color:rgba(150,150,150,0.7); } .overlay-dialog.overlay-dialog-face-black { background-color:rgba(0,0,0,0.5); } /* dialog */ .dialog { max-height:90%; background:#ffffff; border:1px solid #cccccc; border-radius:10px; box-shadow:3px 3px 0 0 rgba(0,0,0,0.1); position:relative; } .dialog > .content { height:100%; padding:0 0 70px 0; } .dialog > .content > .inner { height:100%; padding:25px; overflow-y:scroll; -webkit-overflow-scrolling:touch; } .dialog > .footer { display:flex; justify-content:center; align-items:center; width:100%; height:70px; background:#f6f7f7; border-radius:0 0 10px 10px; position:absolute; bottom:0; left:0; text-align:center; border-top:1px solid #e1e1e1; } .dialog.image-viewer {} .dialog.image-viewer > .content { height:auto; padding:0; } .dialog.image-viewer > .content img { border-radius:10px 10px 0 0; } .dialog.image-viewer > .footer { position:relative; } /* action sheet */ .action-sheet { width:600px; position:relative; } .action-sheet > .content { display:block; max-height:90%; text-align:center; background:#ffffff; border:1px solid #cccccc; border-radius:10px; box-shadow:3px 3px 0 0 rgba(0,0,0,0.1); position:relative; } .action-sheet > .content > .inner { padding:60px 40px 40px 40px; } .action-sheet > .content > .inner > div { display:inline-block; text-align:left; margin-bottom:60px; } .action-sheet > .content > .inner > div > strong { display:block; font-size:18px; font-weight:normal; text-align:center; vertical-align:middle; } .action-sheet > .content > .inner > div > p { display:block; text-align:left; margin-top:20px; } .action-sheet > .content > .inner > div > p + p { margin-top:3px; } .action-sheet > .content > .inner > ul { display:block; } .action-sheet > .content > .inner > ul > li { display:block; } .action-sheet > .content > .inner > ul > li > a.btn { min-width:250px; } .action-sheet > .content > .inner > ul > li + li { margin-top:15px; } .action-sheet > .content > .inner > ul > li.cancel { font-size:14px; margin-top:20px; } /* alert */ .alert { width:600px; position:relative; } .alert > .content { display:block; max-height:90%; text-align:center; background:#ffffff; border:1px solid #cccccc; border-radius:10px; box-shadow:3px 3px 0 0 rgba(0,0,0,0.1); position:relative; } .alert > .content > .inner { padding:40px; } .alert > .content > .inner > div { display:inline-block; text-align:left; margin-bottom:40px; } .alert > .content > .inner > div > strong { display:block; font-weight:normal; vertical-align:middle; } .alert > .content > .inner > div > p { display:block; text-align:left; margin-top:20px; } .alert > .content > .inner > ul { display:block; } .alert > .content > .inner > ul > li { display:block; } .alert > .content > .inner > ul > li > a.btn { min-width:200px; } .alert > .content > .inner > ul > li + li { margin-top:15px; } .alert > .content > .inner > ul > li.cancel { font-size:14px; margin-top:20px; } /* animation */ .dialog-animation-fade-in { animation-name:keyframes-dialog-animation-fade-in; animation-duration:0.8s !important; } .dialog-animation-fade-out {} .dialog-animation-up-in { animation-name:keyframes-dialog-animation-up-in; } .dialog-animation-up-out { animation-name:keyframes-dialog-animation-up-out; } .dialog-animation-down-in { animation-name:keyframes-dialog-animation-down-in; } .dialog-animation-down-out { animation-name:keyframes-dialog-animation-down-out; } .dialog-animation-forward-in { animation-name:keyframes-dialog-animation-forward-in; } .dialog-animation-forward-out { animation-name:keyframes-dialog-animation-forward-out; } .dialog-animation-backward-in { animation-name:keyframes-dialog-animation-backward-in; } .dialog-animation-backward-out { animation-name:keyframes-dialog-animation-backward-out; } .dialog-animation-start { animation-duration:0.4s; animation-direction:normal; animation-timing-function:ease; animation-delay:0s; animation-iteration-count:1; animation-fill-mode:both; animation-play-state:running; } @keyframes keyframes-dialog-animation-fade-in { 0% { opacity:0; } 100% { opacity:1; } } @keyframes keyframes-dialog-animation-up-in { 0% { opacity:0; transform:translateY(50px); } 100% { opacity:1; transform:translateY(0); } } @keyframes keyframes-dialog-animation-up-out { 0% { opacity:1; transform:translateY(0); } 100% { opacity:0.5; transform:translateY(50px); } } @keyframes keyframes-dialog-animation-down-in { 0% { opacity:0; transform:translateY(-50px); } 100% { opacity:1; transform:translateY(0); } } @keyframes keyframes-dialog-animation-down-out { 0% { opacity:1; transform:translateY(0); } 100% { opacity:0.5; transform:translateY(-50px); } } @keyframes keyframes-dialog-animation-forward-in { 0% { opacity:0; transform:translateX(50px); } 100% { opacity:1; transform:translateX(0); } } @keyframes keyframes-dialog-animation-forward-out { 0% { opacity:1; transform:translateX(0); } 100% { opacity:0.5; transform:translateX(-50px); } } @keyframes keyframes-dialog-animation-backword-in { 0% { opacity:0; transform:translateX(-50px); } 100% { opacity:1; transform:translateX(0); } } @keyframes keyframes-dialog-animation-backword-out { 0% { opacity:1; transform:translateX(0); } 100% { opacity:0.5; transform:translateX(50px); } } /*======== Animations ========*/ .delay0s { animation-delay: 0s !important; } .delay500ms { animation-delay: 0.5s !important; } .delay1s { animation-delay: 1.0s !important; } .animate-heading-fade-in { animation:keyframes-heading-fade-in 2.5s ease 0s 1 normal both running; } .animate-slide-down { animation:keyframes-slide-down 0.8s ease 0s 1 normal both running; } .animate-blink { animation:keyframes-blink 0.6s linear 0s infinite alternate both running; } @keyframes keyframes-heading-fade-in { 0% { position:relative; top:-10px; opacity:0; } 30% { position:relative; top:0; } 100% { opacity:1.0; } } @keyframes keyframes-slide-down { 0% { position:relative; top:-10px; opacity:0; } 30% { opacity:1.0; } 100% { position:relative; top:0; } } @keyframes keyframes-rolling { 0% { transform:rotate(0deg); } 100% { transform:rotate(360deg); } } @keyframes keyframes-blink { 0% { opacity:0.5; } 100% { opacity:1.0; } } /*======== Page transitions ========*/ .body { opacity:0; } .body.page-transition-none,.body.page-transition-none-in { opacity:1.0; } .body.page-transition-fade-in { opacity:1.0; animation-name:keyframes-page-transition-fade-in; animation-duration:1.2s !important; } .body.page-transition-fade-out { opacity:1.0; animation-name:keyframes-page-transition-fade-out; } .body.page-transition-down-in { opacity:1.0; animation-name:keyframes-page-transition-down-in; } .body.page-transition-down-out { opacity:1.0; animation-name:keyframes-page-transition-down-out; } .body.page-transition-up-in { opacity:1.0; animation-name:keyframes-page-transition-up-in; } .body.page-transition-up-out { opacity:1.0; animation-name:keyframes-page-transition-up-out; } .body.page-transition-forward-in { opacity:1.0; animation-name:keyframes-page-transition-forward-in; } .body.page-transition-forward-out { opacity:1.0; animation-name:keyframes-page-transition-forward-out; } .body.page-transition-backward-in { opacity:1.0; animation-name:keyframes-page-transition-backward-in; } .body.page-transition-backward-out { opacity:1.0; animation-name:keyframes-page-transition-backward-out; } .body.page-transition-reload-in { opacity:1.0; animation-name:keyframes-page-transition-reload-in; animation-duration:1.2s !important; } .body.page-transition-reload-out { opacity:1.0; animation-name:keyframes-page-transition-reload-out; } .body.page-transition-jump-in { opacity:1.0; animation-name:keyframes-page-transition-jump-in; animation-duration:1.2s !important; } .body.page-transition-jump-out { opacity:1.0; animation-name:keyframes-page-transition-jump-out; } .body.page-transition-start { animation-duration:0.4s; animation-direction:normal; animation-timing-function:ease; animation-delay:0s; animation-iteration-count:1; animation-fill-mode:both; animation-play-state:running; } @keyframes keyframes-page-transition-fade-in { 0% { opacity:0; } 100% { opacity:1; } } @keyframes keyframes-page-transition-fade-out { 0% { opacity:1; } 100% { opacity:0; } } @keyframes keyframes-page-transition-down-in { 0% { opacity:0; transform:translateY(-50px); } 100% { opacity:1; transform:translateY(0); } } @keyframes keyframes-page-transition-down-out { 0% { opacity:1; transform:translateY(0); } 100% { opacity:0; transform:translateY(50px); } } @keyframes keyframes-page-transition-up-in { 0% { opacity:0; transform:translateY(50px); } 100% { opacity:1; transform:translateY(0); } } @keyframes keyframes-page-transition-up-out { 0% { opacity:1; transform:translateY(0); } 100% { opacity:0; transform:translateY(-50px); } } @keyframes keyframes-page-transition-forward-in { 0% { opacity:0; transform:translateX(50px); } 100% { opacity:1; transform:translateX(0); } } @keyframes keyframes-page-transition-forward-out { 0% { opacity:1; transform:translateX(0); } 100% { opacity:0; transform:translateX(-50px); } } @keyframes keyframes-page-transition-backward-in { 0% { opacity:0; transform:translateX(-50px); } 100% { opacity:1; transform:translateX(0); } } @keyframes keyframes-page-transition-backward-out { 0% { opacity:1; transform:translateX(0); } 100% { opacity:0; transform:translateX(50px); } } @keyframes keyframes-page-transition-reload-in { 0% { opacity:0; } 100% { opacity:1; } } @keyframes keyframes-page-transition-reload-out { 0% { opacity:1; } 100% { opacity:0.75; } } @keyframes keyframes-page-transition-jump-in { 0% { opacity:0; } 100% { opacity:1; } } @keyframes keyframes-page-transition-jump-out { 0% { opacity:1; } 100% { opacity:0.75; } } /*======== Display Size ========*/ .visible-when-display-size-is-pc { display:inline !important; } .visible-when-display-size-is-mobile { display:none !important; } .visible-when-display-size-is-tablet { display:none !important; } .visible-when-display-size-is-not-mobile { display:inline !important; } .block-when-display-size-is-pc { display:block !important; } .block-when-display-size-is-mobile { display:none !important; } .block-when-display-size-is-tablet { display:none !important; } .block-when-display-size-is-not-mobile { display:block !important; } .block-when-display-size-is-not-pc { display:none !important; } .inline-block-when-display-size-is-pc { display:inline-block !important; } .inline-block-when-display-size-is-mobile { display:none !important; } .inline-block-when-display-size-is-tablet { display:none !important; } .inline-block-when-display-size-is-not-mobile { display:inline-block !important; } .table-cell-when-display-size-is-pc { display:table-cell !important; } .table-cell-when-display-size-is-mobile { display:none !important; } .table-cell-when-display-size-is-tablet { display:none !important; } .table-cell-when-display-size-is-not-mobile { display:table-cell !important; } .flex-when-display-size-is-pc { display:flex !important; } .flex-when-display-size-is-mobile { display:none !important; } .flex-when-display-size-is-tablet { display:none !important; } .flex-when-display-size-is-not-mobile { display:flex !important; } /*======== reCATCHA ========*/ .grecaptcha-badge { z-index:10000; } /*======================================== Tablet ========================================*/ @media screen and (max-width:1023px) { .visible-when-display-size-is-pc { display:none !important; } .visible-when-display-size-is-mobile { display:none !important; } .visible-when-display-size-is-tablet { display:inline !important; } .visible-when-display-size-is-not-mobile { display:inline !important; } .block-when-display-size-is-pc { display:none !important; } .block-when-display-size-is-mobile { display:none !important; } .block-when-display-size-is-tablet { display:block !important; } .block-when-display-size-is-not-mobile { display:block !important; } .block-when-display-size-is-not-pc { display:block !important; } .inline-block-when-display-size-is-pc { display:none !important; } .inline-block-when-display-size-is-mobile { display:none !important; } .inline-block-when-display-size-is-tablet { display:inline-block !important; } .inline-block-when-display-size-is-not-mobile { display:inline-block !important; } .table-cell-when-display-size-is-pc { display:none !important; } .table-cell-when-display-size-is-mobile { display:none !important; } .table-cell-when-display-size-is-tablet { display:table-cell !important; } .table-cell-when-display-size-is-not-mobile { display:table-cell !important; } .flex-when-display-size-is-pc { display:none !important; } .flex-when-display-size-is-mobile { display:none !important; } .flex-when-display-size-is-tablet { display:flex !important; } .flex-when-display-size-is-not-mobile { display:flex !important; } /* grid system */ .container { min-width:auto; max-width:auto; } .container.no-margin,.container.cover { min-width:auto; max-width:auto; padding:0; } .container.natural { padding-top:60px; padding-bottom:130px; } .layout-menu-left { display:block; column-gap:0; } .layout-menu-left.s20, .layout-menu-left.s30, .layout-menu-left.s40 { column-gap:0; } .layout-menu-left > .menu { width:auto; } .layout-menu-left > .main + .menu,.layout-menu-left > .menu + .main { margin-top:20px; } .layout-menu-right { display:block; column-gap:0; } .layout-menu-right.s20, .layout-menu-right.s30, .layout-menu-right.s40 { column-gap:0; } .layout-menu-right > .menu { width:auto; } .layout-menu-right > .main + .menu,.layout-menu-right > .menu + .main { margin-top:20px; } .layout-two-columns { column-gap:20px; } .layout-three-columns { column-gap:20px; } /* header */ header > div > div { min-width:auto; max-width:auto; } .ribbon > div { min-width:auto; max-width:auto; } /* footer */ footer > div { min-width:auto; max-width:auto; padding-top:20px; } footer > div > .menu { display:block; padding:0 0 30px 0; } footer > div > .menu > div { display:block; margin:0 0 20px 0; padding-left:10px; } footer > div > .menu > div > .heading { margin-bottom:5px; } footer > div > .menu > div > ul > li { display:inline-block; margin-right:15px; } footer > div > .menu > div > ul > li + li { margin-top:2px; } footer > div > .bottom > .copyright { padding-left:5px; } footer > div > a.to-top { width:40px; height:40px; border-radius:20px; top:-20px; right:20px; } /* .navigation */ .navigation > .menu > .inner { min-width:auto; max-width:auto; } .navigation > .menu > .inner > .shortcuts > ul > li { margin:0 10px 0 10px; padding:5px 0 20px 0; } .navigation > .menu > .inner > .shortcuts > ul > li a.button { width:120px; height:120px; padding-top:20px; } .navigation > .menu > .inner > .shortcuts > ul > li a.button > label { font-size:14px; } .navigation > .menu > .inner > .menu { display:block; padding:20px 0 0 0; } .navigation > .menu > .inner > .menu > div { display:block; margin-bottom:20px; } .navigation > .menu > .inner > .menu > div > .heading { margin-bottom:5px; } .navigation > .menu > .inner > .menu > div > ul > li { display:inline-block; margin-right:15px; } .navigation > .menu > .inner > .menu > div > ul > li + li { margin-top:2px; } .navigation > .menu > .inner > .menu > div > ul > li.indent { margin-top:2px !important; line-height:inherit; } .navigation > .menu > .inner > .menu > div > ul > li.indent a { font-size:14px; color:#aaaaaa; } .navigation > .menu > .inner > .media { margin-top:30px; } /* fields */ .layout-form div.fixed-buttons { padding:25px 15px 25px 15px; } /* force styles */ .tablet-xxlarge { font-size:28px !important; } .tablet-xlarge { font-size:24px !important; } .tablet-large { font-size:20px !important; } .tablet-regular { font-size:16px !important; } .tablet-small { font-size:14px !important; } .tablet-xsmall { font-size:12px !important; } .tablet-xxsmall { font-size:10px !important; } .tablet-block { display:block !important; } .tablet-inline { display:inline !important; } .tablet-inline-block { display:inline-block !important; } .tablet-hide,.tablet-hidden { display:none !important; } .tablet-table { display:table !important; } .tablet-table-cell { display:table-cell !important; } .tablet-table-cell.min { width:1% !important; } .tablet-tl { text-align:left !important; } .tablet-tr { text-align:right !important; } .tablet-tc { text-align:center !important; } .tablet-vt { vertical-align:top !important; } .tablet-vb { vertical-align:bottom !important; } .tablet-vm,.tablet-vc { vertical-align:middle !important; } .tablet-vbase { vertical-align:baseline !important; } .tablet-fl { float:left !important; } .tablet-fr { float:right !important; } .tablet-nr { white-space:nowrap !important; } .tablet-wp { white-space:wrap !important; } .tablet-break-all { word-break:break-all; } .tablet-nr-force { white-space:nowrap !important; overflow:hidden !important; } .tablet-absolute { position:absolute !important; } .tablet-relative { position:relative !important; } .tablet-fixed { position:fixed !important; } .tablet-absolute-top-left { position:absolute !important; top:0 !important; left:0 !important; } .tablet-absolute-top-right { position:absolute !important; top:0 !important; right:0 !important; } .tablet-absolute-bottom-left { position:absolute !important; bottom:0 !important; left:0 !important; } .tablet-absolute-bottom-right { position:absolute !important; bottom:0 !important; right:0 !important; } .tablet-absolute-left-50p { position:absolute !important; left:50% !important; } .tablet-absolute-top-50p { position:absolute !important; top:50% !important; } .tablet-absolute-top-left-50p { position:absolute !important; left:50% !important; top:50% !important; } .tablet-fixed-top-left { position:fixed !important; top:0; left:0; } .tablet-fixed-top-right { position:fixed !important; top:0; right:0; } .tablet-fixed-bottom-left { position:fixed !important; bottom:0; left:0; } .tablet-fixed-bottom-right { position:fixed !important; bottom:0; right:0; } .tablet-top1px { position:relative !important; top:1px !important; } .tablet-top2px { position:relative !important; top:2px !important; } .tablet-top3px { position:relative !important; top:3px !important; } .tablet-top4px { position:relative !important; top:4px !important; } .tablet-top5px { position:relative !important; top:5px !important; } .tablet-top6px { position:relative !important; top:6px !important; } .tablet-top7px { position:relative !important; top:7px !important; } .tablet-top8px { position:relative !important; top:8px !important; } .tablet-top9px { position:relative !important; top:9px !important; } .tablet-top10px { position:relative !important; top:10px !important; } .tablet-top11px { position:relative !important; top:11px !important; } .tablet-top12px { position:relative !important; top:12px !important; } .tablet-top-1px { position:relative !important; top:-1px !important; } .tablet-top-2px { position:relative !important; top:-2px !important; } .tablet-top-3px { position:relative !important; top:-3px !important; } .tablet-top-4px { position:relative !important; top:-4px !important; } .tablet-top-5px { position:relative !important; top:-5px !important; } .tablet-top-6px { position:relative !important; top:-6px !important; } .tablet-top-7px { position:relative !important; top:-7px !important; } .tablet-top-8px { position:relative !important; top:-8px !important; } .tablet-top-9px { position:relative !important; top:-9px !important; } .tablet-top-10px { position:relative !important; top:-10px !important; } .tablet-top-11px { position:relative !important; top:-11px !important; } .tablet-top-12px { position:relative !important; top:-12px !important; } .tablet-left1px { position:relative !important; left:1px !important; } .tablet-left2px { position:relative !important; left:2px !important; } .tablet-left3px { position:relative !important; left:3px !important; } .tablet-left4px { position:relative !important; left:4px !important; } .tablet-left5px { position:relative !important; left:5px !important; } .tablet-left6px { position:relative !important; left:6px !important; } .tablet-left7px { position:relative !important; left:7px !important; } .tablet-left8px { position:relative !important; left:8px !important; } .tablet-left9px { position:relative !important; left:9px !important; } .tablet-left10px { position:relative !important; left:10px !important; } .tablet-left11px { position:relative !important; left:11px !important; } .tablet-left12px { position:relative !important; left:12px !important; } .tablet-left-1px { position:relative !important; left:-1px !important; } .tablet-left-2px { position:relative !important; left:-2px !important; } .tablet-left-3px { position:relative !important; left:-3px !important; } .tablet-left-3px { position:relative !important; left:-3px !important; } .tablet-left-4px { position:relative !important; left:-4px !important; } .tablet-left-5px { position:relative !important; left:-5px !important; } .tablet-left-6px { position:relative !important; left:-6px !important; } .tablet-left-7px { position:relative !important; left:-7px !important; } .tablet-left-8px { position:relative !important; left:-8px !important; } .tablet-left-9px { position:relative !important; left:-9px !important; } .tablet-left-10px { position:relative !important; left:-10px !important; } .tablet-left-11px { position:relative !important; left:-11px !important; } .tablet-left-12px { position:relative !important; left:-12px !important; } .tablet-z0 { z-index:0 !important; } .tablet-z1 { z-index:1 !important; } .tablet-overflow-hidden { overflow:hidden !important; } .tablet-wauto { width:auto !important; } .tablet-w1 { width:1px !important; } .tablet-w2 { width:2px !important; } .tablet-w3 { width:3px !important; } .tablet-w4 { width:4px !important; } .tablet-w5 { width:5px !important; } .tablet-w6 { width:6px !important; } .tablet-w7 { width:7px !important; } .tablet-w8 { width:8px !important; } .tablet-w9 { width:9px !important; } .tablet-w10 { width:10px !important; } .tablet-w12 { width:12px !important; } .tablet-w15 { width:15px !important; } .tablet-w16 { width:16px !important; } .tablet-w20 { width:20px !important; } .tablet-w24 { width:24px !important; } .tablet-w25 { width:25px !important; } .tablet-w30 { width:30px !important; } .tablet-w32 { width:32px !important; } .tablet-w36 { width:36px !important; } .tablet-w40 { width:40px !important; } .tablet-w48 { width:48px !important; } .tablet-w50 { width:50px !important; } .tablet-w60 { width:60px !important; } .tablet-w70 { width:70px !important; } .tablet-w80 { width:80px !important; } .tablet-w90 { width:90px !important; } .tablet-w100 { width:100px !important; } .tablet-w110 { width:110px !important; } .tablet-w120 { width:120px !important; } .tablet-w130 { width:130px !important; } .tablet-w140 { width:140px !important; } .tablet-w150 { width:150px !important; } .tablet-w160 { width:160px !important; } .tablet-w170 { width:170px !important; } .tablet-w180 { width:180px !important; } .tablet-w190 { width:190px !important; } .tablet-w200 { width:200px !important; } .tablet-w210 { width:210px !important; } .tablet-w220 { width:220px !important; } .tablet-w230 { width:230px !important; } .tablet-w240 { width:240px !important; } .tablet-w250 { width:250px !important; } .tablet-w260 { width:260px !important; } .tablet-w270 { width:270px !important; } .tablet-w280 { width:280px !important; } .tablet-w290 { width:290px !important; } .tablet-w300 { width:300px !important; } .tablet-w320 { width:320px !important; } .tablet-w350 { width:350px !important; } .tablet-w400 { width:400px !important; } .tablet-w450 { width:450px !important; } .tablet-w500 { width:500px !important; } .tablet-w600 { width:600px !important; } .tablet-w700 { width:700px !important; } .tablet-w800 { width:800px !important; } .tablet-w900 { width:900px !important; } .tablet-w1000 { width:1000px !important; } .tablet-w1p { width:1% !important; } .tablet-w10p { width:10% !important; } .tablet-w20p { width:20% !important; } .tablet-w25p { width:25% !important; } .tablet-w30p { width:30% !important; } .tablet-w33p { width:33% !important; } .tablet-w40p { width:40% !important; } .tablet-w45p { width:45% !important; } .tablet-w50p { width:50% !important; } .tablet-w60p { width:60% !important; } .tablet-w70p { width:70% !important; } .tablet-w80p { width:80% !important; } .tablet-w90p { width:90% !important; } .tablet-w100p { width:100% !important; } .tablet-minwauto { min-width:unset; } .tablet-minw10 { min-width:10px; } .tablet-minw20 { min-width:20px; } .tablet-minw30 { min-width:30px; } .tablet-minw40 { min-width:40px; } .tablet-minw50 { min-width:50px; } .tablet-minw60 { min-width:60px; } .tablet-minw70 { min-width:70px; } .tablet-minw80 { min-width:80px; } .tablet-minw90 { min-width:90px; } .tablet-minw100 { min-width:100px; } .tablet-minw150 { min-width:150px; } .tablet-minw200 { min-width:200px; } .tablet-minw250 { min-width:250px; } .tablet-minw300 { min-width:300px; } .tablet-minw400 { min-width:400px; } .tablet-maxwauto { max-width:unset; } .tablet-maxw10 { max-width:10px; } .tablet-maxw20 { max-width:20px; } .tablet-maxw30 { max-width:30px; } .tablet-maxw40 { max-width:40px; } .tablet-maxw50 { max-width:50px; } .tablet-maxw60 { max-width:60px; } .tablet-maxw70 { max-width:70px; } .tablet-maxw80 { max-width:80px; } .tablet-maxw90 { max-width:90px; } .tablet-maxw100 { max-width:100px; } .tablet-maxw150 { max-width:150px; } .tablet-maxw200 { max-width:200px; } .tablet-maxw250 { max-width:250px; } .tablet-maxw300 { max-width:300px; } .tablet-maxw400 { max-width:400px; } .tablet-hauto { height:auto !important; } .tablet-h1 { height:1px !important; } .tablet-h2 { height:2px !important; } .tablet-h3 { height:3px !important; } .tablet-h4 { height:4px !important; } .tablet-h5 { height:5px !important; } .tablet-h6 { height:6px !important; } .tablet-h7 { height:7px !important; } .tablet-h8 { height:8px !important; } .tablet-h9 { height:9px !important; } .tablet-h10 { height:10px !important; } .tablet-h12 { height:12px !important; } .tablet-h15 { height:15px !important; } .tablet-h16 { height:16px !important; } .tablet-h20 { height:20px !important; } .tablet-h24 { height:24px !important; } .tablet-h25 { height:25px !important; } .tablet-h30 { height:30px !important; } .tablet-h32 { height:32px !important; } .tablet-h36 { height:36px !important; } .tablet-h40 { height:40px !important; } .tablet-h48 { height:48px !important; } .tablet-h50 { height:50px !important; } .tablet-h60 { height:60px !important; } .tablet-h70 { height:70px !important; } .tablet-h80 { height:80px !important; } .tablet-h90 { height:90px !important; } .tablet-h100 { height:100px !important; } .tablet-h110 { height:110px !important; } .tablet-h120 { height:120px !important; } .tablet-h130 { height:130px !important; } .tablet-h140 { height:140px !important; } .tablet-h150 { height:150px !important; } .tablet-h160 { height:160px !important; } .tablet-h170 { height:170px !important; } .tablet-h180 { height:180px !important; } .tablet-h190 { height:190px !important; } .tablet-h200 { height:200px !important; } .tablet-h210 { height:210px !important; } .tablet-h220 { height:220px !important; } .tablet-h230 { height:230px !important; } .tablet-h240 { height:240px !important; } .tablet-h250 { height:250px !important; } .tablet-h260 { height:260px !important; } .tablet-h270 { height:270px !important; } .tablet-h280 { height:280px !important; } .tablet-h290 { height:290px !important; } .tablet-h300 { height:300px !important; } .tablet-h320 { height:320px !important; } .tablet-h350 { height:300px !important; } .tablet-h400 { height:400px !important; } .tablet-h450 { height:450px !important; } .tablet-h500 { height:500px !important; } .tablet-h600 { height:600px !important; } .tablet-h700 { height:700px !important; } .tablet-h800 { height:800px !important; } .tablet-h900 { height:900px !important; } .tablet-h1000 { height:1000px !important; } .tablet-h1p { height:1% !important; } .tablet-h33p { height:33% !important; } .tablet-h50p { height:50% !important; } .tablet-h100p { height:100% !important; } .tablet-minhauto { min-height:unset; } .tablet-minh50 { min-height:50px; } .tablet-minh70 { min-height:70px; } .tablet-minh100 { min-height:100px; } .tablet-minh150 { min-height:150px; } .tablet-minh200 { min-height:200px; } .tablet-maxhauto { max-height:unset; } .tablet-maxh50 { max-height:50px; } .tablet-maxh100 { max-height:100px; } .tablet-maxh150 { max-height:150px; } .tablet-maxh200 { max-height:200px; } .tablet-mauto { margin-left:auto !important; margin-right:auto !important; } .tablet-mrauto { margin-right:auto !important; } .tablet-mlauto { margin-left:auto !important; } .tablet-m0 { margin:0px !important; } .tablet-m1 { margin:1px !important; } .tablet-m2 { margin:2px !important; } .tablet-m3 { margin:3px !important; } .tablet-m4 { margin:4px !important; } .tablet-m5 { margin:5px !important; } .tablet-m6 { margin:6px !important; } .tablet-m7 { margin:7px !important; } .tablet-m8 { margin:8px !important; } .tablet-m9 { margin:9px !important; } .tablet-m10 { margin:10px !important; } .tablet-m12 { margin:12px !important; } .tablet-m15 { margin:15px !important; } .tablet-m16 { margin:16px !important; } .tablet-m20 { margin:20px !important; } .tablet-m24 { margin:24px !important; } .tablet-m25 { margin:25px !important; } .tablet-m30 { margin:30px !important; } .tablet-m40 { margin:40px !important; } .tablet-m50 { margin:50px !important; } .tablet-mb0 { margin-bottom:0px !important; } .tablet-mb1 { margin-bottom:1px !important; } .tablet-mb2 { margin-bottom:2px !important; } .tablet-mb3 { margin-bottom:3px !important; } .tablet-mb4 { margin-bottom:4px !important; } .tablet-mb5 { margin-bottom:5px !important; } .tablet-mb6 { margin-bottom:6px !important; } .tablet-mb7 { margin-bottom:7px !important; } .tablet-mb8 { margin-bottom:8px !important; } .tablet-mb9 { margin-bottom:9px !important; } .tablet-mb10 { margin-bottom:10px !important; } .tablet-mb12 { margin-bottom:12px !important; } .tablet-mb15 { margin-bottom:15px !important; } .tablet-mb16 { margin-bottom:16px !important; } .tablet-mb20 { margin-bottom:20px !important; } .tablet-mb24 { margin-bottom:24px !important; } .tablet-mb25 { margin-bottom:25px !important; } .tablet-mb30 { margin-bottom:30px !important; } .tablet-mb32 { margin-bottom:32px !important; } .tablet-mb40 { margin-bottom:40px !important; } .tablet-mb50 { margin-bottom:50px !important; } .tablet-mb60 { margin-bottom:60px !important; } .tablet-mb70 { margin-bottom:70px !important; } .tablet-mb80 { margin-bottom:80px !important; } .tablet-mb90 { margin-bottom:90px !important; } .tablet-mb100 { margin-bottom:100px !important; } .tablet-mb110 { margin-bottom:110px !important; } .tablet-mb120 { margin-bottom:120px !important; } .tablet-mb130 { margin-bottom:130px !important; } .tablet-mb140 { margin-bottom:140px !important; } .tablet-mb150 { margin-bottom:150px !important; } .tablet-mb160 { margin-bottom:160px !important; } .tablet-mb170 { margin-bottom:170px !important; } .tablet-mb180 { margin-bottom:180px !important; } .tablet-mb190 { margin-bottom:190px !important; } .tablet-mb200 { margin-bottom:200px !important; } .tablet-mb300 { margin-bottom:300px !important; } .tablet-mt0 { margin-top:0px !important; } .tablet-mt1 { margin-top:1px !important; } .tablet-mt2 { margin-top:2px !important; } .tablet-mt3 { margin-top:3px !important; } .tablet-mt4 { margin-top:4px !important; } .tablet-mt5 { margin-top:5px !important; } .tablet-mt6 { margin-top:6px !important; } .tablet-mt7 { margin-top:7px !important; } .tablet-mt8 { margin-top:8px !important; } .tablet-mt9 { margin-top:9px !important; } .tablet-mt10 { margin-top:10px !important; } .tablet-mt12 { margin-top:12px !important; } .tablet-mt15 { margin-top:15px !important; } .tablet-mt16 { margin-top:16px !important; } .tablet-mt20 { margin-top:20px !important; } .tablet-mt24 { margin-top:24px !important; } .tablet-mt25 { margin-top:25px !important; } .tablet-mt30 { margin-top:30px !important; } .tablet-mt32 { margin-top:32px !important; } .tablet-mt40 { margin-top:40px !important; } .tablet-mt50 { margin-top:50px !important; } .tablet-mt60 { margin-top:60px !important; } .tablet-mt70 { margin-top:70px !important; } .tablet-mt80 { margin-top:80px !important; } .tablet-mt90 { margin-top:90px !important; } .tablet-mt100 { margin-top:100px !important; } .tablet-mt110 { margin-top:110px !important; } .tablet-mt120 { margin-top:120px !important; } .tablet-mt130 { margin-top:130px !important; } .tablet-mt140 { margin-top:140px !important; } .tablet-mt150 { margin-top:150px !important; } .tablet-mt160 { margin-top:160px !important; } .tablet-mt170 { margin-top:170px !important; } .tablet-mt180 { margin-top:180px !important; } .tablet-mt190 { margin-top:190px !important; } .tablet-mt200 { margin-top:200px !important; } .tablet-mt300 { margin-top:300px !important; } .tablet-mt-1 { margin-top:-1px !important; } .tablet-mt-2 { margin-top:-2px !important; } .tablet-mt-3 { margin-top:-3px !important; } .tablet-mt-4 { margin-top:-4px !important; } .tablet-mt-5 { margin-top:-5px !important; } .tablet-mt-10 { margin-top:-10px !important; } .tablet-mt-20 { margin-top:-20px !important; } .tablet-mr0 { margin-right:0px !important; } .tablet-mr1 { margin-right:1px !important; } .tablet-mr2 { margin-right:2px !important; } .tablet-mr3 { margin-right:3px !important; } .tablet-mr4 { margin-right:4px !important; } .tablet-mr5 { margin-right:5px !important; } .tablet-mr6 { margin-right:6px !important; } .tablet-mr7 { margin-right:7px !important; } .tablet-mr8 { margin-right:8px !important; } .tablet-mr9 { margin-right:9px !important; } .tablet-mr10 { margin-right:10px !important; } .tablet-mr12 { margin-right:12px !important; } .tablet-mr15 { margin-right:15px !important; } .tablet-mr16 { margin-right:16px !important; } .tablet-mr20 { margin-right:20px !important; } .tablet-mr24 { margin-right:24px !important; } .tablet-mr25 { margin-right:25px !important; } .tablet-mr30 { margin-right:30px !important; } .tablet-mr32 { margin-right:32px !important; } .tablet-mr40 { margin-right:40px !important; } .tablet-mr50 { margin-right:50px !important; } .tablet-mr60 { margin-right:60px !important; } .tablet-mr70 { margin-right:70px !important; } .tablet-mr80 { margin-right:80px !important; } .tablet-mr90 { margin-right:90px !important; } .tablet-mr-1 { margin-right:-1px !important; } .tablet-mr-2 { margin-right:-2px !important; } .tablet-mr-3 { margin-right:-3px !important; } .tablet-mr-4 { margin-right:-4px !important; } .tablet-mr-5 { margin-right:-5px !important; } .tablet-ml0 { margin-left:0px !important; } .tablet-ml1 { margin-left:1px !important; } .tablet-ml2 { margin-left:2px !important; } .tablet-ml3 { margin-left:3px !important; } .tablet-ml4 { margin-left:4px !important; } .tablet-ml5 { margin-left:5px !important; } .tablet-ml6 { margin-left:6px !important; } .tablet-ml7 { margin-left:7px !important; } .tablet-ml8 { margin-left:8px !important; } .tablet-ml9 { margin-left:9px !important; } .tablet-ml10 { margin-left:10px !important; } .tablet-ml12 { margin-left:12px !important; } .tablet-ml15 { margin-left:15px !important; } .tablet-ml16 { margin-left:16px !important; } .tablet-ml20 { margin-left:20px !important; } .tablet-ml24 { margin-left:24px !important; } .tablet-ml25 { margin-left:25px !important; } .tablet-ml30 { margin-left:30px !important; } .tablet-ml32 { margin-left:32px !important; } .tablet-ml40 { margin-left:40px !important; } .tablet-ml50 { margin-left:50px !important; } .tablet-ml60 { margin-left:60px !important; } .tablet-ml70 { margin-left:70px !important; } .tablet-ml80 { margin-left:80px !important; } .tablet-ml90 { margin-left:90px !important; } .tablet-ml-1 { margin-left:-1px !important; } .tablet-ml-2 { margin-left:-2px !important; } .tablet-ml-3 { margin-left:-3px !important; } .tablet-ml-4 { margin-left:-4px !important; } .tablet-ml-5 { margin-left:-5px !important; } .tablet-pauto { padding-left:auto !important; padding-right:auto !important; } .tablet-prauto { padding-right:auto !important; } .tablet-plauto { padding-left:auto !important; } .tablet-p0 { padding:0px !important; } .tablet-p1 { padding:1px !important; } .tablet-p2 { padding:2px !important; } .tablet-p3 { padding:3px !important; } .tablet-p4 { padding:4px !important; } .tablet-p5 { padding:5px !important; } .tablet-p6 { padding:6px !important; } .tablet-p7 { padding:7px !important; } .tablet-p8 { padding:8px !important; } .tablet-p9 { padding:9px !important; } .tablet-p10 { padding:10px !important; } .tablet-p12 { padding:12px !important; } .tablet-p15 { padding:15px !important; } .tablet-p16 { padding:16px !important; } .tablet-p20 { padding:20px !important; } .tablet-p24 { padding:24px !important; } .tablet-p25 { padding:25px !important; } .tablet-p30 { padding:30px !important; } .tablet-p40 { padding:40px !important; } .tablet-p50 { padding:50px !important; } .tablet-pb0 { padding-bottom:0px !important; } .tablet-pb1 { padding-bottom:1px !important; } .tablet-pb2 { padding-bottom:2px !important; } .tablet-pb3 { padding-bottom:3px !important; } .tablet-pb4 { padding-bottom:4px !important; } .tablet-pb5 { padding-bottom:5px !important; } .tablet-pb6 { padding-bottom:6px !important; } .tablet-pb7 { padding-bottom:7px !important; } .tablet-pb8 { padding-bottom:8px !important; } .tablet-pb9 { padding-bottom:9px !important; } .tablet-pb10 { padding-bottom:10px !important; } .tablet-pb12 { padding-bottom:12px !important; } .tablet-pb15 { padding-bottom:15px !important; } .tablet-pb16 { padding-bottom:16px !important; } .tablet-pb20 { padding-bottom:20px !important; } .tablet-pb24 { padding-bottom:24px !important; } .tablet-pb25 { padding-bottom:25px !important; } .tablet-pb30 { padding-bottom:30px !important; } .tablet-pb32 { padding-bottom:32px !important; } .tablet-pb40 { padding-bottom:40px !important; } .tablet-pb50 { padding-bottom:50px !important; } .tablet-pb60 { padding-bottom:60px !important; } .tablet-pb70 { padding-bottom:70px !important; } .tablet-pb80 { padding-bottom:80px !important; } .tablet-pb90 { padding-bottom:90px !important; } .tablet-pb100 { padding-bottom:100px !important; } .tablet-pb110 { padding-bottom:110px !important; } .tablet-pb120 { padding-bottom:120px !important; } .tablet-pb130 { padding-bottom:130px !important; } .tablet-pb140 { padding-bottom:140px !important; } .tablet-pb150 { padding-bottom:150px !important; } .tablet-pb160 { padding-bottom:160px !important; } .tablet-pb170 { padding-bottom:170px !important; } .tablet-pb180 { padding-bottom:180px !important; } .tablet-pb190 { padding-bottom:190px !important; } .tablet-pb200 { padding-bottom:200px !important; } .tablet-pb300 { padding-bottom:300px !important; } .tablet-pt0 { padding-top:0px !important; } .tablet-pt1 { padding-top:1px !important; } .tablet-pt2 { padding-top:2px !important; } .tablet-pt3 { padding-top:3px !important; } .tablet-pt4 { padding-top:4px !important; } .tablet-pt5 { padding-top:5px !important; } .tablet-pt6 { padding-top:6px !important; } .tablet-pt7 { padding-top:7px !important; } .tablet-pt8 { padding-top:8px !important; } .tablet-pt9 { padding-top:9px !important; } .tablet-pt10 { padding-top:10px !important; } .tablet-pt12 { padding-top:12px !important; } .tablet-pt15 { padding-top:15px !important; } .tablet-pt16 { padding-top:16px !important; } .tablet-pt20 { padding-top:20px !important; } .tablet-pt24 { padding-top:24px !important; } .tablet-pt25 { padding-top:25px !important; } .tablet-pt30 { padding-top:30px !important; } .tablet-pt32 { padding-top:32px !important; } .tablet-pt40 { padding-top:40px !important; } .tablet-pt50 { padding-top:50px !important; } .tablet-pt60 { padding-top:60px !important; } .tablet-pt70 { padding-top:70px !important; } .tablet-pt80 { padding-top:80px !important; } .tablet-pt90 { padding-top:90px !important; } .tablet-pt100 { padding-top:100px !important; } .tablet-pt110 { padding-top:110px !important; } .tablet-pt120 { padding-top:120px !important; } .tablet-pt130 { padding-top:130px !important; } .tablet-pt140 { padding-top:140px !important; } .tablet-pt150 { padding-top:150px !important; } .tablet-pt160 { padding-top:160px !important; } .tablet-pt170 { padding-top:170px !important; } .tablet-pt180 { padding-top:180px !important; } .tablet-pt190 { padding-top:190px !important; } .tablet-pt200 { padding-top:200px !important; } .tablet-pt300 { padding-top:300px !important; } .tablet-pt-1 { padding-top:-1px !important; } .tablet-pt-2 { padding-top:-2px !important; } .tablet-pt-3 { padding-top:-3px !important; } .tablet-pt-4 { padding-top:-4px !important; } .tablet-pt-5 { padding-top:-5px !important; } .tablet-pt-10 { padding-top:-10px !important; } .tablet-pt-20 { padding-top:-20px !important; } .tablet-pr0 { padding-right:0px !important; } .tablet-pr1 { padding-right:1px !important; } .tablet-pr2 { padding-right:2px !important; } .tablet-pr3 { padding-right:3px !important; } .tablet-pr4 { padding-right:4px !important; } .tablet-pr5 { padding-right:5px !important; } .tablet-pr6 { padding-right:6px !important; } .tablet-pr7 { padding-right:7px !important; } .tablet-pr8 { padding-right:8px !important; } .tablet-pr9 { padding-right:9px !important; } .tablet-pr10 { padding-right:10px !important; } .tablet-pr12 { padding-right:12px !important; } .tablet-pr15 { padding-right:15px !important; } .tablet-pr16 { padding-right:16px !important; } .tablet-pr20 { padding-right:20px !important; } .tablet-pr24 { padding-right:24px !important; } .tablet-pr25 { padding-right:25px !important; } .tablet-pr30 { padding-right:30px !important; } .tablet-pr32 { padding-right:32px !important; } .tablet-pr40 { padding-right:40px !important; } .tablet-pr50 { padding-right:50px !important; } .tablet-pr60 { padding-right:60px !important; } .tablet-pr70 { padding-right:70px !important; } .tablet-pr80 { padding-right:80px !important; } .tablet-pr90 { padding-right:90px !important; } .tablet-pr-1 { padding-right:-1px !important; } .tablet-pr-2 { padding-right:-2px !important; } .tablet-pr-3 { padding-right:-3px !important; } .tablet-pr-4 { padding-right:-4px !important; } .tablet-pr-5 { padding-right:-5px !important; } .tablet-pl0 { padding-left:0px !important; } .tablet-pl1 { padding-left:1px !important; } .tablet-pl2 { padding-left:2px !important; } .tablet-pl3 { padding-left:3px !important; } .tablet-pl4 { padding-left:4px !important; } .tablet-pl5 { padding-left:5px !important; } .tablet-pl6 { padding-left:6px !important; } .tablet-pl7 { padding-left:7px !important; } .tablet-pl8 { padding-left:8px !important; } .tablet-pl9 { padding-left:9px !important; } .tablet-pl10 { padding-left:10px !important; } .tablet-pl12 { padding-left:12px !important; } .tablet-pl15 { padding-left:15px !important; } .tablet-pl16 { padding-left:16px !important; } .tablet-pl20 { padding-left:20px !important; } .tablet-pl24 { padding-left:24px !important; } .tablet-pl25 { padding-left:25px !important; } .tablet-pl30 { padding-left:30px !important; } .tablet-pl32 { padding-left:32px !important; } .tablet-pl40 { padding-left:40px !important; } .tablet-pl50 { padding-left:50px !important; } .tablet-pl60 { padding-left:60px !important; } .tablet-pl70 { padding-left:70px !important; } .tablet-pl80 { padding-left:80px !important; } .tablet-pl90 { padding-left:90px !important; } .tablet-pl100 { padding-left:100px !important; } .tablet-pl-1 { padding-left:-1px !important; } .tablet-pl-2 { padding-left:-2px !important; } .tablet-pl-3 { padding-left:-3px !important; } .tablet-pl-4 { padding-left:-4px !important; } .tablet-pl-5 { padding-left:-5px !important; } } /*======================================== Mobile ========================================*/ @media screen and (max-width:666px) { .visible-when-display-size-is-pc { display:none !important; } .visible-when-display-size-is-mobile { display:inline !important; } .visible-when-display-size-is-tablet { display:none !important; } .visible-when-display-size-is-not-mobile { display:none !important; } .block-when-display-size-is-pc { display:none !important; } .block-when-display-size-is-mobile { display:block !important; } .block-when-display-size-is-tablet { display:none !important; } .block-when-display-size-is-not-mobile { display:none !important; } .block-when-display-size-is-not-pc { display:block !important; } .inline-block-when-display-size-is-pc { display:none !important; } .inline-block-when-display-size-is-mobile { display:inline-block !important; } .inline-block-when-display-size-is-tablet { display:none !important; } .inline-block-when-display-size-is-not-mobile { display:none !important; } .table-cell-when-display-size-is-pc { display:none !important; } .table-cell-when-display-size-is-mobile { display:table-cell !important; } .table-cell-when-display-size-is-tablet { display:none !important; } .table-cell-when-display-size-is-not-mobile { display:none !important; } .flex-when-display-size-is-pc { display:none !important; } .flex-when-display-size-is-mobile { display:flex !important; } .flex-when-display-size-is-tablet { display:none !important; } .flex-when-display-size-is-not-mobile { display:none !important; } /* grid system */ .container { padding:0 15px 0 15px; } .container.natural { padding-top:60px; padding-bottom:100px; min-height:auto; } .layout-two-columns { display:block; column-gap:0; } .layout-two-columns > .left { margin-bottom:20px; } .layout-three-columns { display:block; column-gap:0; } .layout-three-columns > .left, .layout-three-columns > .center { margin-bottom:20px; } /* sizes */ .mobile-size-XL { width:152px; height:152px; } .mobile-size-L { width:102px; height:102px; } .mobile-size-M { width:72px; height:72px; } .mobile-size-S { width:50px; height:50px; } .mobile-size-XS { width:30px; height:30px; } .mobile-size-XXS { width:24px; height:24px; } .mobile-size-free { width:auto; height:auto; } /* header*/ header > div > div { padding:0 10px 0 10px; } header a.button.button-account { display:none; } header a.button.button-help > label { display:none; } .ribbon > div > div { flex-wrap:wrap; } /* footer */ footer { padding-bottom:45px; } footer > div > .menu > div { padding-left:0; } footer > div > .media { display:block; margin:0 0 15px 0; } footer > div > .media > .logo { display:block; width:auto; border-bottom:1px solid #e1e1e1; padding:0 0 20px 0; margin:0 0 16px 0; } footer > div > .media > .links { display:block; } footer > div > .bottom > .copyright { padding-left:0; } /* .navigation */ .navigation > .bar { display:block; } .navigation > .menu > .inner {} .navigation > .menu > .inner > .profile { display:block; padding:0; margin:0; border-bottom:none; } .navigation > .menu > .inner > .profile > .account { display:block; background-color:#ffffff; padding:10px; border-radius:10px; text-align:center; } .navigation > .menu > .inner > .profile > .buttons { display:block; position:absolute; justify-content:space-between; flex-wrap:nowrap; align-items:center; bottom:50px; right:10px; z-index:1001; } .navigation > .menu > .inner > .profile > .buttons a.btn { display:block; background-color:#ffffff; margin-left:0; margin-top:10px; } .navigation > .menu > .inner > .profile > .buttons a.btn:hover { background-color:#888888; } .navigation > .menu > .inner > .shortcuts { display:none; } .navigation > .menu > .inner > .menu { padding:0; } .navigation > .menu > .inner > .menu > div { margin:20px 0 0 0; padding:0; } .navigation > .menu > .inner > .menu > div > .heading { margin:0; padding:0; } .navigation > .menu > .inner > .menu > div > ul { margin:15px 0 0 0; background:#ffffff; border-radius:10px; } .navigation > .menu > .inner > .menu > div > ul > li { display:block; margin:0; } .navigation > .menu > .inner > .menu > div > ul > li > a { display:block; padding:15px 15px 15px 20px; position:relative; } .navigation > .menu > .inner > .menu > div > ul > li > a::after { display:inline-block; content:"\e92a"; font-family:"icon"; opacity:0.5; position:absolute; top:16px; right:20px; } .navigation > .menu > .inner > .menu > div > ul > li + li { margin:0; border-top:1px solid #f0f1f1; } .navigation > .menu > .inner > .menu > div > ul > li.indent { margin-top:0 !important; line-height:inherit; padding-left:20px; } .navigation > .menu > .inner > .menu > div > ul > li.indent a { font-size:14px; color:#666666; } .navigation > .menu > .inner > .menu > div > ul > li.indent:before { display:none; } .navigation > .menu > .inner > .media { display:block; } .navigation > .menu > .inner > .media > .logo { display:block; width:auto; border-bottom:1px solid #e1e1e1; padding:0 0 20px 0; margin:0 0 16px 0; } /* .hr, .hr-with-label */ div.hr,div.hr-with-label { width:100%; height:16px; line-height:16px; background-color:transparent !important; border-top:1px solid #e1e1e1; margin:30px 0 14px 0; text-align:center; position:relative; color:#bbbbbb; } div.hr-with-label.label-mobile-only > span { display:inline-block; } /* .message */ div.message { padding-top:60px; padding-bottom:70px; } div.message > dl { display:block; text-align:center; } div.message > dl > dt { display:block; text-align:center; } div.message > dl > dt + dd { display:inline-block; margin:20px 0 0 0; padding:0 20px 0 20px; text-align:left; } /* div.message > dl > dd > strong { display:block; font-size:20px; } div.message > dl > dd > p { margin-top:8px; } */ div.message > ul { margin-top:40px; } /*div.message > ul > li > a.btn { min-width:200px; }*/ /* .heading */ div.heading { display:block; } div.heading .options { display:block; margin-top:40px; margin-bottom:-20px; } /* .cover-* */ div.cover-with-image > .outer > .image.right { position:relative; bottom:0; right:0; text-align:center; } /* box */ .box .box-table.mobile-block { display:block; } .box .box-table.mobile-block > .box-cell { display:block; } .box .box-table.mobile-block > .box-cell + .box-cell { border-left:none; border-top:1px solid #e1e1e1; } /* ul.hlist */ ul.hlist.mobile-vertical { display:block; } ul.hlist.mobile-vertical > li { display:block; } ul.hlist.mobile-vertical > li + li { border-left:none; border-top:1px solid #e1e1e1; } ul.hlist.mobile-vertical.border-left { border-left:none; border-top:1px solid #e1e1e1; } ul.hlist.mobile-vertical.border-right { border-right:none; border-bottom:1px solid #e1e1e1; } ul.hlist.mobile-vertical > li.border-left-double { border-left-style:none; border-left-width:0; border-top-style:double; border-top-width:3px; } ul.hlist.mobile-vertical > li.border-right-double + li { border-left-style:none; border-left-width:0; border-bottom-style:double; border-bottom-width:3px; } /* dl.list */ dl.list > dt { width:100px; } dl.list.mobile-vertical { display:block; } dl.list.mobile-vertical > dt { display:block; width:auto; padding:20px 12px 0 12px; text-align:left; } dl.list.mobile-vertical > dd { display:block; padding:10px 12px 20px 12px;; } /* table.list */ table.list.mobile-narrow {} table.list.mobile-narrow > thead > tr > th { padding:10px; } table.list.mobile-narrow > tbody > tr > td { padding:10px; } /* talbe.kimini-level */ table.kimini-level { display:block; } table.kimini-level > thead { display:none; } table.kimini-level > tbody { display:flex; flex-wrap:wrap; justify-content:flex-start; align-items:stretch; gap:20px 20px; border:none; } table.kimini-level > tbody > tr { display:block; width:calc(50% - 10px); border:none; background:#f3f3f3; } table.kimini-level > tbody > tr > th { display:block; border:none; } table.kimini-level > tbody > tr > td { display:block; border:none; border-top:2px solid #ffffff; line-height:1.6; } table.kimini-level > tbody > tr > th::before { content:"Kiminiレベル"; display:block; margin-bottom:4px; font-size:14px; color:#ffffff; font-weight:normal; } table.kimini-level > tbody > tr > td.cefr_j::before { content:"CEFR-J"; display:block; font-size:14px; color:#999999; } table.kimini-level > tbody > tr > td.cefr::before { content:"CEFR"; display:block; font-size:14px; color:#999999; } table.kimini-level > tbody > tr > td.eiken::before { content:"英検"; display:block; font-size:14px; color:#999999; } table.kimini-level > tbody > tr > td.ielts::before { content:"IELTS"; display:block; font-size:14px; color:#999999; } table.kimini-level > tbody > tr > td.can_do::before { content:"できること"; display:block; font-size:14px; color:#999999; text-align:center; margin-bottom:6px; } table.kimini-level > tbody > tr > td.rowspan { display:block; } /* .course-category-fucure-details */ .course-category-fucure-details { display:block; } .course-category-fucure-details > img { display:block; width:100%; max-width:100%; } .course-category-fucure-details > div { text-align:left; margin-top:15px; } /* fields */ dl.field { display:block; } dl.field > dt { display:block; text-align:left; padding:15px 15px 15px 15px; width:auto; } dl.field > dd { display:block; text-align:left; padding:0 15px 18px 15px; background:#eef5f4; } dl.field + dl.field { margin-top:1px; } /* simple face */ dl.field.simple {} dl.field.simple > dt { padding:0; } dl.field.simple > dd { padding:3px 0 0 0; background:transparent; } dl.field.simple + dl.field.simple { margin-top:0; } .layout-form div.fixed-buttons { padding:25px 15px 25px 15px; } /* dialogs */ .dialog > .content > .inner { padding:20px; } /* action sheet */ .action-sheet { padding:0 10px 0 10px; width:100% !important; position:absolute; bottom:0; left:0; } .action-sheet > .content { border-radius:10px 10px 0 0; } .action-sheet > .content > .inner { padding-left:20px; padding-right:20px; } /* alert */ .alert > .content > .inner { padding-left:20px; padding-right:20px; } .alert > .content > .inner > p { text-align:left; } /* tab-bar */ ul.tab-bar.tab-bar-face-line > li > a, ul.tab-bar.tab-bar-face-line > li > span { padding:8px 16px 8px 16px; } ul.tab-bar.tab-bar-face-line.mobile-w100p { display:table; } ul.tab-bar.tab-bar-face-line.mobile-w100p > li { display:table-cell; } ul.tab-bar.tab-bar-face-line.mobile-w100p > li > a, ul.tab-bar.tab-bar-face-line.mobile-w100p > li > span { text-align:center; } ul.tab-bar.tab-bar-face-line.mobile-border-none::after { display:none; } ul.tab-bar.tab-bar-face-line.dashboard { display:table; } ul.tab-bar.tab-bar-face-line.dashboard > li { display:table-cell; } ul.tab-bar.tab-bar-face-line.dashboard > li > a, ul.tab-bar.tab-bar-face-line.dashboard > li > span { text-align:center; padding-left:10px; padding-right:10px; } ul.tab-bar.tab-bar-face-line.mobile-text { display:block; } ul.tab-bar.tab-bar-face-line.mobile-text:after { display:none; /*position:relative; margin-top:20px;*/ } ul.tab-bar.tab-bar-face-line.mobile-text > li { display:inline-block; margin-left:5px; margin-right:10px; margin-bottom:4px; } ul.tab-bar.tab-bar-face-line.mobile-text > li > a, ul.tab-bar.tab-bar-face-line.mobile-text > li > span { width:auto; padding:0; } ul.tab-bar.tab-bar-face-line.mobile-text > li > a:before, ul.tab-bar.tab-bar-face-line.mobile-text > li > span:before { display:inline-block; content:"\e92a"; font-family:"icon"; position:relative; top:2px; margin-right:3px; } ul.tab-bar.tab-bar-face-line.mobile-text > li > a.active, ul.tab-bar.tab-bar-face-line.mobile-text > li > span.active { _color:#239765; padding-bottom:4px; margin-bottom:8px; } ul.tab-bar.tab-bar-face-line.mobile-text > li > a.active:hover, ul.tab-bar.tab-bar-face-line.mobile-text > li > span.active:hover { opacity:0.85; } /*ul.tab-bar.tab-bar-face-line.mobile-text > li > a.active:after, ul.tab-bar.tab-bar-face-line.mobile-text > li > span.active:after { display:none; } */ ul.tab-bar.tab-bar-face-line.mobile-text > li > a.active::after, ul.tab-bar.tab-bar-face-line.mobile-text > li > span.active::after { display:block; content:""; width:100%; height:5px; background:#239765; border-radius:3px; position:absolute; bottom:0; left:0; z-index:1; } /* ticket */ .ticket > .outer > .inner ul.details > li.more { position:relative; padding-left:7px; padding-top:5px; } /* coupon */ .coupon > .inner ul.details > li.more { position:relative; padding-left:0; padding-top:5px; } /* pager */ ul.pager.mobile-align-left { justify-content:flex-start; } ul.pager.mobile-align-right { justify-content:flex-end; } ul.pager.mobile-align-center { justify-content:center; } /**** pages > dashboard ****/ /* profile */ .dashboard-profile { display:block; padding:0 20px 0 20px; } .dashboard-profile > .right { padding-top:20px; padding-bottom:20px; } /**** pages > plan ****/ .plans { max-height:500px; } /**** pages > drill ****/ /* status */ .drill-status > .inner { justify-content:space-between; column-gap:3px; } .drill-status > .inner > dl > dd { margin-top:10px; padding-left:0; text-align:center; } .drill-status > .inner > dl > dd > span + span { display:block; } .drill-status.mobile-horizontal > .inner { display:block; } .drill-status.mobile-horizontal > .inner > dl > dt { display:inline-block; vertical-align:base-line; width:130px; } .drill-status.mobile-horizontal > .inner > dl > dt > span.label { display:block; } .drill-status.mobile-horizontal > .inner > dl > dd { display:inline-block; vertical-align:base-line; margin:0 0 0 15px; text-align:left; position:relative; top:3px; } .drill-status.mobile-horizontal > .inner > dl > dd > span + span { display:inline; } .drill-status.mobile-horizontal > .inner > div { display:none; } .drill-status.mobile-horizontal > .inner > div + dl { margin-top:10px; } /* progress */ .drill-progress-with-no { margin-right:3px; } /* flex short cuts */ .mobile-flex-between-top { display:flex !important; justify-content:space-between !important; flex-wrap:nowrap !important; align-items:flex-start !important; } .mobile-flex-between-middle { display:flex !important; justify-content:space-between !important; flex-wrap:nowrap !important; align-items:center !important; } .mobile-flex-between-bottom { display:flex !important; justify-content:space-between !important; flex-wrap:nowrap !important; align-items:flex-end !important; } .mobile-flex-left-top { display:flex !important; justify-content:flex-start !important; flex-wrap:nowrap !important; align-items:flex-start !important; } .mobile-flex-left-middle { display:flex !important; justify-content:flex-start !important; flex-wrap:nowrap !important; align-items:center !important; } .mobile-flex-left-bottom { display:flex !important; justify-content:flex-start !important; flex-wrap:nowrap !important; align-items:flex-end !important; } .mobile-flex-center-top { display:flex !important; justify-content:center !important; flex-wrap:nowrap !important; align-items:flex-start !important; } .mobile-flex-center-middle { display:flex !important; justify-content:center !important; flex-wrap:nowrap !important; align-items:center !important; } .mobile-flex-center-bottom { display:flex !important; justify-content:center !important; flex-wrap:nowrap !important; align-items:flex-end !important; } .mobile-flex-right-top { display:flex !important; justify-content:flex-end !important; flex-wrap:nowrap !important; align-items:flex-start !important; } .mobile-flex-right-middle { display:flex !important; justify-content:flex-end !important; flex-wrap:nowrap !important; align-items:center !important; } .mobile-flex-right-bottom { display:flex !important; justify-content:flex-end !important; flex-wrap:nowrap !important; align-items:flex-end !important; } .mobile-flex-direction-row { flex-direction:row !important; } .mobile-flex-direction-row-reverse { flex-direction:row-reverse !important; } .mobile-flex-grow { flex-grow:2 !important; } .mobile-flex-grow-0 { flex-grow:0 !important; } .mobile-flex-grow-1 { flex-grow:1 !important; } .mobile-flex-grow-2 { flex-grow:2 !important; } .mobile-flex-wrap { flex-wrap:wrap !important; } .mobile-flex-nowrap { flex-wrap:nowrap !important; } .mobile-flex-one-column > * { width:100% !important; } .mobile-flex-two-column > * { width:calc(50% - 10px) !important; } .mobile-flex-three-column > * { width:calc(33% - 14px) !important; } .mobile-flex-three-column-cgap10 > * { width:calc(33% - 7px) !important; } /* cover */ .mobile-cover { margin-left:-15px; margin-right:-15px; } /* force styles */ .mobile-xxlarge { font-size:28px !important; } .mobile-xlarge { font-size:24px !important; } .mobile-large { font-size:20px !important; } .mobile-regular { font-size:16px !important; } .mobile-small { font-size:14px !important; } .mobile-xsmall { font-size:12px !important; } .mobile-xxsmall { font-size:10px !important; } .mobile-block { display:block !important; } .mobile-inline { display:inline !important; } .mobile-inline-block { display:inline-block !important; } .mobile-hide,.mobile-hidden { display:none !important; } .mobile-table { display:table !important; } .mobile-table-cell { display:table-cell !important; } .mobile-table-cell.min { width:1% !important; } .mobile-tl { text-align:left !important; } .mobile-tr { text-align:right !important; } .mobile-tc { text-align:center !important; } .mobile-vt { vertical-align:top !important; } .mobile-vb { vertical-align:bottom !important; } .mobile-vm,.mobile-vc { vertical-align:middle !important; } .mobile-vbase { vertical-align:baseline !important; } .mobile-fl { float:left !important; } .mobile-fr { float:right !important; } .mobile-nr { white-space:nowrap !important; } .mobile-wp { white-space:wrap !important; } .mobile-break-all { word-break:break-all; } .mobile-nr-force { white-space:nowrap !important; overflow:hidden !important; } .mobile-absolute { position:absolute !important; } .mobile-relative { position:relative !important; } .mobile-fixed { position:fixed !important; } .mobile-absolute-top-left { position:absolute !important; top:0 !important; left:0 !important; } .mobile-absolute-top-right { position:absolute !important; top:0 !important; right:0 !important; } .mobile-absolute-bottom-left { position:absolute !important; bottom:0 !important; left:0 !important; } .mobile-absolute-bottom-right { position:absolute !important; bottom:0 !important; right:0 !important; } .mobile-absolute-left-50p { position:absolute !important; left:50% !important; } .mobile-absolute-top-50p { position:absolute !important; top:50% !important; } .mobile-absolute-top-left-50p { position:absolute !important; left:50% !important; top:50% !important; } .mobile-fixed-top-left { position:fixed !important; top:0; left:0; } .mobile-fixed-top-right { position:fixed !important; top:0; right:0; } .mobile-fixed-bottom-left { position:fixed !important; bottom:0; left:0; } .mobile-fixed-bottom-right { position:fixed !important; bottom:0; right:0; } .mobile-top1px { position:relative !important; top:1px !important; } .mobile-top2px { position:relative !important; top:2px !important; } .mobile-top3px { position:relative !important; top:3px !important; } .mobile-top4px { position:relative !important; top:4px !important; } .mobile-top5px { position:relative !important; top:5px !important; } .mobile-top6px { position:relative !important; top:6px !important; } .mobile-top7px { position:relative !important; top:7px !important; } .mobile-top8px { position:relative !important; top:8px !important; } .mobile-top9px { position:relative !important; top:9px !important; } .mobile-top10px { position:relative !important; top:10px !important; } .mobile-top11px { position:relative !important; top:11px !important; } .mobile-top12px { position:relative !important; top:12px !important; } .mobile-top-1px { position:relative !important; top:-1px !important; } .mobile-top-2px { position:relative !important; top:-2px !important; } .mobile-top-3px { position:relative !important; top:-3px !important; } .mobile-top-4px { position:relative !important; top:-4px !important; } .mobile-top-5px { position:relative !important; top:-5px !important; } .mobile-top-6px { position:relative !important; top:-6px !important; } .mobile-top-7px { position:relative !important; top:-7px !important; } .mobile-top-8px { position:relative !important; top:-8px !important; } .mobile-top-9px { position:relative !important; top:-9px !important; } .mobile-top-10px { position:relative !important; top:-10px !important; } .mobile-top-11px { position:relative !important; top:-11px !important; } .mobile-top-12px { position:relative !important; top:-12px !important; } .mobile-left1px { position:relative !important; left:1px !important; } .mobile-left2px { position:relative !important; left:2px !important; } .mobile-left3px { position:relative !important; left:3px !important; } .mobile-left4px { position:relative !important; left:4px !important; } .mobile-left5px { position:relative !important; left:5px !important; } .mobile-left6px { position:relative !important; left:6px !important; } .mobile-left7px { position:relative !important; left:7px !important; } .mobile-left8px { position:relative !important; left:8px !important; } .mobile-left9px { position:relative !important; left:9px !important; } .mobile-left10px { position:relative !important; left:10px !important; } .mobile-left11px { position:relative !important; left:11px !important; } .mobile-left12px { position:relative !important; left:12px !important; } .mobile-left-1px { position:relative !important; left:-1px !important; } .mobile-left-2px { position:relative !important; left:-2px !important; } .mobile-left-3px { position:relative !important; left:-3px !important; } .mobile-left-3px { position:relative !important; left:-3px !important; } .mobile-left-4px { position:relative !important; left:-4px !important; } .mobile-left-5px { position:relative !important; left:-5px !important; } .mobile-left-6px { position:relative !important; left:-6px !important; } .mobile-left-7px { position:relative !important; left:-7px !important; } .mobile-left-8px { position:relative !important; left:-8px !important; } .mobile-left-9px { position:relative !important; left:-9px !important; } .mobile-left-10px { position:relative !important; left:-10px !important; } .mobile-left-11px { position:relative !important; left:-11px !important; } .mobile-left-12px { position:relative !important; left:-12px !important; } .mobile-z0 { z-index:0 !important; } .mobile-z1 { z-index:1 !important; } .mobile-overflow-hidden { overflow:hidden !important; } .mobile-wauto { width:auto !important; } .mobile-w1 { width:1px !important; } .mobile-w2 { width:2px !important; } .mobile-w3 { width:3px !important; } .mobile-w4 { width:4px !important; } .mobile-w5 { width:5px !important; } .mobile-w6 { width:6px !important; } .mobile-w7 { width:7px !important; } .mobile-w8 { width:8px !important; } .mobile-w9 { width:9px !important; } .mobile-w10 { width:10px !important; } .mobile-w12 { width:12px !important; } .mobile-w15 { width:15px !important; } .mobile-w16 { width:16px !important; } .mobile-w20 { width:20px !important; } .mobile-w24 { width:24px !important; } .mobile-w25 { width:25px !important; } .mobile-w30 { width:30px !important; } .mobile-w32 { width:32px !important; } .mobile-w36 { width:36px !important; } .mobile-w40 { width:40px !important; } .mobile-w48 { width:48px !important; } .mobile-w50 { width:50px !important; } .mobile-w60 { width:60px !important; } .mobile-w70 { width:70px !important; } .mobile-w80 { width:80px !important; } .mobile-w90 { width:90px !important; } .mobile-w100 { width:100px !important; } .mobile-w110 { width:110px !important; } .mobile-w120 { width:120px !important; } .mobile-w130 { width:130px !important; } .mobile-w140 { width:140px !important; } .mobile-w150 { width:150px !important; } .mobile-w160 { width:160px !important; } .mobile-w170 { width:170px !important; } .mobile-w180 { width:180px !important; } .mobile-w190 { width:190px !important; } .mobile-w200 { width:200px !important; } .mobile-w210 { width:210px !important; } .mobile-w220 { width:220px !important; } .mobile-w230 { width:230px !important; } .mobile-w240 { width:240px !important; } .mobile-w250 { width:250px !important; } .mobile-w260 { width:260px !important; } .mobile-w270 { width:270px !important; } .mobile-w280 { width:280px !important; } .mobile-w290 { width:290px !important; } .mobile-w300 { width:300px !important; } .mobile-w320 { width:320px !important; } .mobile-w350 { width:350px !important; } .mobile-w400 { width:400px !important; } .mobile-w450 { width:450px !important; } .mobile-w500 { width:500px !important; } .mobile-w600 { width:600px !important; } .mobile-w700 { width:700px !important; } .mobile-w800 { width:800px !important; } .mobile-w900 { width:900px !important; } .mobile-w1000 { width:1000px !important; } .mobile-w1p { width:1% !important; } .mobile-w10p { width:10% !important; } .mobile-w20p { width:20% !important; } .mobile-w25p { width:25% !important; } .mobile-w30p { width:30% !important; } .mobile-w33p { width:33% !important; } .mobile-w40p { width:40% !important; } .mobile-w45p { width:45% !important; } .mobile-w50p { width:50% !important; } .mobile-w60p { width:60% !important; } .mobile-w70p { width:70% !important; } .mobile-w80p { width:80% !important; } .mobile-w90p { width:90% !important; } .mobile-w100p { width:100% !important; } .mobile-minwauto { min-width:unset; } .mobile-minw10 { min-width:10px; } .mobile-minw20 { min-width:20px; } .mobile-minw30 { min-width:30px; } .mobile-minw40 { min-width:40px; } .mobile-minw50 { min-width:50px; } .mobile-minw60 { min-width:60px; } .mobile-minw70 { min-width:70px; } .mobile-minw80 { min-width:80px; } .mobile-minw90 { min-width:90px; } .mobile-minw100 { min-width:100px; } .mobile-minw150 { min-width:150px; } .mobile-minw200 { min-width:200px; } .mobile-minw250 { min-width:250px; } .mobile-minw300 { min-width:300px; } .mobile-minw400 { min-width:400px; } .mobile-maxwauto { max-width:unset; } .mobile-maxw10 { max-width:10px; } .mobile-maxw20 { max-width:20px; } .mobile-maxw30 { max-width:30px; } .mobile-maxw40 { max-width:40px; } .mobile-maxw50 { max-width:50px; } .mobile-maxw60 { max-width:60px; } .mobile-maxw70 { max-width:70px; } .mobile-maxw80 { max-width:80px; } .mobile-maxw90 { max-width:90px; } .mobile-maxw100 { max-width:100px; } .mobile-maxw150 { max-width:150px; } .mobile-maxw200 { max-width:200px; } .mobile-maxw250 { max-width:250px; } .mobile-maxw300 { max-width:300px; } .mobile-maxw400 { max-width:400px; } .mobile-maxw100p { max-width:100%; } .mobile-hauto { height:auto !important; } .mobile-h1 { height:1px !important; } .mobile-h2 { height:2px !important; } .mobile-h3 { height:3px !important; } .mobile-h4 { height:4px !important; } .mobile-h5 { height:5px !important; } .mobile-h6 { height:6px !important; } .mobile-h7 { height:7px !important; } .mobile-h8 { height:8px !important; } .mobile-h9 { height:9px !important; } .mobile-h10 { height:10px !important; } .mobile-h12 { height:12px !important; } .mobile-h15 { height:15px !important; } .mobile-h16 { height:16px !important; } .mobile-h20 { height:20px !important; } .mobile-h24 { height:24px !important; } .mobile-h25 { height:25px !important; } .mobile-h30 { height:30px !important; } .mobile-h32 { height:32px !important; } .mobile-h36 { height:36px !important; } .mobile-h40 { height:40px !important; } .mobile-h48 { height:48px !important; } .mobile-h50 { height:50px !important; } .mobile-h60 { height:60px !important; } .mobile-h70 { height:70px !important; } .mobile-h80 { height:80px !important; } .mobile-h90 { height:90px !important; } .mobile-h100 { height:100px !important; } .mobile-h110 { height:110px !important; } .mobile-h120 { height:120px !important; } .mobile-h130 { height:130px !important; } .mobile-h140 { height:140px !important; } .mobile-h150 { height:150px !important; } .mobile-h160 { height:160px !important; } .mobile-h170 { height:170px !important; } .mobile-h180 { height:180px !important; } .mobile-h190 { height:190px !important; } .mobile-h200 { height:200px !important; } .mobile-h210 { height:210px !important; } .mobile-h220 { height:220px !important; } .mobile-h230 { height:230px !important; } .mobile-h240 { height:240px !important; } .mobile-h250 { height:250px !important; } .mobile-h260 { height:260px !important; } .mobile-h270 { height:270px !important; } .mobile-h280 { height:280px !important; } .mobile-h290 { height:290px !important; } .mobile-h300 { height:300px !important; } .mobile-h320 { height:320px !important; } .mobile-h350 { height:300px !important; } .mobile-h400 { height:400px !important; } .mobile-h450 { height:450px !important; } .mobile-h500 { height:500px !important; } .mobile-h600 { height:600px !important; } .mobile-h700 { height:700px !important; } .mobile-h800 { height:800px !important; } .mobile-h900 { height:900px !important; } .mobile-h1000 { height:1000px !important; } .mobile-h1p { height:1% !important; } .mobile-h33p { height:33% !important; } .mobile-h50p { height:50% !important; } .mobile-h100p { height:100% !important; } .mobile-minhauto { min-height:unset; } .mobile-minh50 { min-height:50px; } .mobile-minh70 { min-height:70px; } .mobile-minh80 { min-height:80px; } .mobile-minh90 { min-height:90px; } .mobile-minh100 { min-height:100px; } .mobile-minh150 { min-height:150px; } .mobile-minh200 { min-height:200px; } .mobile-maxhauto { max-height:unset; } .mobile-maxh50 { max-height:50px; } .mobile-maxh100 { max-height:100px; } .mobile-maxh150 { max-height:150px; } .mobile-maxh200 { max-height:200px; } .mobile-mauto { margin-left:auto !important; margin-right:auto !important; } .mobile-mrauto { margin-right:auto !important; } .mobile-mlauto { margin-left:auto !important; } .mobile-m0 { margin:0px !important; } .mobile-m1 { margin:1px !important; } .mobile-m2 { margin:2px !important; } .mobile-m3 { margin:3px !important; } .mobile-m4 { margin:4px !important; } .mobile-m5 { margin:5px !important; } .mobile-m6 { margin:6px !important; } .mobile-m7 { margin:7px !important; } .mobile-m8 { margin:8px !important; } .mobile-m9 { margin:9px !important; } .mobile-m10 { margin:10px !important; } .mobile-m12 { margin:12px !important; } .mobile-m15 { margin:15px !important; } .mobile-m16 { margin:16px !important; } .mobile-m20 { margin:20px !important; } .mobile-m24 { margin:24px !important; } .mobile-m25 { margin:25px !important; } .mobile-m30 { margin:30px !important; } .mobile-m40 { margin:40px !important; } .mobile-m50 { margin:50px !important; } .mobile-mb0 { margin-bottom:0px !important; } .mobile-mb1 { margin-bottom:1px !important; } .mobile-mb2 { margin-bottom:2px !important; } .mobile-mb3 { margin-bottom:3px !important; } .mobile-mb4 { margin-bottom:4px !important; } .mobile-mb5 { margin-bottom:5px !important; } .mobile-mb6 { margin-bottom:6px !important; } .mobile-mb7 { margin-bottom:7px !important; } .mobile-mb8 { margin-bottom:8px !important; } .mobile-mb9 { margin-bottom:9px !important; } .mobile-mb10 { margin-bottom:10px !important; } .mobile-mb12 { margin-bottom:12px !important; } .mobile-mb15 { margin-bottom:15px !important; } .mobile-mb16 { margin-bottom:16px !important; } .mobile-mb20 { margin-bottom:20px !important; } .mobile-mb24 { margin-bottom:24px !important; } .mobile-mb25 { margin-bottom:25px !important; } .mobile-mb30 { margin-bottom:30px !important; } .mobile-mb32 { margin-bottom:32px !important; } .mobile-mb40 { margin-bottom:40px !important; } .mobile-mb50 { margin-bottom:50px !important; } .mobile-mb60 { margin-bottom:60px !important; } .mobile-mb70 { margin-bottom:70px !important; } .mobile-mb80 { margin-bottom:80px !important; } .mobile-mb90 { margin-bottom:90px !important; } .mobile-mb100 { margin-bottom:100px !important; } .mobile-mb110 { margin-bottom:110px !important; } .mobile-mb120 { margin-bottom:120px !important; } .mobile-mb130 { margin-bottom:130px !important; } .mobile-mb140 { margin-bottom:140px !important; } .mobile-mb150 { margin-bottom:150px !important; } .mobile-mb160 { margin-bottom:160px !important; } .mobile-mb170 { margin-bottom:170px !important; } .mobile-mb180 { margin-bottom:180px !important; } .mobile-mb190 { margin-bottom:190px !important; } .mobile-mb200 { margin-bottom:200px !important; } .mobile-mb300 { margin-bottom:300px !important; } .mobile-mt0 { margin-top:0px !important; } .mobile-mt1 { margin-top:1px !important; } .mobile-mt2 { margin-top:2px !important; } .mobile-mt3 { margin-top:3px !important; } .mobile-mt4 { margin-top:4px !important; } .mobile-mt5 { margin-top:5px !important; } .mobile-mt6 { margin-top:6px !important; } .mobile-mt7 { margin-top:7px !important; } .mobile-mt8 { margin-top:8px !important; } .mobile-mt9 { margin-top:9px !important; } .mobile-mt10 { margin-top:10px !important; } .mobile-mt12 { margin-top:12px !important; } .mobile-mt15 { margin-top:15px !important; } .mobile-mt16 { margin-top:16px !important; } .mobile-mt20 { margin-top:20px !important; } .mobile-mt24 { margin-top:24px !important; } .mobile-mt25 { margin-top:25px !important; } .mobile-mt30 { margin-top:30px !important; } .mobile-mt32 { margin-top:32px !important; } .mobile-mt40 { margin-top:40px !important; } .mobile-mt50 { margin-top:50px !important; } .mobile-mt60 { margin-top:60px !important; } .mobile-mt70 { margin-top:70px !important; } .mobile-mt80 { margin-top:80px !important; } .mobile-mt90 { margin-top:90px !important; } .mobile-mt100 { margin-top:100px !important; } .mobile-mt110 { margin-top:110px !important; } .mobile-mt120 { margin-top:120px !important; } .mobile-mt130 { margin-top:130px !important; } .mobile-mt140 { margin-top:140px !important; } .mobile-mt150 { margin-top:150px !important; } .mobile-mt160 { margin-top:160px !important; } .mobile-mt170 { margin-top:170px !important; } .mobile-mt180 { margin-top:180px !important; } .mobile-mt190 { margin-top:190px !important; } .mobile-mt200 { margin-top:200px !important; } .mobile-mt300 { margin-top:300px !important; } .mobile-mt-1 { margin-top:-1px !important; } .mobile-mt-2 { margin-top:-2px !important; } .mobile-mt-3 { margin-top:-3px !important; } .mobile-mt-4 { margin-top:-4px !important; } .mobile-mt-5 { margin-top:-5px !important; } .mobile-mt-10 { margin-top:-10px !important; } .mobile-mt-20 { margin-top:-20px !important; } .mobile-mt-30 { margin-top:-30px !important; } .mobile-mr0 { margin-right:0px !important; } .mobile-mr1 { margin-right:1px !important; } .mobile-mr2 { margin-right:2px !important; } .mobile-mr3 { margin-right:3px !important; } .mobile-mr4 { margin-right:4px !important; } .mobile-mr5 { margin-right:5px !important; } .mobile-mr6 { margin-right:6px !important; } .mobile-mr7 { margin-right:7px !important; } .mobile-mr8 { margin-right:8px !important; } .mobile-mr9 { margin-right:9px !important; } .mobile-mr10 { margin-right:10px !important; } .mobile-mr12 { margin-right:12px !important; } .mobile-mr15 { margin-right:15px !important; } .mobile-mr16 { margin-right:16px !important; } .mobile-mr20 { margin-right:20px !important; } .mobile-mr24 { margin-right:24px !important; } .mobile-mr25 { margin-right:25px !important; } .mobile-mr30 { margin-right:30px !important; } .mobile-mr32 { margin-right:32px !important; } .mobile-mr40 { margin-right:40px !important; } .mobile-mr50 { margin-right:50px !important; } .mobile-mr60 { margin-right:60px !important; } .mobile-mr70 { margin-right:70px !important; } .mobile-mr80 { margin-right:80px !important; } .mobile-mr90 { margin-right:90px !important; } .mobile-mr-1 { margin-right:-1px !important; } .mobile-mr-2 { margin-right:-2px !important; } .mobile-mr-3 { margin-right:-3px !important; } .mobile-mr-4 { margin-right:-4px !important; } .mobile-mr-5 { margin-right:-5px !important; } .mobile-ml0 { margin-left:0px !important; } .mobile-ml1 { margin-left:1px !important; } .mobile-ml2 { margin-left:2px !important; } .mobile-ml3 { margin-left:3px !important; } .mobile-ml4 { margin-left:4px !important; } .mobile-ml5 { margin-left:5px !important; } .mobile-ml6 { margin-left:6px !important; } .mobile-ml7 { margin-left:7px !important; } .mobile-ml8 { margin-left:8px !important; } .mobile-ml9 { margin-left:9px !important; } .mobile-ml10 { margin-left:10px !important; } .mobile-ml12 { margin-left:12px !important; } .mobile-ml15 { margin-left:15px !important; } .mobile-ml16 { margin-left:16px !important; } .mobile-ml20 { margin-left:20px !important; } .mobile-ml24 { margin-left:24px !important; } .mobile-ml25 { margin-left:25px !important; } .mobile-ml30 { margin-left:30px !important; } .mobile-ml32 { margin-left:32px !important; } .mobile-ml40 { margin-left:40px !important; } .mobile-ml50 { margin-left:50px !important; } .mobile-ml60 { margin-left:60px !important; } .mobile-ml70 { margin-left:70px !important; } .mobile-ml80 { margin-left:80px !important; } .mobile-ml90 { margin-left:90px !important; } .mobile-ml-1 { margin-left:-1px !important; } .mobile-ml-2 { margin-left:-2px !important; } .mobile-ml-3 { margin-left:-3px !important; } .mobile-ml-4 { margin-left:-4px !important; } .mobile-ml-5 { margin-left:-5px !important; } .mobile-pauto { padding-left:auto !important; padding-right:auto !important; } .mobile-prauto { padding-right:auto !important; } .mobile-plauto { padding-left:auto !important; } .mobile-p0 { padding:0px !important; } .mobile-p1 { padding:1px !important; } .mobile-p2 { padding:2px !important; } .mobile-p3 { padding:3px !important; } .mobile-p4 { padding:4px !important; } .mobile-p5 { padding:5px !important; } .mobile-p6 { padding:6px !important; } .mobile-p7 { padding:7px !important; } .mobile-p8 { padding:8px !important; } .mobile-p9 { padding:9px !important; } .mobile-p10 { padding:10px !important; } .mobile-p12 { padding:12px !important; } .mobile-p15 { padding:15px !important; } .mobile-p16 { padding:16px !important; } .mobile-p20 { padding:20px !important; } .mobile-p24 { padding:24px !important; } .mobile-p25 { padding:25px !important; } .mobile-p30 { padding:30px !important; } .mobile-p40 { padding:40px !important; } .mobile-p50 { padding:50px !important; } .mobile-pb0 { padding-bottom:0px !important; } .mobile-pb1 { padding-bottom:1px !important; } .mobile-pb2 { padding-bottom:2px !important; } .mobile-pb3 { padding-bottom:3px !important; } .mobile-pb4 { padding-bottom:4px !important; } .mobile-pb5 { padding-bottom:5px !important; } .mobile-pb6 { padding-bottom:6px !important; } .mobile-pb7 { padding-bottom:7px !important; } .mobile-pb8 { padding-bottom:8px !important; } .mobile-pb9 { padding-bottom:9px !important; } .mobile-pb10 { padding-bottom:10px !important; } .mobile-pb12 { padding-bottom:12px !important; } .mobile-pb15 { padding-bottom:15px !important; } .mobile-pb16 { padding-bottom:16px !important; } .mobile-pb20 { padding-bottom:20px !important; } .mobile-pb24 { padding-bottom:24px !important; } .mobile-pb25 { padding-bottom:25px !important; } .mobile-pb30 { padding-bottom:30px !important; } .mobile-pb32 { padding-bottom:32px !important; } .mobile-pb40 { padding-bottom:40px !important; } .mobile-pb50 { padding-bottom:50px !important; } .mobile-pb60 { padding-bottom:60px !important; } .mobile-pb70 { padding-bottom:70px !important; } .mobile-pb80 { padding-bottom:80px !important; } .mobile-pb90 { padding-bottom:90px !important; } .mobile-pb100 { padding-bottom:100px !important; } .mobile-pb110 { padding-bottom:110px !important; } .mobile-pb120 { padding-bottom:120px !important; } .mobile-pb130 { padding-bottom:130px !important; } .mobile-pb140 { padding-bottom:140px !important; } .mobile-pb150 { padding-bottom:150px !important; } .mobile-pb160 { padding-bottom:160px !important; } .mobile-pb170 { padding-bottom:170px !important; } .mobile-pb180 { padding-bottom:180px !important; } .mobile-pb190 { padding-bottom:190px !important; } .mobile-pb200 { padding-bottom:200px !important; } .mobile-pb300 { padding-bottom:300px !important; } .mobile-pt0 { padding-top:0px !important; } .mobile-pt1 { padding-top:1px !important; } .mobile-pt2 { padding-top:2px !important; } .mobile-pt3 { padding-top:3px !important; } .mobile-pt4 { padding-top:4px !important; } .mobile-pt5 { padding-top:5px !important; } .mobile-pt6 { padding-top:6px !important; } .mobile-pt7 { padding-top:7px !important; } .mobile-pt8 { padding-top:8px !important; } .mobile-pt9 { padding-top:9px !important; } .mobile-pt10 { padding-top:10px !important; } .mobile-pt12 { padding-top:12px !important; } .mobile-pt15 { padding-top:15px !important; } .mobile-pt16 { padding-top:16px !important; } .mobile-pt20 { padding-top:20px !important; } .mobile-pt24 { padding-top:24px !important; } .mobile-pt25 { padding-top:25px !important; } .mobile-pt30 { padding-top:30px !important; } .mobile-pt32 { padding-top:32px !important; } .mobile-pt40 { padding-top:40px !important; } .mobile-pt50 { padding-top:50px !important; } .mobile-pt60 { padding-top:60px !important; } .mobile-pt70 { padding-top:70px !important; } .mobile-pt80 { padding-top:80px !important; } .mobile-pt90 { padding-top:90px !important; } .mobile-pt100 { padding-top:100px !important; } .mobile-pt110 { padding-top:110px !important; } .mobile-pt120 { padding-top:120px !important; } .mobile-pt130 { padding-top:130px !important; } .mobile-pt140 { padding-top:140px !important; } .mobile-pt150 { padding-top:150px !important; } .mobile-pt160 { padding-top:160px !important; } .mobile-pt170 { padding-top:170px !important; } .mobile-pt180 { padding-top:180px !important; } .mobile-pt190 { padding-top:190px !important; } .mobile-pt200 { padding-top:200px !important; } .mobile-pt300 { padding-top:300px !important; } .mobile-pt-1 { padding-top:-1px !important; } .mobile-pt-2 { padding-top:-2px !important; } .mobile-pt-3 { padding-top:-3px !important; } .mobile-pt-4 { padding-top:-4px !important; } .mobile-pt-5 { padding-top:-5px !important; } .mobile-pt-10 { padding-top:-10px !important; } .mobile-pt-20 { padding-top:-20px !important; } .mobile-pr0 { padding-right:0px !important; } .mobile-pr1 { padding-right:1px !important; } .mobile-pr2 { padding-right:2px !important; } .mobile-pr3 { padding-right:3px !important; } .mobile-pr4 { padding-right:4px !important; } .mobile-pr5 { padding-right:5px !important; } .mobile-pr6 { padding-right:6px !important; } .mobile-pr7 { padding-right:7px !important; } .mobile-pr8 { padding-right:8px !important; } .mobile-pr9 { padding-right:9px !important; } .mobile-pr10 { padding-right:10px !important; } .mobile-pr12 { padding-right:12px !important; } .mobile-pr15 { padding-right:15px !important; } .mobile-pr16 { padding-right:16px !important; } .mobile-pr20 { padding-right:20px !important; } .mobile-pr24 { padding-right:24px !important; } .mobile-pr25 { padding-right:25px !important; } .mobile-pr30 { padding-right:30px !important; } .mobile-pr32 { padding-right:32px !important; } .mobile-pr40 { padding-right:40px !important; } .mobile-pr50 { padding-right:50px !important; } .mobile-pr60 { padding-right:60px !important; } .mobile-pr70 { padding-right:70px !important; } .mobile-pr80 { padding-right:80px !important; } .mobile-pr90 { padding-right:90px !important; } .mobile-pr-1 { padding-right:-1px !important; } .mobile-pr-2 { padding-right:-2px !important; } .mobile-pr-3 { padding-right:-3px !important; } .mobile-pr-4 { padding-right:-4px !important; } .mobile-pr-5 { padding-right:-5px !important; } .mobile-pl0 { padding-left:0px !important; } .mobile-pl1 { padding-left:1px !important; } .mobile-pl2 { padding-left:2px !important; } .mobile-pl3 { padding-left:3px !important; } .mobile-pl4 { padding-left:4px !important; } .mobile-pl5 { padding-left:5px !important; } .mobile-pl6 { padding-left:6px !important; } .mobile-pl7 { padding-left:7px !important; } .mobile-pl8 { padding-left:8px !important; } .mobile-pl9 { padding-left:9px !important; } .mobile-pl10 { padding-left:10px !important; } .mobile-pl12 { padding-left:12px !important; } .mobile-pl15 { padding-left:15px !important; } .mobile-pl16 { padding-left:16px !important; } .mobile-pl20 { padding-left:20px !important; } .mobile-pl24 { padding-left:24px !important; } .mobile-pl25 { padding-left:25px !important; } .mobile-pl30 { padding-left:30px !important; } .mobile-pl32 { padding-left:32px !important; } .mobile-pl40 { padding-left:40px !important; } .mobile-pl50 { padding-left:50px !important; } .mobile-pl60 { padding-left:60px !important; } .mobile-pl70 { padding-left:70px !important; } .mobile-pl80 { padding-left:80px !important; } .mobile-pl90 { padding-left:90px !important; } .mobile-pl100 { padding-left:100px !important; } .mobile-pl-1 { padding-left:-1px !important; } .mobile-pl-2 { padding-left:-2px !important; } .mobile-pl-3 { padding-left:-3px !important; } .mobile-pl-4 { padding-left:-4px !important; } .mobile-pl-5 { padding-left:-5px !important; } .mobile-r0 { border-radius:0 !important; } .mobile-r1 { border-radius:1px !important; } .mobile-r2 { border-radius:2px !important; } .mobile-r3 { border-radius:3px !important; } .mobile-r4 { border-radius:4px !important; } .mobile-r5 { border-radius:5px !important; } .mobile-r6 { border-radius:6px !important; } .mobile-r7 { border-radius:7px !important; } .mobile-r8 { border-radius:8px !important; } .mobile-r9 { border-radius:9px !important; } .mobile-r10 { border-radius:10px !important; } .mobile-r12 { border-radius:12px !important; } .mobile-r16 { border-radius:16px !important; } .mobile-r20 { border-radius:20px !important; } .mobile-r30 { border-radius:30px !important; } .mobile-cgap0 { column-gap:0 !important; } .mobile-cgap1 { column-gap:1px !important; } .mobile-cgap2 { column-gap:2px !important; } .mobile-cgap3 { column-gap:3px !important; } .mobile-cgap4 { column-gap:4px !important; } .mobile-cgap5 { column-gap:5px !important; } .mobile-cgap10 { column-gap:10px !important; } .mobile-cgap15 { column-gap:15px !important; } .mobile-cgap20 { column-gap:20px !important; } .mobile-cgap25 { column-gap:25px !important; } .mobile-cgap30 { column-gap:30px !important; } .mobile-cgap40 { column-gap:40px !important; } .mobile-cgap50 { column-gap:50px !important; } .mobile-rgap0 { row-gap:0 !important; } .mobile-rgap10 { row-gap:10px !important; } .mobile-rgap15 { row-gap:15px !important; } .mobile-rgap20 { row-gap:20px !important; } .mobile-rgap25 { row-gap:25px !important; } .mobile-rgap30 { row-gap:30px !important; } .mobile-rgap40 { row-gap:40px !important; } .mobile-rgap50 { row-gap:50px !important; } .mobile-border-none,.mobile-no-border { border:none !important; } .mobile-border-top-borderlightgray { border-top:1px solid #e1e1e1 !important; } .mobile-textgray { color:#444444 !important; } #debugger > .trigger { display:none; } }