@charset "utf-8";

/**** Reset ****/
body { margin:0; padding:0; border:0; outline:0; background-color:#f3f3f3; color:#333333; font-size:13px; font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,Meiryo,"メイリオ","ＭＳ Ｐゴシック","MS PGothic",Arial,Helvetica,sans-serif; line-height:1.5; 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; }
select,input,textarea { font-family:inherit; font-size:inherit; font-weight:inherit; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
article,aside,dialog,div,figure,footer,header,hgroup,nav,section { display:block; }
a { color:#078d34; text-decoration:none; }
a:hover { color:#31bc60; text-decoration:none; }
a.plain { color:#333333; text-decoration:none; }
a.plain:hover { color:#078d34; text-decoration:none; }
a.caution { color:#d94d38; text-decoration:none; }
a.caution:hover { color:#d94d38; text-decoration:none; opacity:0.75; }
a.disabled { cursor:default; }
a.disabled.lightgray:hover { color:#bbbbbb; }
.pointer { cursor:pointer; }
a.underline,span.underline,em.underline { text-decoration:underline !important; }

/**** Langs ****/
.lang-en,.lang-ja { font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,Meiryo,"メイリオ","ＭＳ Ｐゴシック","MS PGothic",Helvetica,Arial,sans-serif; }
.lang-zh { font-family:"Hiragino Sans GB","Microsoft YaHei","微软雅黑","MS PGothic",Helvetica,Arial,sans-serif; }
.lang-tw { font-family:"Hiragino Sans GB","Microsoft JhengHei","微軟正黑體","MS PGothic",Helvetica,Arial,sans-serif; }
.lang-pt { font-family:Helvetica,Arial,sans-serif; }
.lang-ko { font-family:"Noto Sans KR",Helvetica,Arial,sans-serif; }
.lang-ru { font-family:Helvetica,Arial,sans-serif; }

/**** Form Parts ****/
input { line-height:normal; -webkit-appearance:none; border-radius:0; }
input[type="text"],input[type="password"],input[type="email"],input[type="number"],input[type="tel"],textarea { height:32px; padding:7px 8px 4px 8px; font-size:13px; line-height:19px; vertical-align:middle; color:#000000; background:#ffffff; border:1px solid #cccccc; outline:none; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
input[type="text"]:focus,input[type="password"]:focus,input[type="email"]:focus,input[type="number"]:focus,input[type="tel"]:focus,textarea:focus { background-color:#fdfdfd; }
input[type="text"]:disabled,input[type="password"]:disabled,input[type="email"]:disabled,input[type="number"]:disabled,input[type="tel"]:disabled,textarea:disabled { opacity:0.5; }
textarea { height:auto; -webkit-appearance:none; border-radius:0; }
input::-ms-clear { visibility:hidden; }
::-moz-placeholder { color:#cccccc !important; opacity:1 !important; }
:-ms-input-placeholder { color:#cccccc !important; }
::-webkit-input-placeholder { color:#cccccc !important; }
button::-moz-focus-inner, input::-moz-focus-inner { padding:0; border:0; }
input[type="text"].warning,input[type="password"].warning,input[type="email"].warning,input[type="number"].warning,input[type="tel"].warning,textarea.warning { border-color:#ee0000; }
input[type="text"].green,input[type="password"].green,input[type="email"].green,input[type="number"].green,input[type="tel"].green,textarea.green { border-color:#078d34; color:#078d34; }
input[type="text"].large,input[type="password"].large,input[type="email"].large,input[type="number"].large,input[type="tel"].large { height:64px; padding:10px 16px 8px 16px; font-size:26px; line-height:38px; }
label { line-height:32px; vertical-align:middle; }
label+label { margin-left:10px; }
input[type="checkbox"],input[type="radio"] { display:inline; line-height:32px; vertical-align:middle; margin:0 6px 0 0; }
input[type="checkbox"] { position:relative; top:-1px; }
select { height:32px; font-size:13px; line-height:32px; vertical-align:middle; border:1px solid #cccccc; background:#ffffff; outline:none; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
.form-inline { display:inline-block; height:32px; line-height:32px; vertical-align:middle; }
.form-inline.xlarge,.form-inline.large,.form-inline.small,.form-inline.xsmall,.form-inline.xxsmall { line-height:32px !important; }
.line { display:inline-block; height:32px; line-height:32px; vertical-align:middle; }
.line.xlarge,.line.large,.line.small,.line.xsmall,.line.xxsmall { line-height:32px !important; }
.sline { display:inline-block; height:24px; line-height:24px; vertical-align:middle; }
.sline.small,.sline.xsmall,.sline.xxsmall { line-height:24px !important; }
.caption { display:inline-block; height:26px; line-height:26px; vertical-align:middle; }


/**** Shortcuts of Display, Position ****/
.block { display:block !important; } .inline { display:inline !important; } .inline-block { display:inline-block !important; } .hidden { display:none !important; }
.table { display:table; } .table-cell { display:table-cell; } .table-cell.min { width:1%; }
.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; }
.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-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; }
.fixed-bottom-left { position:fixed !important; bottom:0; left:0; }
.top1px { position:relative; top:1px; } .top2px { position:relative; top:2px; } .top3px { position:relative; top:3px; } .top4px { position:relative; top:4px; } .top5px { position:relative; top:5px; }
.top-1px { position:relative; top:-1px; } .top-2px { position:relative; top:-2px; } .top-3px { position:relative; top:-3px; } .top-4px { position:relative; top:-4px; } .top-5px { position:relative; top:-5px; } .top-8px { position:relative; top:-8px; }
.left1px { position:relative; left:1px; } .left2px { position:relative; left:2px; } .left3px { position:relative; left:3px; }
.left-1px { position:relative; left:-1px; } .left-2px { position:relative; left:-2px; } .left-3px { position:relative; left:-3px; }
.hide { display:none !important; }
.hidden,.overflow-hidden { overflow:hidden; }
.ellipsis { 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; }
.break-all { word-break:break-all; }
.clear { clear:both; zoom:1; } .clear:after { content:''; display:block; clear:both; }
ul.inline { display:block !important; }
ul.inline > li { display:inline; }
ul.inline-block { display:block !important; }
ul.inline-block > li { display:inline-block; }

/**** Shortcuts of Font Style ****/
.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; } .f30px { font-size:30px !important; }
div.xlarge,p.xlarge,span.xlarge,strong.xlarge,em.xlarge,i.xlarge,ul.xlarge,li.xlarge,dl.xlarge,dt.xlarge,dd.xlarge { font-size:18px !important; }
div.large,p.large,span.large,strong.large,em.large,i.large,ul.large,li.large,dl.large,dt.large,dd.large { font-size:16px !important; }
div.small,p.small,span.small,strong.small,em.small,i.small,ul.small,li.small,dl.small,dt.small,dd.small { font-size:12px !important; }
div.xsmall,p.xsmall,span.xsmall,strong.xsmall,em.xsmall,i.xsmall,ul.xsmall,li.xsmall,dl.xsmall,dt.xsmall,dd.xsmall { font-size:11px !important; }
div.xxsmall,p.xxsmall,span.xxsmall,strong.xxsmall,em.xxsmall,i.xxsmall,ul.xxsmall,li.xxsmall,dl.xxsmall,dt.xxsmall,dd.xxsmall { font-size:10px !important; }
div.xxxsmall,p.xxxsmall,span.xxxsmall,strong.xxxsmall,em.xxxsmall,i.xxxsmall,ul.xxxsmall,li.xxxsmall,dl.xxxsmall,dt.xxxsmall,dd.xxxsmall { font-size:9px !important; }
div.small,p.small { line-height:17px; } div.xsmall,p.xsmall { line-height:16px; }
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; }
.clickable { cursor:pointer; }

/**** Color ****/
.green { color:#078d34; }
.red { color:#ee0000; }
.blue { color:#2255aa; }
.orange { color:#d94d38; }
.yellow { color:#fdbe11; }
.gray { color:#999999; }
.lightgray { color:#bbbbbb; }
.blackgray,.darkgray,.lightblack { color:#555555; }
.black { color:#333333; }
.bordergray { color:#cccccc; }
.white { color:#ffffff; }
a.white:hover { color:#ffffff; opacity:0.75; }
a.blackgray:hover,a.darkgray:hover,a.lightblack:hover { color:#078d34; }
a.fb,a.facebook,i.facebook { color:#3b5999; }
a.fb:hover,a.facebook:hover,a:hover > i.facebook { color:#3b5999; opacity:0.75; }
a.google,i.google { color:#dc4e41; }
a.google:hover,a:hover > i.google { color:#dc4e41; opacity:0.75; }

.underline-dotted-green { border-bottom:1px dotted #078d34; }
.underline-dotted-red { border-bottom:1px dotted #ee0000; }
.underline-dotted-blue { border-bottom:1px dotted #2255aa; }
.underline-dotted-orange { border-bottom:1px dotted #d94d38; }
.underline-dotted-yellow { border-bottom:1px dotted #fdbe11; }
.underline-dotted-gray { border-bottom:1px dotted #999999; }
.underline-dotted-lightgray { border-bottom:1px dotted #bbbbbb; }
.underline-dotted-blackgray,.underline-dotted-darkgray,.underline-dotted-lightblack { border-bottom:1px dotted #555555; }
.underline-dotted-black { border-bottom:1px dotted #333333; }
.underline-dotted-bordergray { border-bottom:1px dotted #cccccc; }
.underline-dotted-white { border-bottom:1px dotted #ffffff; }

.border-none,.no-border { border:none; }
.border-green { border-color:#078d34 !important; }
.border-red { border-color:#ee0000 !important; }
.border-orange { border-color:#d94d38 !important; }
.border-yellow { border-color:#fdbe11 !important; }
.border-gray { border-color:#cccccc !important; }
.border-lightgray { border-color:#e1e1e1 !important; }
.border-blackgray,.border-darkgray { border-color:#555555 !important; }
.border-black{ border-color:#333333 !important; }
.border-bordergray{ border-color:#cccccc !important; }
.border-white { border-color:#ffffff !important; }

.bg-none,.bg-transparent { background:transparent !important; }
.bg-white { background:#ffffff !important; }
.bg-green { background:#33a569 !important; }
.bg-lightgreen { background:#f0f6f3 !important; }
.bg-red { background:#ee0000 !important; }
.bg-lightred { background:#ffeeee !important; }
.bg-orange { background:#d94d38 !important; }
.bg-yellow { background:#fdbe11 !important; }
.bg-gray { background:#fcfcfc !important; }
.bg-lightgray { background:#fefefe !important; }
.bg-blackgray,.bg-darkgray { background:#f3f3f3 !important; }
.bg-formfieldgray { background:#f9f9f9 !important; }
.bg-black { background:#333333 !important; }
.bg-dotted { background:#f9f9f9 url("../images/common/bg.dotted.png") top left repeat !important; }
.bg-mesh { background:#f9f9f9 url("../images/common/bg.mesh.png") top left repeat !important; }

.hover-bg-gray:hover { background:#fcfcfc !important; }
.hover-bg-dotted:hover { background:#f9f9f9 url("../images/common/bg.dotted.png") top left repeat !important; }


/**** Shortcuts of Border Style ****/
.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; }
.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-r10 { border-radius:10px 10px 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; }
.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-r10 { border-radius:0 0 10px 10px !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; }

/**** Shortcuts of Opacity ****/
.op25 { opacity:0.25 !important; } .op50 { opacity:0.5 !important; } .op75 { opacity:0.75 !important; } .op90 { opacity:0.9 !important; }
.hover25:hover { opacity:0.25 !important; } .hover50:hover { opacity:0.5 !important; } .hover75:hover { opacity:0.75 !important; } .hover85:hover { opacity:0.85 !important; } .hover90:hover { opacity:0.9 !important; }

/**** Shortcuts of Width, Height, Margin, Padding ****/
.wauto { width:auto !important; }
.w1 { width:1px !important; } .w5 { width:5px !important; }
.w10 { width:10px !important; } .w15 { width:15px !important; } .w20 { width:20px !important; } .w25 { width:25px !important; } .w30 { width:30px !important; } .w40 { width:40px !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; } .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; }
.w225 { width:225px !important; } .w255 { width:255px !important; } .w320 { width:320px !important; } .w720 { width:720px !important; }
.w1p { width:1% !important; } .w10p { width:10% !important; } .w14p { width:14% !important; } .w16p { width:16% !important; } .w17p { width:17% !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; } .w49p { width:49% !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; }
.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; } .minw160 { min-width:160px; } .minw200 { min-width:200px; } .minw250 { min-width:250px; } .minw300 { min-width:300px; } .minw400 { min-width:400px; }
.maxw20 { max-width:20px; } .maxw50 { max-width:50px; } .maxw100 { max-width:100px; } .maxw150 { max-width:150px; } .maxw160 { max-width:160px; } .maxw200 { max-width:200px; } .maxw300 { max-width:300px; } .maxw400 { max-width:400px; }
.minh50 { min-height:50px; } .minh70 { min-height:70px; } .minh100 { min-height:100px; } .minh150 { min-height:150px; } .minh200 { min-height:200px; }
.maxh50 { max-height:50px; } .maxh100 { max-height:100px; } .maxh150 { max-height:150px; } .maxh200 { max-height:200px; }
.hauto { height:auto !important; }
.h8 { height:8px !important; }
.h10 { height:10px !important; } .h15 { height:15px !important; } .h20 { height:20px !important; } .h25 { height:25px !important; } .h30 { height:30px !important; } .h40 { height:40px !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; } .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; }
.h165 { height:165px !important; }
.h1p { height:1% !important; } .h50p { height:50% !important; } .h100p { height:100% !important; }
.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; } .m15 { margin:15px !important; } .m20 { margin:20px !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; } .mb15 { margin-bottom:15px !important; } .mb20 { margin-bottom:20px !important; } .mb25 { margin-bottom:25px !important; } .mb30 { margin-bottom:30px !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; } .mt11 { margin-top:11px !important; } .mt15 { margin-top:15px !important; } .mt20 { margin-top:20px !important; } .mt25 { margin-top:25px !important; } .mt30 { margin-top:30px !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-5 { margin-top:-5px !important; } .mt-10 { margin-top:-10px !important; } .mt-20 { margin-top:-20px !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; } .mr20 { margin-right:20px !important; } .mr30 { margin-right:30px !important; } .mr40 { margin-right:40px !important; } .mr50 { margin-right:50px !important; } .mr60 { margin-right:60px !important; }
.mr-1 { margin-right:-1px !important; } .mr-2 { margin-right:-2px !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; } .ml15 { margin-left:15px !important; } .ml20 { margin-left:20px !important; } .ml25 { margin-left:25px !important; } .ml30 { margin-left:30px !important; } .ml40 { margin-left:40px !important; } .ml50 { margin-left:50px !important; } .ml60 { margin-left:60px !important; }
.ml-1 { margin-left:-1px !important; } .ml-2 { margin-left:-2px !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; } .p15 { padding:15px !important; } .p20 { padding:20px !important; } .p30 { padding:30px !important; } .p40 { padding:40px !important; } .p50 { padding:50px !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; } .pb15 { padding-bottom:15px !important; } .pb20 { padding-bottom:20px !important; } .pb25 { padding-bottom:25px !important; } .pb30 { padding-bottom:30px !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; } .pt20 { padding-top:20px !important; } .pt25 { padding-top:25px !important; } .pt30 { padding-top:30px !important; } .pt35 { padding-top:35px !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; }
.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; } .pr15 { padding-right:15px !important; } .pr20 { padding-right:20px !important; } .pr25 { padding-right:25px !important; } .pr30 { padding-right:30px !important; } .pr35 { padding-right:35px !important; } .pr40 { padding-right:40px !important; } .pr45 { padding-right:45px !important; } .pr50 { padding-right:50px !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; } .pl15 { padding-left:15px !important; } .pl20 { padding-left:20px !important; } .pl25 { padding-left:25px !important; } .pl30 { padding-left:30px !important; } .pl35 { padding-left:35px !important; } .pl40 { padding-left:40px !important; } .pl45 { padding-left:45px !important; } .pl50 { padding-left:50px !important; }
.rotate90deg { transform:rotate(90deg); } .rotate180deg { transform:rotate(180deg); } .rotate270deg { transform:rotate(270deg); }

/**** Icons ****/
.icon, [class^="icon-"], [class*=" icon-"] { font-family:"icon","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,Meiryo,"メイリオ","ＭＳ Ｐゴシック","MS PGothic",Helvetica,Arial,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"; }
.icon-cd:before { content:"\ea3b"; }
.icon-cd2:before { content:"\ed88"; }
.icon-teacher:before { content:"\e9b1"; }
.icon-ticket:before { content:"\ea9f"; }
.icon-coupon:before { content:"\eb5a"; }
.icon-pager-prev:before { content:"\e951"; }
.icon-pager-next:before { content:"\e952"; }
.icon-active,.icon-inactive,.icon-away { background:#ffffff; border:1px solid #078d34; border-radius:4px; height:8px; width:8px; display:inline-block; opacity:0.5; vertical-align:middle; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; position:relative; top:-1px; }
.icon-active { background:#078d34; }
.icon-public,.icon-private { background:#ffffff; border:1px solid #078d34; border-radius:6px; height:12px; width:12px; display:inline-block; opacity:0.5; vertical-align:middle; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; position:relative; top:-1px; }
.icon-public { background:#078d34; }

[class^="icon-lesson-of-"], [class^="icon-play-"] { display:inline-block; margin:0 3px 0 0; background-color:#078d34; color:#ffffff; opacity:0.75; font-size:11px; width:18px; height:18px; line-height:20px; border-radius:9px; text-align:center; vertical-align:middle; }
[class^="icon-lesson-of-"].orange, [class^="icon-play-"].orange { background-color:#d94d38; color:#ffffff; }
.icon-lesson-of-lesson:before { content:"\ea8c"; font-size:10px; position:relative; top:-1px; }
.icon-lesson-of-conversation:before { content:"\e97d"; }
.icon-lesson-of-reading:before { content:"\eaf7"; }
.icon-lesson-of-pronunciation:before { content:"\eaf2"; }
.icon-lesson-of-news:before { content:"\ea0a"; }
.icon-lesson-of-test:before { content:"\ed5d"; font-size:10px; position:relative; top:-1px; }

.icon-play-audio:hover, .icon-play-movie:hover { opacity:0.5; }
.icon-play-audio.shadow, .icon-play-movie.shadow {box-shadow:0 0 2px 1px rgba(255,255,255,0.5); }
.icon-play-audio:before { content:"\ed2e"; }
.icon-play-audio.active { background:#d94d38; opacity:1.0; }
.icon-play-audio.active:before { content:"\ed31"; }
.icon-play-movie:before { content:"\e936"; font-size:10px; position:relative; top:-1px; }

.star { color:#d94d38; }
.impression { color:#078d34; }

/**** 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 { border:1px solid #e1e1e1; }
.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; }

/**** Thumb ****/
.thumb { border:1px solid #cccccc; background-color:#f9f9f9; width:102px; height:102px; vertical-align:middle; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
.thumb.size-XL { width:152px; height:152px; }
.thumb.size-L { width:102px; height:102px; }
.thumb.size-M { width:72px; height:72px; }
.thumb.size-S { width:50px; height:50px; }
.thumb.size-XS { width:30px; height:30px; }
.thumb.size-XXS { width:24px; height:24px; }
.thumb.size-free { width:auto; height:auto; }
.thumb.round.size-XL { border-radius:76px; }
.thumb.round.size-L { border-radius:51px; }
.thumb.round.size-M { border-radius:36px; }
.thumb.round.size-S { border-radius:25px; }
.thumb.round.size-XS { border-radius:15px; }
.thumb.round.size-XXS { border-radius:12px; }
.thumb.hover { cursor:pointer; }
.thumb.hover:hover { opacity:0.75; }
.thumb.zoom:hover { transform:scale(1.1); transition-duration:0.3s; }
.thumb.border-none { border:none; }
dl.with-thumb { display:table; width:100%; }
dl.with-thumb > dt { display:table-cell; width:102px; height:102px; text-align:left; vertical-align:top; }
dl.with-thumb > dt img.thumb { width:102px; height:102px; }
dl.with-thumb > dd { display:table-cell; text-align:left; vertical-align:middle; padding-left:8px; }
dl.with-thumb > dd.min { width:1%; white-space:nowrap; }
dl.with-thumb.size-XL > dt, dl.with-thumb.size-XL > dt img.thumb { width:152px; height:152px; }
dl.with-thumb.size-L > dt, dl.with-thumb.size-L > dt img.thumb { width:102px; height:102px; }
dl.with-thumb.size-M > dt, dl.with-thumb.size-M > dt img.thumb { width:72px; height:72px; }
dl.with-thumb.size-S > dt, dl.with-thumb.size-S > dt img.thumb { width:50px; height:50px; }
dl.with-thumb.size-XS > dt, dl.with-thumb.size-XS > dt img.thumb { width:30px; height:30px; }
dl.with-thumb.size-XXS > dt, dl.with-thumb.size-XXS > dt img.thumb { width:24px; height:24px; }
dl.with-thumb.round.size-XL > dt img.thumb { border-radius:76px; }
dl.with-thumb.round.size-L > dt img.thumb { border-radius:51px; }
dl.with-thumb.round.size-M > dt img.thumb { border-radius:36px; }
dl.with-thumb.round.size-S > dt img.thumb { border-radius:25px; }
dl.with-thumb.round.size-XS > dt img.thumb { border-radius:15px; }
dl.with-thumb.zoom > dt img.thumb { transition-duration:0.3s; }
dl.with-thumb.zoom:hover > dt img.thumb { transform:scale(1.1); transition-duration:0.3s; }

.with-circle { border:none; background:#eaf6f0; width:102px; height:102px; border-radius:51px; padding:6px; text-align:center; vertical-align:middle; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
.with-circle > .inner { width:100%; height:100%; padding:10px; border:1px solid #C1E3D2; background:#ffffff; border-radius:45px; text-align:center; vertical-align:middle; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
.with-circle > .inner img { max-width:100%; max-height:100%; }
.with-circle.size-XL { width:152px; height:152px; border-radius:76px; }
.with-circle.size-L { width:102px; height:102px; border-radius:51px; }
.with-circle.size-M { width:72px; height:72px; border-radius:36px; }
.with-circle.size-S { width:50px; height:50px; border-radius:25px; }
.with-circle.size-XS { width:30px; height:30px; border-radius:15px; }
.with-circle.size-XXS { width:24px; height:24px; border-radius:12px; }

/**** Label ****/
.label { display:inline-block; font-size:12px; line-height:22px; padding:0 4px 0 4px; font-weight:normal; vertical-align:middle; background:transparent; border:1px solid #999999; border-radius:2px; color:#999999; }
.label.small { font-size:11px !important; line-height:16px; padding:1px 4px 0 4px; }
.label.clickable a { color:inherit; }
.label.clickable:hover { opacity:0.75; }
.label.clickable:hover a { opacity:0.75; }
.label.green { border-color:#078d34; color:#078d34; }
.label.red { border-color:#ee0000; color:#ee0000; }
.label.orange { border-color:#d94d38; color:#d94d38; }
.label.yellow { border-color:#fdbe11; color:#fdbe11; }
.label.gray { border-color:#999999; color:#999999; }
.label.lightgray { border-color:#bbbbbb; color:#bbbbbb; }
.label.blackgray,.label.darkgray { border-color:#555555; color:#555555; }
.label.black { border-color:#333333; color:#333333; }
.label.bordergray { border-color:#cccccc; color:#cccccc; }
.label.white { border-color:#ffffff; color:#ffffff; }
.label.active { border-color:#078d34; color:#078d34; }
.label.inactive { border-color:#999999; color:#999999; }
.label.dotted { border-color:#777777; background:#f9f9f9 url("../images/common/bg.dotted.png") top left repeat !important; color:#777777; }
.label.ticket, .label.coupon { padding:0 8px 0 14px; background:#f6f6f6; border-color:#cccccc; color:#666666; position:relative; }
.label.ticket:before, .label.coupon:before { content:""; display:inline-block; width:4px; height:4px; background:#ffffff; border:1px solid #cccccc; border-radius:4px; position:absolute; top:7px; left:4px; }
.label.ticket.invalid, .label.coupon.invalid { opacity:0.75; color:#888888; }
a:hover > .label.ticket, a:hover > .label.coupon { color:#078d34; }

.label.site { font-size:10px !important; line-height:12px; padding:2px 2px 0 2px; border-color:#999999; color:#999999; }

/**** Tag ****/
.tag { display:inline-block; font-size:12px; line-height:22px; padding:0 6px 0 6px; font-weight:normal; vertical-align:middle; background:#999999; border:1px solid #999999; border-radius:3px; color:#ffffff; }
.tag.small { font-size:11px !important; line-height:16px; padding:1px 5px 0 5px; }
.tag.xsmall { font-size:10px !important; line-height:12px; padding:1px 4px 0 4px; }
.tag.clickable a { color:inherit; }
.tag.clickable:hover { opacity:0.75; }
.tag.clickable:hover a { opacity:0.75; }
.tag.green { border-color:#319a60; background:#319a60; }
.tag.red { border-color:#ee0000; background:#ee0000; }
.tag.orange { border-color:#d94d38; background:#d94d38; }
.tag.yellow { border-color:#fdbe11; background:#fdbe11; }
.tag.gray { border-color:#999999; background:#999999; }
.tag.lightgray { border-color:#bbbbbb; background:#bbbbbb; }
.tag.blackgray,.tag.darkgray { border-color:#555555; background:#555555; }
.tag.black { border-color:#333333; background:#333333; }
.tag.bordergray { border-color:#cccccc; background:#cccccc; }
.tag.dotted { border-color:#777777; background:#f9f9f9 url("../images/common/bg.dotted.png") top left repeat !important; color:#777777; }
.tag.site { font-size:10px !important; line-height:12px; padding:1px 3px 0 3px; border-color:#bbbbbb; background:#bbbbbb; }
.tag:hover > a.white { color:#ffffff; opacity:0.75; }

/**** Circle ****/
.circle { display:inline-block; margin:0 3px 0 0; background-color:#d0d2d9; color:#ffffff; font-weight:bold; font-size:12px; width:22px; height:22px; line-height:22px; border-radius:11px; text-align:center; vertical-align:middle; }
.circle.small { font-weight:normal; font-size:10px !important; width:18px; height:18px; line-height:20px; border-radius:9px; }
.circle.large { font-weight:normal; font-size:18px !important; width:32px; height:32px; line-height:32px; border-radius:16px; }
.circle.size-XS { font-size:16px; width:30px; height:30px; line-height:30px; border-radius:15px; }
a.circle { color:#ffffff; opacity:0.75; }
a.circle:hover { opacity:1.0; }
.circle.green { background:#319a60; }
.circle.red { background:#ee0000; }
.circle.orange { background:#d94d38; }
.circle.yellow { background:#fdbe11; }
.circle.gray { background:#999999; }
.circle.lightgray { background:#bbbbbb; }
.circle.blackgray,.circle.darkgray { background:#555555; }
.circle.black { background:#333333; }
.circle.bordergray { background:#cccccc; }

/**** Role ****/
.role { display:inline-block; vertical-align:middle; padding-left:20px; position:relative; }
.role + .label { margin-left:6px; }
.role + .label.site, .role + .tag.site { position:relative; top:-1px; margin-left:6px; }
.role:before { display:inline-block; font-family:"icon"; color:#bbbbbb; position:absolute; left:0; }
.role.student:before { content:"\ebc4"; }
.role.teacher:before { content:"\e95f"; top:1px; }
.role.staff:before { content:"\eab9"; }
.role.site-manager:before, .role.site_manager:before { content:"\ebc9"; }
.role.company-manager:before, .role.company_manager:before { content:"\ebc9"; font-size:12px; }
.role.school-manager:before, .role.school:before { content:"\ebc9"; }

/**** Paragraph ****/
.paragraph-with-first-upper > p:first-letter { font-size:20px; font-weight:bold; margin-right:1px; }
.paragraph-with-first-upper > p + p { margin-top:5px;  }

/**** Box ****/
.box { border:1px solid #cccccc; background:#ffffff; text-align:left; vertical-align:top; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
.box.border-top { border:none; border-top:1px solid #cccccc; }
.box.border-bottom { border:none; border-bottom:1px solid #cccccc; }
.box.border-top-bottom { border:none; border-top:1px solid #cccccc; border-bottom:1px solid #cccccc; }
.box.border-none,.box.no-border { border:none; }
.box.clickable { cursor:pointer; }
.box.hover:hover { background:#f6f6f6; }

.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.sticky { border-radius:4px; padding:15px 15px 15px 35px; }
.box.sticky:before { display:block; content:""; width:20px; height:100%; background:#f7f9f8; border-radius:4px 0 0 4px; position:absolute; top:0; left:0; }


.box .box-inner { border-top:1px solid #e1e1e1; }
.box .box-inner.border-top { border-top:1px solid #e1e1e1; }
.box .box-inner.border-bottom { border-bottom:1px solid #e1e1e1; }
.box .box-inner.border-bottom-only { border:none; border-bottom:1px solid #e1e1e1; }
.box .box-inner.border-left { border-left:1px solid #e1e1e1; }
.box .box-inner.border-right { border-right:1px solid #e1e1e1; }
.box .box-inner.border-none { border:none; }

.box .box-list + .box-list { border-top:1px solid #e1e1e1; }
.box .box-list.hover:hover { background:#f6f6f6; }
.box .box-list.border-top { border-top:1px solid #e1e1e1; }
.box .box-list.border-bottom { border-bottom:1px solid #e1e1e1; }
.box .box-list.border-left { border-left:1px solid #e1e1e1; }
.box .box-list.border-right { border-right:1px solid #e1e1e1; }
.box .box-list.border-none { border:none; }


/**** List ****/
ul.list {}
ul.list.border-top { border-top:1px solid #e1e1e1; }
ul.list.border-bottom { border-bottom:1px solid #e1e1e1; }
ul.list > li { padding:8px; line-height:26px; vertical-align:middle; position:relative; }
ul.list > li + li { border-top:1px solid #e1e1e1; }
ul.list.hover > li:hover { background:#f6f6f6; }
ul.list > li.divider { padding:0; height:1px; }
ul.list > li > a.more { position:absolute; top:50%; right:0; color:#cccccc; }
ul.list > li > a.more:hover { color:#078d34; }
ul.list > li > a.more:before { content:"\e92a"; font-family:"icon"; display:inline-block; width:32px; font-size:12px; line-height:32px; position:relative; top:-16px; text-align:center; vertical-align:middle; }
ul.list.no-line-height > li { line-height:1.5; }
ul.list.border-dotted > li + li { border-top:1px dotted #e1e1e1; }
ul.list.border-dotted.border-top { border-top:1px dotted #e1e1e1; }
ul.list.border-dotted.border-bottom { border-bottom:1px dotted #e1e1e1; }

ul.list.link > li:hover { background:#f6f6f6; }
ul.list.link > li { padding:0; }
ul.list.link > li > a { display:block; padding:8px 32px 8px 8px; line-height:26px; vertical-align:middle; position:relative; }
ul.list.link > li > a:before { content:"\e92a"; font-family:"icon"; color:#cccccc; display:inline-block; position:absolute; right:10px; line-height:26px; vertical-align:middle; }
ul.list.link > li.no-icon > a:before { display:none; }
ul.list.link > li.disabled > a, ul.list.link > li > a.disabled { opacity:0.5; cursor:default; }
ul.list.link > li.disabled:hover { background:inherit; }

ul.list-decimal { padding-left:30px; }
ul.list-decimal > li { list-style-type:decimal; }
ul.list-disc { padding-left:30px; }
ul.list-disc > li { list-style-type:disc; }
ul.list-lower-roman { padding-left:30px; }
ul.list-lower-roman > li { list-style-type:lower-roman; }

dl.list { display:table; width:100%; }
dl.list.border-top { border-top:1px solid #e1e1e1; }
dl.list.border-bottom { border-bottom:1px solid #e1e1e1; }
dl.list + dl.list { border-top:1px solid #e1e1e1; }
dl.list > dt, dl.list > dd { display:table-cell; padding:8px; line-height:26px; text-align:left; vertical-align:middle; }
dl.list.hover:hover { background:#f6f6f6; }
dl.list.no-line-height > dt, dl.list.no-line-height > dd { line-height:1.5; }

table.list { border:1px solid #cccccc; border-collapse:collapse; background:#ffffff; width:100%; }
table.list > thead > tr > th { border:1px solid #cccccc; border-collapse:collapse; background:#f0f0f0; padding:4px; color:#666666; font-weight:bold; font-size:11px; line-height:17px; text-align:center; vertical-align:middle; /*position:relative;*/ }
table.list > thead > tr > th:before { content:""; display:block; position:absolute; top:0; left:0; width:100%; height:1px; border-top:1px solid #f9f9f9; }
table.list > thead > tr > th div.ellipsis { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; word-break:break-all; }
table.list > thead > tr > th a.sort { color:#666666; white-space:nowrap; }
table.list > thead > tr > th a.sort:before { content:"\e94c"; font-family:"icon"; vertical-align:middle; padding:0 2px 0 0; }
table.list > thead > tr > th a.sort:hover { color:#078d34; }
table.list > thead > tr > th a.sort.asc:before { content:"\e953"; opacity:1.0; display:inline-block; }
table.list > thead > tr > th a.sort.desc:before { content:"\e950"; opacity:1.0; display:inline-block; }
table.list > thead > tr > th.border-left-double { border-left:3px double #cccccc; }
table.list > thead > tr > th.border-right-double { border-right:3px double #cccccc; }
table.list > thead > tr > th.min { width:1%; white-space:nowrap; }
table.list > thead > tr > th div.ellipsis { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; word-break:break-all; }
table.list > tbody > tr > td { border:1px solid #cccccc; border-collapse:collapse; padding:8px; text-align:left; vertical-align:middle; font-size:13px; line-height:20px; }
table.list > tbody > tr > td.min { width:1%; white-space:nowrap; }
table.list > tbody > tr.vt > td { vertical-align:top; }
table.list > tbody > tr.bg-dotted > td { background:#f9f9f9 url("../images/common/bg.dotted.png") top left repeat !important; }
table.list > tbody > tr.invalid > td { background:#f9f9f9; color:#aaaaaa; }
table.list > tbody > tr > td.invalid { background:#f9f9f9; color:#aaaaaa; }
table.list > tbody > tr.no-results > td { padding:40px; text-align:center; color:#999999; background-color:#fcfcfc; }
table.list > tbody > tr > td.border-left-double { border-left:3px double #cccccc; }
table.list > tbody > tr > td.border-right-double { border-right:3px double #cccccc; }
table.list > tbody > tr > td.border-top-double { border-top:3px double #cccccc; }
table.list > tbody > tr.divider > td { font-size:11px; color:#858da3; padding:2px; text-align:center; vertical-align:middle; background:#f9f9f9; }
table.list > tfoot > tr > td { border:1px solid #cccccc; border-collapse:collapse; padding:10px 8px 8px 8px; text-align:left; vertical-align:middle; font-size:13px; line-height:20px; position:relative; }
table.list > tfoot > tr > td:after { content:""; display:block; height:1px; border-top:1px solid #cccccc; position:absolute; top:1px; left:0; width:100%; }
table.list.hover > tbody > tr:hover > td { background:#f9f9f9; }
table.list.hover > tbody > tr.no-results:hover > td { background:#fcfcfc; }
table.list.hover > tbody > tr.invalid:hover > td { background:#f9f9f9; }
table.list.hover > tbody > tr:hover > td.invalid { background:#f9f9f9; }
table.list.hover > tbody > tr.divider:hover > td { background:#f9f9f9; }
table.list.no-border-side { border-left:none; border-right:none; }
table.list.no-border-side > thead > tr > th:first-child { border-left:none; }
table.list.no-border-side > thead > tr > th:last-child { border-right:none; }
table.list.no-border-side > tbody > tr > td:first-child { border-left:none; }
table.list.no-border-side > tbody > tr > td:last-child { border-right:none; }
/* light face */
table.list.light {  }
table.list.light > thead > tr > th { background:#f9f9f9; }
table.list.light > thead > tr > th:before { border-color:#ffffff; }
table.list.light.hover > tbody > tr:hover > td { background:#fdfdfe; }
/* plain face */
table.list.plain {  }
table.list.plain > thead > tr > th { background:#f9f9f9; }
table.list.plain > thead > tr > th:before { border-color:#ffffff; }
table.list.plain > tbody > tr > td { background:#ffffff; }
table.list.plain.hover > tbody > tr:hover > td { background:#fdfdfe; }
/* calendar face */
table.list.calendar > thead > tr > th { width:14%; }
table.list.calendar > thead > tr > th.sun, .x-calendar > thead > tr > th.sat { width:15%; }
table.list.calendar > tbody > tr > td { position:relative; padding:4px; text-align:left; vertical-align:top; }
table.list.calendar > tbody > tr > td > em { display:block; padding:0 2px 4px 0; font-size:12px; text-align:right; }
/* border */
table.list.border-darkgray { border:1px solid #666666; }
table.list.border-darkgray > tbody > tr > td { border:1px solid #666666; }

/**** Grid ****/
ul.grid {}
ul.grid.border-top { border-top:1px solid #e1e1e1; }
ul.grid.border-bottom { border-bottom:1px solid #e1e1e1; }
ul.grid.border-left { border-left:1px solid #e1e1e1; }
ul.grid.border-right { border-right:1px solid #e1e1e1; }
ul.grid.border { border:1px solid #e1e1e1; }
ul.grid > li { display:table; width:100%; }
ul.grid > li + li { border-top:1px solid #e1e1e1; }
ul.grid > li > .inner { display:table-cell; text-align:left; vertical-align:middle; padding:8px; line-height:26px; }
ul.grid > li > .inner + .inner { border-left:1px solid #e1e1e1; }
ul.grid > li > .inner.min { width:1%; white-space:nowrap; }
ul.grid > li.divider { padding:0; height:1px; }

div.grid { display:table; width:100%; }
div.grid.border-top: { border-top:1px solid #e1e1e1; }
div.grid.border-bottom { border-bottom:1px solid #e1e1e1; }
div.grid.border-left { border-left:1px solid #e1e1e1; }
div.grid.border-right { border-right:1px solid #e1e1e1; }
div.grid.border { border:1px solid #e1e1e1; }
div.grid + div.grid { border-top:1px solid #e1e1e1; }
div.grid > div { display:table-cell; text-align:left; vertical-align:middle; }
div.grid > div + div { border-left:1px solid #e1e1e1; }
div.grid > div.min { width:1%; white-space:nowrap; }
div.grid.divider { padding:0; height:1px; }

/**** dl table ****/
dl.table { display:table; }
dl.table > dt { display:table-cell; vertical-align:top; }
dl.table > dd { display:table-cell; vertical-align:top; }
dl.table > dt.min,
dl.table > dd.min { width:1%; white-space:nowrap; }

/**** ul table ****/
ul.table { display:table; }
ul.table > li { display:table-cell; }

/**** text-tabs ****/
ul.text-tabs {}
ul.text-tabs > li { display:inline-block; margin-right:10px; }
ul.text-tabs > li > a { font-weight:bold; color:#bbbbbb; text-decoration:none; }
ul.text-tabs > li > a:hover { color:#078d34; }
ul.text-tabs > li > a:before { content:"|"; display:inline-block; margin-right:13px; font-weight:normal; color:#bbbbbb; }
ul.text-tabs > li:first-child > a:before { display:none; }
ul.text-tabs > li.active > a { color:#333333; }
ul.text-tabs > li.active > a:hover { color:#078d34; }


/**** slider ****/
.slider { width:100%; overflow-x:scroll !important; overflow-y:hidden !important; -webkit-overflow-scrolling:touch; }
.slider > ul { display:block; padding:0 0 15px 0; white-space:nowrap; }
.slider > ul > li { display:inline-block; vertical-align:top; }
.slider > ul > li > img { width:220px; min-height:80px; border:1px solid #cccccc; background-color:#f9f9f9; cursor:pointer; }


/**** form > radio button ****/
.form-radio { display:inline-block; position:relative; padding:0 8px 0 0; min-width:40px; height:32px; line-height:32px; font-size:13px; vertical-align:middle; background:transparent; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; user-select:none; -moz-user-select:none; -webkit-user-select:none; -ms-user-select:none; }
.form-radio:before { content:""; display:inline-block; position:absolute; top:7px; left:0; width:16px; height:16px; border:1px solid #cccccc; border-radius:8px; background:#ffffff; }
.form-radio.checked:after { content:""; display:inline-block; position:absolute; top:12px; left:5px; width:8px; height:8px; background:#000000; border-radius:4px; }
.form-radio > label { padding:0 0 0 24px; }
.form-radio.disabled { opacity:0.25; }
.form-radio.radio-only { padding:0; min-width:18px; width:18px; }
.form-radio.radio-only > label { padding:0; }
.form-radio.wide-span > label { padding-left:25px; }
.form-radio.emphasize > label { color:#bbbbbb; }
.form-radio.emphasize.checked::before { border-color:#078d34; }
.form-radio.emphasize.checked:after { background:#078d34; }
.form-radio.emphasize.checked > label { color:#078d34; }
.form-radio.emphasize.disabled { opacity:0.5; }
.form-radio.emphasize-orange > label { color:#bbbbbb; }
.form-radio.emphasize-orange.checked::before { border-color:#d94d38; }
.form-radio.emphasize-orange.checked:after { background:#d94d38; }
.form-radio.emphasize-orange.checked > label { color:#d94d38; }
.form-radio.emphasize-orange.disabled { opacity:0.5; }
.form-radio.green > label { color:#333333; }
.form-radio.green.checked::before { border-color:#078d34; }
.form-radio.green.checked:after { background:#078d34; }
.form-radio.green.checked > label { color:#078d34; }
.form-radio.orange > label { color:#333333; }
.form-radio.orange.checked::before { border-color:#d94d38; }
.form-radio.orange.checked:after { background:#d94d38; }
.form-radio.orange.checked > label { color:#d94d38; }
.form-radio.warning:before { border-color:#ee0000; }
.form-radio.warning.checked:after { background-color:#ee0000; }
.form-radio.warning > label { color:#ee0000; }
.form-radio.hauto { height:auto; min-height:32px; }

/**** form > checkbox ****/
.form-checkbox { display:inline-block; position:relative; padding:0 8px 0 0; min-width:40px; height:32px; line-height:32px; font-size:13px; vertical-align:middle; background:transparent; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; user-select:none; -moz-user-select:none; -webkit-user-select:none; -ms-user-select:none; }
.form-checkbox:before { content:""; display:inline-block; position:absolute; top:7px; left:0; width:16px; height:16px; border:1px solid #cccccc; background:#ffffff; }
.form-checkbox.checked:after { content:"\ed15"; font-family:"icon"; display:inline-block; position:absolute; top:0; left:3px; font-size:12px; line-height:32px; vertical-align:middle; color:#000000; }
.form-checkbox.placeholder:after { content:"\ed15"; font-family:"icon"; display:inline-block; position:absolute; top:0; left:3px; font-size:12px; line-height:32px; vertical-align:middle; color:#cccccc; }
.form-checkbox > label { padding:0 0 0 24px; }
.form-checkbox > input { display:none; }
.form-checkbox.disabled { opacity:0.25; }
.form-checkbox.box-only { padding:0; min-width:18px; width:18px; }
.form-checkbox.box-only > label { padding:0; }
.form-checkbox.wide-span > label { padding-left:25px; }
.form-checkbox.emphasize > label { color:#bbbbbb; }
.form-checkbox.emphasize.checked > label { color:#078d34; }
.form-checkbox.emphasize.checked:before { border-color:#078d34; }
.form-checkbox.emphasize.checked:after { color:#078d34; }
.form-checkbox.emphasize-orange > label { color:#bbbbbb; }
.form-checkbox.emphasize-orange.checked > label { color:#d94d38; }
.form-checkbox.emphasize-orange.checked:before { border-color:#d94d38; }
.form-checkbox.emphasize-orange.checked:after { color:#d94d38; }
.form-checkbox.green > label { color:#333333; }
.form-checkbox.green.checked > label { color:#078d34; }
.form-checkbox.green.checked:before { border-color:#078d34; }
.form-checkbox.green.checked:after { color:#078d34; }
.form-checkbox.orange > label { color:#333333; }
.form-checkbox.orange.checked > label { color:#d94d38; }
.form-checkbox.orange.checked:before { border-color:#d94d38; }
.form-checkbox.orange.checked:after { color:#d94d38; }
.form-checkbox.warning > label,.form-checkbox.warning.checked > label { color:#ee0000; }
.form-checkbox.warning:before,.form-checkbox.warning.checked:before { border-color:#ee0000; }
.form-checkbox.warning.checked:after { color:#ee0000; }
.form-checkbox.label { display:inline-block; min-width:auto; height:auto; line-height:32px; font-size:12px; padding:0 8px 0 8px; font-weight:normal; vertical-align:middle; background:transparent; border:1px solid #cccccc; border-radius:3px; color:#999999; cursor:pointer; }
.form-checkbox.label.small { font-size:12px; line-height:22px; padding:1px 6px 0 6px; }
.form-checkbox.label:before { display:none; }
.form-checkbox.label > label { padding:0; line-height:inherit; cursor:pointer; }
.form-checkbox.label.checked:after { display:none; }
.form-checkbox.label.checked { border-color:#078d34; color:#078d34; _background:#f0f6f3; }



/**** form > switch ****/
.form-switch { display:inline-block; position:relative; padding:0; width:36px; height:32px; line-height:32px; font-size:13px; vertical-align:middle; background:transparent; user-select:none; -moz-user-select:none; -webkit-user-select:none; -ms-user-select:none; cursor:pointer; text-align:left; }
.form-switch > input { display:none; }
.form-switch .container { display:inline-block; position:absolute; top:8px; background:#f9f9f9; border:1px solid #cccccc; border-radius:10px; height:20px; width:100%; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
.form-switch .button { display:inline-block; position:absolute; top:9px; left:1px; background:#ffffff; border:1px solid transparent; box-shadow:0 0 1px 0 rgba(0,0,0,0.5); border-radius:9px; height:18px; width:18px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
.form-switch.on .container { border:1px solid #66cc99; background:#66cc99; }
.form-switch.on .button { left:17px; }
.form-switch.disabled { opacity:0.6; cursor:default; }
.form-switch.on.disabled { opacity:0.25; }
.form-switch.warning .container { border-color:#ee0000; background:#ffeeee; }
.form-switch.warning.on .container { background:#ffaaaa; }

/**** form > date ****/
.form-date { display:inline-block; position:relative; }

/**** form > select ****/
.form-select { display:inline-block; position:relative; cursor:pointer; padding:0 32px 0 0; height:32px; line-height:32px; font-size:13px; vertical-align:middle; border:1px solid #cccccc; background:#ffffff; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; user-select:none; -moz-user-select:none; -webkit-user-select:none; -ms-user-select:none; }
.form-select > label { display:block; padding:0 8px 0 8px; vertical-align:middle; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; -webkit-text-overflow:ellipsis; }
.form-select > label.placeholder { color:#cccccc; }
.form-select > div { display:none; position:absolute; top:30px; left:-1px; z-index:100; min-width:100px; max-height:200px; overflow-x:hidden; overflow-y:auto; background:#ffffff; border-bottom:1px solid #cccccc; }
.form-select > div > button { display:block; width:100%; border:1px solid #cccccc; border-bottom:none; padding:0 30px 0 8px; line-height:31px; font-size:13px; font-weight:normal; text-align:left; vertical-align:middle; white-space:nowrap; }
.form-select > div > button:hover,.form-select > div > button.selected { background-color:#f0f0f0; }
.form-select > div > button:active { color:inherit; }
.form-select > div > button.disabled { background-color:#f0f0f0; color:#999999; }
.form-select > div > label { display:block; border:1px solid #cccccc; border-bottom:none; background:#f9f9f9 url("../images/common/bg.dotted.png") top left repeat; padding:2px 8px 0 8px; line-height:22px; font-size:11px; color:#aaaaaa; font-weight:normal; text-align:left; vertical-align:middle; white-space:nowrap; }
.form-select > a.carret { outline:none; position:absolute; bottom:0; right:0; }
.form-select > a.carret:after { content:"\e928"; font-family:"icon"; display:inline-block; position:absolute; bottom:-1px; right:-1px; width:32px; height:32px; line-height:32px; font-size:10px; text-align:center; vertical-align:middle; color:#747474; background:#ffffff; border:1px solid #cccccc; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
.form-select.disabled { cursor:default; opacity:0.5; }
.form-select.disabled > label { cursor:default; }
.form-select.disabled > a.carret { cursor:default; }
.form-select.disabled > a.carret:after { color:#cccccc; cursor:default; }
.form-select.emphasize > label { color:#078d34; }
.form-select.warning { border-color:#ee0000; }
.form-select.warning > label { color:#ee0000; }
.form-select.warning > a.carret:after { border-color:#ee0000; color:#ee0000; }
.form-select.green { border-color:#078d34; }
.form-select.green > label { color:#078d34; }
.form-select.green > a.carret:after { border-color:#078d34; color:#078d34; }

/**** form > ym ****/
.form-ym { display:inline-block; position:relative; }


/**** form > suggest ****/
.form-suggest { display:inline-block; position:relative; cursor:pointer; padding:0 32px 0 0; height:32px; line-height:32px; font-size:13px; vertical-align:middle; border:1px solid #cccccc; background:#ffffff; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; user-select:none; -moz-user-select:none; -webkit-user-select:none; -ms-user-select:none; }
.form-suggest > label { display:block; padding:0 8px 0 8px; vertical-align:middle; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; -webkit-text-overflow:ellipsis; }
.form-suggest > label.placeholder { color:#cccccc; }
.form-suggest > input[type="text"].keyword { position:absolute; top:-1px; left:-1px; }
.form-suggest > div { position:absolute; top:30px; left:-1px; z-index:100; min-width:100px; max-height:200px; overflow-x:hidden; overflow-y:auto; background:#ffffff; border-bottom:1px solid #cccccc; }
.form-suggest > div > button { display:block; width:100%; border:1px solid #cccccc; border-bottom:none; padding:0 30px 0 8px; line-height:30px; font-size:12px; font-weight:normal; text-align:left; vertical-align:middle; white-space:nowrap; }
.form-suggest > div > button.selected,
.form-suggest > div > button:hover { background-color:#f0f0f0; }
.form-suggest > div > button:active { color:inherit; }
.form-suggest > a.clear { outline:none; position:absolute; bottom:0; right:0; }
.form-suggest > a.clear:after { content:"\ed14"; font-family:"icon"; display:inline-block; position:absolute; bottom:-1px; right:-1px; width:32px; height:32px; line-height:32px; font-size:8px; text-align:center; vertical-align:middle; color:#cccccc; background:#ffffff; border:1px solid #cccccc; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
.form-suggest.disabled > label { color:#999999; }
.form-suggest.disabled > a.clear:after { color:#cccccc; }
.form-suggest.emphasize > label { color:#078d34; }
.form-suggest.emphasize > label.placeholder { color:#cccccc; }
.form-suggest.warning { border-color:#ee0000; }
.form-suggest.warning > label { color:#ee0000; }
.form-suggest.warning > label.placeholder { color:#cccccc; }
.form-suggest.warning > input[type="text"].keyword { border-color:#ee0000; }
.form-suggest.warning > a.clear:after { border-color:#ee0000; color:#ee0000; }

/**** form > image-uploader ****/
.form-image-uploader { display:inline-block; position:relative; width:102px; height:102px; border:1px solid #e1e1e1; background:#f9f9f9; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
.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 > img { width:100%; }
.form-image-uploader > .progress { display:none; position:absolute; top:0; left:0; z-index:2; width:100%; height:100%; background:rgba(0,0,0,0.25); }
.form-image-uploader > .progress .indicator { position:absolute; top:50%; left:50%; }
.form-image-uploader > .mask { display:none; position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; background:rgba(0,0,0,0.25); cursor:pointer; }
.form-image-uploader > .mask > i { position:absolute; top:0; right:4px; cursor:pointer; }
.form-image-uploader > .mask > i:hover { opacity:0.75; }
.form-image-uploader:hover > .mask { display:block; }
.form-image-uploader:hover > .mask.processing { display:none; }
.form-image-uploader.disabled { cursor:default; }
.form-image-uploader.disabled:hover > .mask { display:none; }
.form-image-uploader.warning { border-color:#ee0000; }
.form-image-uploader2 { display:inline-block; position:relative; width:102px; height:102px; border:1px solid #e1e1e1; background:#f9f9f9; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
.form-image-uploader2.size-XL { width:152px; height:152px; }
.form-image-uploader2.size-L { width:102px; height:102px; }
.form-image-uploader2.size-M { width:72px; height:72px; }
.form-image-uploader2.size-S { width:50px; height:50px; }
.form-image-uploader2 > img { width:100%; }
.form-image-uploader2 > .progress { display:none; position:absolute; top:0; left:0; z-index:2; width:100%; height:100%; background:rgba(0,0,0,0.25); }
.form-image-uploader2 > .progress .indicator { position:absolute; top:50%; left:50%; }
.form-image-uploader2 > .mask { display:none; position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; background:rgba(0,0,0,0.25); cursor:pointer; }
.form-image-uploader2 > .mask > i { position:absolute; top:0; right:4px; cursor:pointer; }
.form-image-uploader2 > .mask > i:hover { opacity:0.75; }
.form-image-uploader2:hover > .mask { display:block; }
.form-image-uploader2:hover > .mask.processing { display:none; }
.form-image-uploader2.disabled { cursor:default; }
.form-image-uploader2.disabled:hover > .mask { display:none; }
.form-image-uploader2.warning { border-color:#ee0000; }

/**** form > range-* ****/
.form-range-hm { display:inline-block; }
.form-range-hm2 { display:inline-block; }
.form-range-hm3 { display:inline-block; }

/**** form > hm ****/
.form-hm { display:inline-block; }


/**** Tooltip ****/
.tooltip { display:inline-block; border-radius:3px; background:#333333; min-width:30px; padding:4px 8px 3px 8px; font-size:11px; color:#f0f0f0; text-align:center; white-space:nowrap; position:absolute; z-index:2000; pointer-events:none; }
.tooltip:after { content:''; position:absolute; bottom:-8px; left:10px; border-top:10px solid #333333; border-right:6px solid transparent; border-left:6px solid transparent; }
.tooltip.center:after { left:46%; }


/**** Animation ****/

.blink { -webkit-animation:blink_ 0.6s ease-in-out infinite alternate; -moz-animation:blink_ 0.6s ease-in-out infinite alternate; animation:blink_ 0.6s ease-in-out infinite alternate; }
@-webkit-keyframes blink_ { 0% {opacity:0.3;} 100% {opacity:1.0;} }
@-moz-keyframes blink_ { 0% {opacity:0.3;} 100% {opacity:1.0;} }
@keyframes blink_ { 0% {opacity:0.3;} 100% {opacity:1.0;} }

.blink_once { -webkit-animation:blink_ 0.6s ease-in-out alternate; -moz-animation:blink_ 0.6s ease-in-out alternate; animation:blink_ 0.6s ease-in-out alternate; }


/**** DatePicker ****/
.Zebra_DatePicker * { margin:0; padding:0; color:#333333; }
.Zebra_DatePicker { position:absolute; background:#f0f0f0; display:none; z-index:10000; font-size:12px; box-shadow:rgba(0,0,0,0.25) 0 0 5px 0; }
.Zebra_DatePicker table { border-collapse:collapse; border-spacing:0 }
.Zebra_DatePicker td,
.Zebra_DatePicker th { text-align:center; padding:5px 0 }
.Zebra_DatePicker td { cursor:pointer }
.Zebra_DatePicker .dp_daypicker td,
.Zebra_DatePicker .dp_daypicker th,
.Zebra_DatePicker .dp_monthpicker td,
.Zebra_DatePicker .dp_yearpicker td { width:30px; border:1px solid #cccccc; background-color:#ffffff; color:#333333; }
.Zebra_DatePicker .dp_header { border:1px solid #cccccc; border-bottom:none; }
.Zebra_DatePicker .dp_header td { color:#333333; background:#f0f0f0; position:relative; padding:6px 0 4px 0; text-align:center; vertical-align:middle; }
.Zebra_DatePicker .dp_header td:before { content:""; display:block; position:absolute; top:0; left:0; width:100%; height:1px; border-top:1px solid #f9f9f9; }
.Zebra_DatePicker .dp_header .dp_previous,
.Zebra_DatePicker .dp_header .dp_next { width:30px; }
.Zebra_DatePicker .dp_header .dp_previous:after,
.Zebra_DatePicker .dp_header .dp_next:after { content:""; font-family:"icon"; display:inline-block; font-size:12px; text-align:center; vertical-align:middle; color:#666666; }
.Zebra_DatePicker .dp_header .dp_previous:after { content:"\e922"; }
.Zebra_DatePicker .dp_header .dp_next:after { content:"\e923"; }
.Zebra_DatePicker .dp_header .dp_previous.dp_hover:after,
.Zebra_DatePicker .dp_header .dp_next.dp_hover:after { color:#078d34; }
.Zebra_DatePicker .dp_header .dp_caption { font-weight:bold; color:#555555; }
.Zebra_DatePicker .dp_header .dp_hover { color:#078d34; background:#f0f0f0; }
.Zebra_DatePicker .dp_header .dp_blocked { color:#333333; cursor:default }
.Zebra_DatePicker .dp_footer { border:1px solid #cccccc; border-top:none; }
.Zebra_DatePicker .dp_footer .dp_hover { color:#078d34; background:#f0f0f0; }
.Zebra_DatePicker .dp_footer td { padding:2px 0 1px 0; }
.Zebra_DatePicker .dp_footer td:after { content:"\ed14"; font-family:"icon"; display:inline-block; font-size:10px; text-align:center; vertical-align:middle; color:#bbbbbb; }
.Zebra_DatePicker .dp_footer:hover td:after { color:#999999; }
.Zebra_DatePicker td.dp_week_number,
.Zebra_DatePicker .dp_daypicker th { background:#ffffff; font-size:10px; padding:7px 0 5px 0; }
.Zebra_DatePicker td.dp_weekend_disabled,
.Zebra_DatePicker td.dp_not_in_month { background-color:#f0f0f0; color:#d0d0d0; cursor:default }
.Zebra_DatePicker td.dp_weekend { background-color:#ffffff; color:#333333; }
.Zebra_DatePicker td.dp_selected { color:#ffffff; background-color:#31bc60; }
.Zebra_DatePicker .dp_monthpicker td { width:33%; text-align:center; vertical-align:middle; }
.Zebra_DatePicker .dp_yearpicker td { width:33%; text-align:center; vertical-align:middle; }
.Zebra_DatePicker td.dp_current { font-weight:bold; color:#078d34; }
.Zebra_DatePicker td.dp_selected.dp_current { font-weight:normal; color:#ffffff; }
.Zebra_DatePicker td.dp_disabled_current {}
.Zebra_DatePicker td.dp_hover { color:#ffffff; background-color:#31bc60; }
.Zebra_DatePicker td.dp_disabled { background-color:#f0f0f0; color:#d0d0d0; cursor:default }
button.Zebra_DatePicker_Icon { display:inline-block; width:32px; height:32px; text-align:center; vertical-align:middle; cursor:pointer; border:1px solid #cccccc; border-left:none; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
button.Zebra_DatePicker_Icon:after { content:"\eb90"; font-family:"icon"; color:#cccccc; font-size:14px; line-height:30px; display:inline-block; vertical-align:middle;  }
button.Zebra_DatePicker_Icon_Disabled:after { color:#cccccc; }
button.Zebra_DatePicker_Icon_Inside {}
.form-date.emphasize { color:#078d34; }
.form-date.warning { color:#ee0000; }
.form-date.warning+button.Zebra_DatePicker_Icon { border-color:#ee0000; }
.form-date.warning+button.Zebra_DatePicker_Icon:after { color:#ee0000; }



/**** 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-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) ; }