.ranking-page-title{width:100%;position:absolute;left:0;right:0;top:150px;text-align:center;z-index:1;font-family:"Baumans",system-ui;font-weight:normal;font-size:3rem;text-shadow:3px 3px 2px rgba(0,0,0,.5);letter-spacing:.03rem;color:#ddd}.ranking-separator{display:block;position:relative;top:-190px;z-index:1;width:100%;height:25px;background:url("/public/img/pristontale/borders/header_separator.png") repeat-x;background-size:auto 100%;border-top:1px #222 solid;border-bottom:1px #222 solid;margin:0 0 2rem 0}.ranking-top-field{display:flex;flex-direction:row;position:relative;top:-230px;z-index:1;width:100%;height:200px;background:url("/public/img/pristontale/background/top-header-bg.png") no-repeat;background-size:cover;border-top:1px #222 solid;border-bottom:1px #222 solid;margin:0 0 2rem 0}.ranking-top-field .top-field{width:500px;display:flex;flex-direction:row;justify-content:center;margin:0 auto;gap:1rem}.ranking-top-field .top-field img{transform:scale(2.2);position:relative;z-index:100;left:-40px}.ranking-top-field .top-field .field-box{display:flex;flex-direction:column;gap:1rem;justify-content:center}.ranking-top-field .top-field .field-box .field-icon{display:flex;position:relative;top:0;gap:1rem;color:#e6af67;font-size:2rem;border:2px #e6af67 solid;border-radius:100px;background-color:#222;min-width:180px}.ranking-top-field .top-field .field-box .field-icon span{padding:.4rem 0 0 1rem}.ranking-top-field .top-field .field-box .field-icon.name{color:#e6af67;border:2px #e6af67 solid}.ranking-top-field .top-field .field-box .field-icon.class{color:#4bdba6;border:2px #4bdba6 solid}.ranking-top-field .top-field .field-box .field-icon.level{color:#407cb1;border:2px #407cb1 solid}.ranking-top-field .top-field .field-box .field-icon.clan{color:#ea8b6d;border:2px #ea8b6d solid}.ranking-top-field .top-field .field-box .field-icon.score{color:#70b8e3;border:2px #70b8e3 solid}.ranking-top-field .top-field .field-box .field-text{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-weight:500;font-size:1rem;letter-spacing:.02rem;color:#e6af67;padding:.9rem 1rem 0 0}.ranking-top-field .top-field .field-box .field-text.name{color:#e6af67}.ranking-top-field .top-field .field-box .field-text.class{color:#4bdba6}.ranking-top-field .top-field .field-box .field-text.level{color:#407cb1}.ranking-top-field .top-field .field-box .field-text.clan{color:#ea8b6d;justify-content:center}.ranking-top-field .top-field .field-box .field-text.score{color:#70b8e3}.ranking-top-field .sod-icon{transform:scale(1.2) !important;position:relative !important;z-index:100 !important;left:-40px !important}.container-ranking{position:relative;top:-150px;z-index:1;min-height:100vh}.container-ranking .ranking-widget{display:flex;flex-direction:column;justify-content:flex-start;background-color:#111;border:2px solid rgba(0,0,0,0);border-image:url("/public/img/pristontale/borders/login_border.png") 33 stretch;color:#eee}.container-ranking .ranking-widget .ranking-widget-header{position:relative;display:flex;align-items:center;background-color:#111}.container-ranking .ranking-widget .ranking-widget-header .ranking-widget-icon{position:absolute;left:-15px;top:5%;transform:translateY(-50%);width:32px;height:32px;display:block;color:#e6af67;font-size:2rem}.container-ranking .ranking-widget .ranking-widget-content{padding:1rem}.ranking-options{width:100%;display:flex;flex-direction:row;gap:1rem}.ranking-options .ranking-option{display:flex}.ranking-options .ranking-option .ranking-option-button{max-width:150px;height:50px;display:block;color:#e6af67;text-decoration:none;padding:.5rem .8rem .3rem .8rem;border:1px #6c4e23 solid;text-align:center;background-color:rgba(20,20,20,.5);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-weight:normal;font-size:1rem;letter-spacing:.02rem}.ranking-options .ranking-option .ranking-option-button span{font-size:1.5rem;position:relative;top:2px}.ranking-options .ranking-option .ranking-option-button.active{border:1px #e6af67 solid}.ranking-options .ranking-option .ranking-option-button.inactive{color:#aaa;border:1px #aaa solid;pointer-events:none}.ranking-options .ranking-option .ranking-option-button.inactive:hover{color:#aaa;border:1px #aaa solid;cursor:auto}.ranking-options .ranking-option .ranking-option-button:hover{border:1px #e6af67 solid;cursor:pointer}