p{margin:0;padding:0}body{background-color:#e4e4e7;font-family:sans-serif}.centre{margin-left:auto;margin-right:auto}.title-select{text-align:center}.class-list{display:flex;flex-wrap:wrap;justify-content:center}.class-list-item{height:150px;margin-bottom:10px;margin-right:10px;width:300px}.button-select-mage-img{background-image:url(c5b47a589c567117dc56.png)}.button-select-sage-img{background-image:url(8c332eeb5af30f92158e.png)}.button-select-merchant-alchemist-img{background-image:url(6724b36eef3778fd737a.png)}.button-select-merchant-blacksmith-img{background-image:url(25075a0e4060654f3f22.png)}.button-select-acolyte-priest-img{background-image:url(806377551bc5377277af.png)}.button-select-acolyte-monk-img{background-image:url(e3d480f6707486bef7a2.png)}.button-select-swordman-crusader-img{background-image:url(efecaf6117892ff5c240.png)}.button-select-swordman-knight-img{background-image:url(92da7dd6668779f6c036.png)}.button-select-thief-assassin-img{background-image:url(27eaa8ad06c535d901f4.png)}.button-select-thief-rogue-img{background-image:url(3623530965064caebdc4.png)}.button-select-archer-hunter-img{background-image:url(63f4412d631a10d2363d.png)}.button-select-archer-bard-img{background-image:url(49069b72aa8a8c4ee6d1.png)}.button-select-archer-dancer-img{background-image:url(a0cbfe5a2a355e6d722e.png)}.button-select-mage-img:hover{background-image:url(b0dde12d3226441329be.png)}.button-select-sage-img:hover{background-image:url(84d197a8054cb86d42f0.png)}.button-select-merchant-alchemist-img:hover{background-image:url(8788553bd95e8c625370.png)}.button-select-merchant-blacksmith-img:hover{background-image:url(1bd071024b6567882b6c.png)}.button-select-acolyte-priest-img:hover{background-image:url(69198530866e139ee01c.png)}.button-select-acolyte-monk-img:hover{background-image:url(ab9af5acc63671c66df4.png)}.button-select-swordman-crusader-img:hover{background-image:url(7b424d343f3011514d11.png)}.button-select-swordman-knight-img:hover{background-image:url(029ae9760e2979918cd8.png)}.button-select-thief-assassin-img:hover{background-image:url(3308415bcb810c6045bd.png)}.button-select-thief-rogue-img:hover{background-image:url(3e50c61950bf25c711c9.png)}.button-select-archer-hunter-img:hover{background-image:url(a50d1a32545d4b33651c.png)}.button-select-archer-bard-img:hover{background-image:url(6684b7c0b751b98339ea.png)}.button-select-archer-dancer-img:hover{background-image:url(87e51dd9ada6e6838fdd.png)}.button-select-img{background-color:#fff;border:1px solid;height:150px;width:300px}.button-select-img:hover{background-color:#bbc}.job-tree{background-color:#5b719f;background-repeat:no-repeat;border:1px solid;color:#fff;display:flex;flex-direction:row;font-family:sans-serif;padding:5px;width:780px}.panel-statistic-job-one,.panel-statistic-job-two,.panel-statistic-job-two-hight{margin-bottom:10px}.skill{background-color:#ff0;border:1px solid;color:#000;display:flex;font-family:sans-serif;height:40px;margin-bottom:2px;white-space:nowrap;width:250px}.job-one,.job-two,.job-two-hight{width:254px}.job-name{margin-right:10px;text-align:center}.skill-img{background-color:#fff;box-sizing:border-box;height:40px;position:relative;width:40px}.skill-img:hover{border:3px solid #fce57f}.skill-block{height:40px;width:210px}.skill-name-block{background-color:#fff;display:flex;height:20px}.skill-name{flex:auto;margin:2px 0;padding:0;text-align:center}.skill-progress{background-color:#add8e6;display:flex;height:20px;justify-content:space-between;text-align:center}@media (max-width:699px){.job-tree{display:flex;flex-direction:column;max-width:350px}.panel-statistic{max-width:360px}.job-one{display:flex;flex-direction:column}.job-one,.job-two,.job-two-hight,.skill{width:300px}.skill-block{width:260px}}.line{display:flex;justify-content:center}.dot{background-color:gray;border-radius:50%;cursor:pointer;height:12px;margin:3px 2px;width:12px}.dot:hover{background-color:#5151fc}.dot-reset{background-color:red;border-radius:50%;cursor:pointer;height:15px;margin:2px 2px 0 0;width:15px}.hidden{background-color:blue}.panel-statistic{align-items:center;border:1px solid;display:flex;margin-bottom:10px;width:710px}.bnt-reset{cursor:pointer;margin:5px}.statistic-text{margin-right:5px}.red{background-color:red}.ePopDiv{background-color:#faf8e5;border:3px solid #000;box-shadow:2px 2px 10px rgba(0,0,0,.2);height:auto;left:0;max-width:600px;overflow:hidden;padding:3px;position:absolute;top:0;width:auto;z-index:100;word-wrap:break-word;white-space:pre-wrap}