*{
     box-sizing: border-box;
}
 html, body{
     min-height: 100%;
     margin: 0;
     padding: 0;
     display: flex;
     min-height: 100vh;
     flex-direction: column;
}
 body{
     font-family: 'Exo 2', sans-serif;
     font-size: 14px;
     color: #232323;
     background-color: #AFE4FF;
    background-image: repeating-linear-gradient(-135deg, transparent, transparent 35px, rgba(255, 255, 255, 0.5) 35px, rgba(255, 255, 255, 0.5) 70px);
}
 h1,h2,h3,h4,h5,h6{
     font-weight: 600;
}
 a{
     color: #232323;
     text-decoration: underline;
     transition: .3s;
}
 a:hover, a:focus, a:active{
     outline: none;
     color: #B17 !important;
     text-decoration: underline;
}
 ::-webkit-input-placeholder{
     color: rgba(68, 170, 221, .5);
}
 ::-moz-placeholder{
     color: rgba(68, 170, 221, .5);
}
 :-moz-placeholder{
     color: rgba(68, 170, 221, .5);
}
 :-ms-input-placeholder{
     color: rgba(68, 170, 221, .5);
}
 button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner {
     border: none;
}
 .pullRight{
     float: right !important;
}
 .clearFix:before, .clearFix:after {
     content:"";
     display:table;
}
 .clearFix:after {
     clear:both;
}
 .clearFix{
     zoom:1;
    /* For IE 6/7 (trigger hasLayout) */
}
 .recentlyChecked, .skillsList, .mapList, .topList, .userName, .userRank{
     margin: 0;
     padding: 0;
}
 .mapList .userRank {
     width: 345px;
}
 .wrap{
     flex: 1;
     min-height: 100%;
     background-color: #fff;
     box-shadow: 0px 1px 3px rgba(0,0,0,.25);
}
 .wrap:after{
     content: "";
     display: block;
}
 #pageHeader{
     display: block;
     background-color: #FFFFFF;
}
 #pageHeader:after{
     content: "";
     border-bottom: 3px solid #B17;
     display: block;
}
 .subHeader{
     margin: 0 auto;
     background-color: #4AD;
     color: #fff;
}
 .headerContent{
     display: flex;
}
 .headerContent h1 a{
     color: #B17;
     text-decoration: none;
}
 .headerContent nav ul li{
     display: flex;
     align-items: center;
     white-space: nowrap;
     font-size: 18px;
     font-weight: 600;
     padding: 1px 0;
     color: #4AD;
}
 .headerContent nav ul li a, .headerContent nav ul li span{
     text-decoration: none;
     color: #4AD;
}
 .headerContent nav li a:hover, .headerContent nav li a:focus, .headerContent nav li a:active, .headerContent nav li span.active, .headerContent nav li.dropdown:hover, .headerContent nav li.dropdown:focus, .headerContent nav li.dropdown:active{
     color: #B17;
     transition: .3s;
}
 .headerContent nav li a:after, .headerContent nav li.dropdown span:after{
     transition: .3s;
     content: '';
     display: block;
     background-color: #4AD;
     height: 3px;
     width: 0%;
}
 .headerContent nav li a:hover:after, .headerContent nav li a:focus:after, .headerContent nav li a:active:after, .headerContent nav li span.active:after{
     transition: .3s;
     content: '';
     display: block;
     background-color: #B17;
     height: 3px;
     width: 100%;
}
 .headerContent nav li.dropdown{
     position: relative;
}
 .headerContent nav li.dropdown .fa{
     font-weight: 600;
}
 .headerContent nav li.dropdown ul{
     position: absolute;
     z-index: 2;
     margin-left: -3px;
     margin-top: 27px;
     left: 0;
     top: 0;
     transition: .3s;
}
 .headerContent nav li.dropdown ul li{
     opacity: 0;
     visibility: hidden;
     float: none;
     border: none;
     margin: 0;
    /*padding: 0 30px;
     */
     height: 0;
     overflow: hidden;
     transition: .3s;
}
 ul.faq{
     padding: 0;
     font-size: 16px;
}
 ul.faq li{
     margin-bottom: 25px;
}
 ul, .headerContent nav li, .mainDecr li, .skillsList, .mapList, .topList{
     list-style: none;
}
 .skillList{
     margin-top: 0;
}
 .mapList li:hover, .topList li:hover:not(.topTitle), .focused {
     background-color: #FEEAF5;
     box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
}
 .skillsList li:not(.skillsListRankTitle){
     height: 25px;
     line-height: 18px;
     margin-bottom: 10px;
     display: flex;
     position: relative;
}
 .skillsList li.skillsListRankTitle{
     height: 36px;
     display: flex;
     position: relative;
}
 .skillLabel{
     display: inline-block;
     width: 75px;
}
 .skillBar{
     font-weight: 600;
     height: 20px;
     display: inline-block;
     color: #fff;
     z-index: 0;
     width: 54%;
}
 output.skillValue{
     display: inline-block;
     width: 50px;
     background-color: #B17;
     text-align: center;
     height: 20px;
     float: left;
     color: #fff;
     font-weight: 600;
     z-index: 1;
}
 .skillDiff{
     display: inline;
     color: #fff;
     margin-left: 10px;
     font-size: 16px;
     font-weight: 600;
     opacity: 0;
     line-height: 16px;
}
 .skillBar .bar{
     height: 20px;
     display: inline-block;
     float: left;
     background-color: #44aadd;
     display: inline-block;
     z-index: -1;
     position: relative;
}
 .skillBar .diff{
     display: inline-block;
     background-color: #fff;
     height: 100%;
}
 .userInfo{
     margin-bottom: 10px;
}
 .userAvatar{
     width: 128px;
     height: 128px;
     background-repeat: no-repeat;
     background-size: contain;
     float: left;
     border-radius: 5px;
}
 .rankingContent .userRank .userRankTitle{
     border: 3px solid rgb(255, 255, 255);
     padding: 7px;
     font-size: 12.5px;
     line-height: 10px;
     width: 100px;
}
 .rankingContent .userRank {
     width: inherit;
}
 .userRank .userRankTitleDescr{
     display: inline-block;
     color: rgba(0,0,0,0);
}
 .userRank:hover .userRankTitleDescr{
     color: rgba(1,1,1,.5);
     font-style: italic;
     margin-left: 10px;
}
 #themeSwitchButton{
     position: absolute;
     border: none;
     background: none;
     width: 30px;
     height: 30px;
     outline-color: transparent;
}
 #themeSwitch:hover img{
     fill: white;
}
 .mapDescr a, .topDescr a{
     color: inherit;
     text-decoration: none;
}
 .topDescr .num{
     width: 40px;
     display: inline-block;
}
 .blue{
     color:  #44aadd;
     font-weight: 600;
}
 .black{
     color: #000;
}
 .mods{
     color: #000000FF;
     font-weight: 600;
}
 .pink{
     color: #B17;
     font-weight: 600;
}
 .small{
     font-size: 50%;
     font-style: italic;
     opacity: 0.5;
}
 .topTitle{
     font-weight: 600;
}
 .topN, .topName, .topSkill{
     display: inline-block;
}
 .topN{
     width: 70px;
}
 .topName{
     width: 130px;
}
 .topSkill{
     width: 70px;
}
 .topNav a{
     display: inline-block;
}
 .topNav span.disabled{
     color: rgb(189, 189, 189);
}
 .countrySection .countyName+.flag-icon{
     width: 27px;
     height: 20px;
}
/**/
 .hvr-bounce-to-right {
     display: block;
     vertical-align: middle;
     -webkit-transform: translateZ(0);
     transform: translateZ(0);
     box-shadow: 0 0 1px rgba(0, 0, 0, 0);
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
     -moz-osx-font-smoothing: grayscale;
     position: relative;
     -webkit-transition-property: color;
     transition-property: color;
     -webkit-transition-duration: 0.5s;
     transition-duration: 0.5s;
}
 .hvr-bounce-to-right:before {
     content: "";
     position: absolute;
     z-index: -1;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: #B17;
     -webkit-transform: scaleX(0);
     transform: scaleX(0);
     -webkit-transform-origin: 0 50%;
     transform-origin: 0 50%;
     -webkit-transition-property: transform;
     transition-property: transform;
     -webkit-transition-duration: 0.5s;
     transition-duration: 0.5s;
     -webkit-transition-timing-function: ease-out;
     transition-timing-function: ease-out;
}
 .hvr-bounce-to-right:hover, .hvr-bounce-to-right:focus, .hvr-bounce-to-right:active {
     cursor: pointer;
     color: white;
}
 .hvr-bounce-to-right:hover:before, .hvr-bounce-to-right:focus:before, .hvr-bounce-to-right:active:before {
     -webkit-transform: scaleX(1);
     transform: scaleX(1);
     -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
     transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}
/**/
 .hvr-shutter-in-horizontal {
     display: block;
     vertical-align: middle;
     -webkit-transform: translateZ(0);
     transform: translateZ(0);
     box-shadow: 0 0 1px rgba(0, 0, 0, 0);
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
     -moz-osx-font-smoothing: grayscale;
     position: relative;
     background: #B17 !important;
     -webkit-transition-property: color;
     transition-property: color;
     -webkit-transition-duration: 0.3s;
     transition-duration: 0.3s;
}
 .hvr-shutter-in-horizontal:before {
     content: "";
     position: absolute;
     z-index: -1;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     background: #4AD;
     -webkit-transform: scaleX(1);
     transform: scaleX(1);
     -webkit-transform-origin: 50%;
     transform-origin: 50%;
     -webkit-transition-property: transform;
     transition-property: transform;
     -webkit-transition-duration: 0.3s;
     transition-duration: 0.3s;
     -webkit-transition-timing-function: ease-out;
     transition-timing-function: ease-out;
}
 .hvr-shutter-in-horizontal:hover, .hvr-shutter-in-horizontal:focus, .hvr-shutter-in-horizontal:active {
     cursor: pointer;
     color: white;
}
 .hvr-shutter-in-horizontal:hover:before, .hvr-shutter-in-horizontal:focus:before, .hvr-shutter-in-horizontal:active:before {
     -webkit-transform: scaleX(0);
     transform: scaleX(0);
     -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
     transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}
/**/
 .mainInput, .versusInput, .defaultInput{
     font-family: inherit;
     width: 100%;
     display: block;
     text-align: center;
     outline: 0px none;
     border-bottom: 1px solid #44aadd;
     border-width: 0px 0px 3px;
     border-style: none none solid;
     -moz-border-top-colors: none;
     -moz-border-right-colors: none;
     -moz-border-bottom-colors: none;
     -moz-border-left-colors: none;
     border-image: none;
     color: #44aadd;
     background-color: transparent;
}
 .columnTitle{
     display: flex;
     margin: 16px 0px;
     align-items: center;
     justify-content: space-between;
}
 .columnTitle h5, h5.recent, h5.ranksHeader{
     font-size: 22px;
     color: #B17;
     margin: 0;
     padding: 0;
}
 .columnWrap .columnTitle{
     margin: 0 0 16px 0;
}
 .recentlyChecked li a{
     display: flex;
     align-items: center;
     padding: 12px 15px;
     margin: 0 -15px 5px -15px;
}
 .recentlyChecked li a:hover{
     background-color: #FEEAF5;
     box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
}
 .recentlyChecked li a .userAvatar{
     float: none;
     width: 45px;
     height: 45px;
}
/* spinner */
 #loader {
     margin: 0 auto;
     width: 90px;
     height: 85px;
     -webkit-touch-callout: none;
     -webkit-user-select: none;
     -khtml-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
}
 #loader .s{
     cursor: default;
     font-size: 116px;
     font-style: italic;
     font-weight: 800;
     color: #b4ddf1;
     position: absolute;
     z-index: 9;
     line-height: 66px;
}
 #loader ul {
     margin: 0;
     list-style: none;
     width: 90px;
     padding: 0;
     height: 10px;
     position: relative;
     z-index: 10;
}
 #loader ul li {
     width: 2px;
     height: 10px;
     background-color: #b4ddf1;
}
 #loader ul li:nth-child(even) {
     width: 100%;
     height: 2px;
     background-color: #fff;
}
 @keyframes sequence1 {
     0% {
         width: 10px;
    }
     50% {
         width: 50px;
    }
     100% {
         width: 10px;
    }
}
 @keyframes sequence2 {
     0% {
         width: 20px;
    }
     50% {
         width: 65px;
    }
     100% {
         width: 20px;
    }
}
 #loader li:nth-child(1) {
     margin-left: 31px;
     animation: sequence1 1s ease infinite 0.1s;
}
 #loader li:nth-child(3) {
     margin-left: 25px;
     animation: sequence2 1s ease infinite 0.2s;
}
 #loader li:nth-child(5) {
     margin-left: 25px;
     animation: sequence1 1s ease-in-out infinite 0.3s;
}
 #loader li:nth-child(7) {
     margin-left: 25px;
     animation: sequence2 1s ease-in infinite 0.4s;
}
 #loader li:nth-child(9) {
     margin-left: 42px;
     animation: sequence1 1s ease-in-out infinite 0.5s;
}
 #loader li:nth-child(11) {
     margin-left: 45px;
     animation: sequence2 1s ease infinite 0.6s;
}
 #loader li:nth-child(13) {
     margin-left: 33px;
     animation: sequence1 1s ease infinite 0.7s;
}
 .spinnerLoading{
     text-align: center;
     color: #4AD;
     font-size: 30px;
     margin-top: 12px;
}
 .spinnerDescr{
     width: 500px;
     margin: 20px auto 0 auto;
     font-size: 16px;
     font-weight: normal;
}
 .flag-icon{
     border: 1px solid #777;
     width: 40px;
     height: 30px;
     background-size: 100% 100%;
}
 .spoiler-content{
     -webkit-transition: height 0.7s ease-out;
     transition: height 0.7s ease-out;
     padding-top: 15px;
     height: 0;
     overflow: hidden;
}
 .spoiler{
	background-color: rgb(254, 234, 245);
	box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
     padding: 1px 0px 5px 15px;
     cursor: pointer;
}
 #globe-icon{
     background-image: url(../images/earth-512px.svg);
     background-size: contain;
     background-position: 50%;
     background-repeat: no-repeat;
     position: relative;
     display: inline-block;
     width: 23px;
     line-height: 1em;
     height: 23px;
     margin-left: 5px;
}
 .recentlyUpdated .mapDescr{
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
}
 .recentlyUpdated .mapScore{
     font-size: 14px;
     text-align: right;
}
 .recentlyUpdated .recent{
     padding-bottom: 10px;
}
 .recentlyUpdated .modalWindowSwitch{
     font-size: 18px;
     font-weight: 400;
     text-decoration: none;
     border-bottom: 1px solid #FFFFFF;
}
 .modalWindowWrapper{
     display: none;
     position: fixed;
     z-index: 10;
     background-color: rgba(0,0,0,.8);
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
}
 .manualInputModal .manualInputSbmt{
     font-family: inherit;
     border: 0px none;
     outline: 0;
     margin: 0 auto;
     display: block;
     margin-top: 40px;
     font-size: 25px;
     color: #fff;
     background-color: #4AD;
     padding: 24px;
}
 .g-recaptcha{
     width: auto;
     overflow: hidden;
}
 .manualInputModal .g-recaptcha div div{
     margin: 40px auto 0 auto;
}
 .manualInputModal .separator{
     font-size: 32px;
     color: #4AD;
     text-align: center;
     padding: 15px;
}
 .manualInputModal #response:empty{
     border: none;
     padding: 0;
}
 .manualInputModal .defaultInput.mapId{
     font-size: 25px;
     border-bottom: 2px solid;
     margin: 0 auto;
}
 .manualInputModal #response{
     font-size: 16px;
     display: block;
     border: 3px solid #4AD;
     padding: 10px 20px 12px 20px;
     margin-bottom: 25px;
     font-weight: 800;
     color: #4AD;
}
 .osu-profile-logo {
     background-image: url(../images/osu-logo_70x70.png);
     width: 70px;
     height: 70px;
     position: absolute;
     z-index: 1;
}
 .topDescr .flag-icon{
     width: 27px;
     height: 20px;
     top: 5px;
     margin-right: 7px;
}
 abbr{
     text-decoration: none;
}
 #playerRanks{
     float: left;
     display: flex;
}
 #ranks{
     display: flex;
     flex-flow: column nowrap;
}
 #ranksNames .skillLabel{
     margin: 18px 0px 0px 0px;
}
 .skillTop{
     width: 150px;
     margin: 18px 0px 0px 0px;
}
 .skillTop span{
     width: 47%;
     display: inline-block;
}
 #skillTopLabels{
     width: 150px;
}
 #skillTopLabels span.country .flag-icon{
     width: 30px;
     height: 23px;
}
 #skillTopLabels span{
     width: 47%;
     display: inline-block;
     vertical-align: top;
}
 .manualInputModal .modalWindowSwitch.cross{
     float: right;
     color: #4AD;
     position: relative;
     top: -5px;
     right: 0px;
}
 .dropdown ul{
     display: flex;
     flex-direction: column;
}
 @media (min-width: 1024px) {
     .wrap{
         padding: 50px 50px 0 50px;
         width: 1050px;
         margin: 0px auto -70px auto;
    }
     #pageHeader{
         padding: 0px 50px 0px;
         margin: 0 auto 0 auto;
         width: 1050px;
    }
     #pageHeader:after{
         width: 1050px;
         margin-left: -50px;
    }
     .subHeader{
         padding: 0px 50px 0px 50px;
         width: 1050px;
    }
     .subHeader div{
         padding: 5px 0;
         display: inline-block;
    }
     .headerContent{
         margin: 30px 0px;
         height: 74px;
         justify-content: space-between;
         align-items: center;
    }
     .headerContent .logo{
         flex: 1;
         width: 80px;
         height: 80px;
         background-repeat: no-repeat;
         background-size: 80px 80px;
         background-position: 50%;
    }
     #headerLogo {
         background-image: url('../images/logo_120.png');
    }
     .headerContent h1{
         flex: 4;
         font-size: 40px;
         margin: 0;
         padding: 0;
         display: inline-block;
    }
     .headerContent nav{
         flex: 4;
         display: flex;
         justify-content: flex-end;
    }
     .headerContent nav ul{
         margin: 0;
         padding: 0;
         display: flex;
         flex-flow: row-wrap;
    }
     .headerContent nav ul li{
         float: left;
    }
     .headerContent nav > ul > li:not(:last-child){
         border-right: 3px solid rgb(68, 170, 221)
    }
     .headerContent nav > ul > li:last-child > a, .headerContent nav > ul > li:last-child > span{
         margin: 0 0 0 30px;
    }
     .headerContent nav > ul > li > a, .headerContent nav > ul > li > span{
         margin: 0 22px;
    }
     .headerContent nav li.dropdown ul{

    }
     .headerContent nav li.dropdown:hover ul, .headerContent nav li.dropdown:focus ul, .headerContent nav li.dropdown:active ul{
         padding: 10px 0;
         transition: .3s;
         border: 3px solid #4AD;
		 background-color: #fff;
    }
     .headerContent nav li.dropdown:hover ul li, .headerContent nav li.dropdown:focus ul li, .headerContent nav li.dropdown:active ul li{
         opacity: 1;
         visibility: visible;
         padding: 5px 30px;
         height: 32px;
         transition: .3s;
    }
     .mapList li, .topList li{
         padding: 1px 0px 5px 15px;
         margin-left: -15px;
         transition: .3s;
         display: flex;
         align-items: baseline;
    }
     #playerContent .leftColumn .skillsList{
         padding-right: 50px;
         float: left;
         min-width: 540px;
         margin-top: 45px;
    }
     #versusContent .rightColumn .skillLabel{
         text-align: right;
    }
     #versusContent .rightColumn .userInfo .userAvatar{
         float:right;
    }
     #versusContent .rightColumn .skillsList{
         right: 0;
         padding-right: 0;
    }
     #versusContent .rightColumn .skillsList li, #versusContent .rightColumn .skillsList li .skillBar{
         display: flex;
         flex-direction: row-reverse;
    }
     .skillBar .diff{
         float: left;
    }
     #versusContent .userInfo{
         display: flex;
         flex-direction: column;
         align-items: flex-start;
    }
     #versusContent .rightColumn .userInfo{
         align-items: flex-end;
    }
     #versusContent .userName{
         font-size: 24px;
         word-wrap: break-word;
    }
     #versusContent .rightColumn .userName, #versusContent .rightColumn .userRank{
         text-align: right;
    }
     .userAvatar{
         float: left;
    }
     .userName{
         font-size: 50px;
         margin-bottom: 10px;
    }
     .userRank .userRankTitle{
         font-size: 14px;
         font-weight: 600;
         display: inline-block;
         border: 5px solid rgb(255, 255, 255);
		 box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.2);
         color: rgb(255, 255, 255);
         background-color: #4C81C5;
         border-radius: 20px;
         padding: 10px;
         margin-right: 5px;
         text-align: center;
    }
     #versusContent .userRank .userRankTitle{
         border: 3px solid rgb(255, 255, 255);
         padding: 8px;
         font-size: 12.5px;
         line-height: 12px;
    }
     .rankingContent .userRank .userRankTitle{
         margin-right: 35px 
    }
     .rankingContent {
         margin-left: 35px;
    }
     .userWrap{
         padding: 0 20px;
         height: 128px;
         display: flex;
         flex-direction: column;
         justify-content: center;
    }
     #versusContent .rightColumn .userWrap .userName a{
         float: right;
         padding-left: 15px;
    }
     .footer, .wrap:after{
         height: 70px;
    }
     .footerContent{
         height: 100%;
         border-top: 2px solid #44aadd;
         width: 1050px;
         padding: 20px 50px 0px 50px;
         margin: 0 auto;
         background-color: #fff;
    }
     #footerInfo{
         float:left;
    }
     #themeSwitch{
         float:right;
         width: 30px;
    }
     .mapDescr{
         width: 700px;
         text-overflow: ellipsis;
         overflow: hidden;
         white-space: nowrap;
    }
     .topDescr{
         width: 210px;
		 flex-grow: 1;
		 max-width: 243px;
    }
     .mapScore{
         width: 50px;
         margin-left: 35px;
         font-size: 20px;
    }
     .mapNew{
         margin-left: 35px;
         font-size: 16px;
    }
     .topNav{
         display: flex;
         margin: 10px 0px 10px;
         justify-content: space-between;
         width: 300px;
    }
     .mainForm{
         margin: 0 auto;
         width: 415px;
    }
     .versusInputWrap{
         display: flex;
         justify-content: space-between;
         height: 54px;
    }
     .mainBtn, .versusBtn{
         font-family: inherit;
         border: 0px none;
         outline: 0;
         margin: 0 auto;
         display: block;
         margin-top: 40px;
         padding: 20px;
         font-size: 25px;
         color: #fff;
         background-color: #4AD;
    }
     .countrySection{
         display: inline-block;
        /* margin-bottom: 20px;
         */
    }
     .countrySection a{
         text-decoration: none;
    }
     .countrySection .topCountrys{
         display: flex;
         justify-content: space-between;
         margin-bottom: 10px;
    }
     .countrySection .countyName{
         font-size: 25px;
         display: inline-block;
         margin: 0;
         padding: 0;
         color: black;
    }
     .countrySection span+.countyName{
         margin-left: 15px;
    }
     .skillTitle{
         color: #000000FF;
         font-size: 35px;
         display: inline-block;
         margin: 0;
         padding: 0;
    }
     .skillTitleDescr{
         font-size: 16px;
         color: #787878;
         display: inline-block;
         margin-left: 3px;
    }
     .mainInput, .versusInput, .defaultInput{
         font-size: 40px;
    }
     .versus{
         font-size: 72px;
         font-weight: 600;
         color: rgb(187, 17, 119);
         position: absolute;
         text-align: center;
         left: 0;
         right: 0;
    }
     .versusInput{
         width: 40%;
    }
     .mainDecr, .versusContent, .columnWrap{
         display: flex;
         justify-content: space-between;
    }
     .mainDecr{
         margin-top: 50px;
         margin-bottom: 25px;
         width: 100%;
         font-size: 16px;
    }
     .columnWrap .leftColumn{
         width: 79%;
    }
     .columnWrap .rightColumn{
         width: 20%;
    }
     #versusContent .rightColumn{
         width: 60%;
    }
     .mainDecr .leftColumn{
         width: 59%;
         padding-right: 35px;
    }
     .mainDecr .rightColumn{
         width: 40%;
    }
     .recentlyChecked li a .userName{
         font-size: inherit;
         margin-bottom: 5px;
         margin-left: 12px;
    }
     .disable{
         height: 35px;
         position: absolute;
         width: 690px;
         background-image: repeating-linear-gradient(-45deg, rgba(108, 108, 108, 0.21), rgba(108, 108, 108, 0.21) 35px, rgba(255, 255, 255, 0.2) 35px, rgba(255, 255, 255, 0.2) 70px);
         margin: -7px 0 0 -10px;
         padding: 10px;
    }
     .comingsoon{
         color: black;
         position: absolute;
         margin: -5px 0px 0px 275px;
         font-size: 22px;
         font-weight: 700;
    }
     #versusContent .flag-icon{
         width: 20px;
         height: 15px;
    }
     .recentlyUpdated{
         margin-top: 40px;
         padding-bottom: 25px;
    }
     .recentlyUpdated .mapDescr{
         width: 690px;
    }
     .recentlyUpdated .mapScore{
         width: 180px;
    }
     .recentlyUpdated .modalWindowSwitch{
         margin-right: 43px;
         float: right;
    }
     .manualInputModal{
         background-color: #fff;
         width: 800px;
         margin: 150px auto 0 auto;
         padding: 50px 60px;
         z-index: 11;
    }
     .manualInputModal .manualInputSbmt{
         padding: 20px;
    }
     .manualInputModal .defaultInput.mapId{
         width: 300px;
    }
     .osu-profile-logo {
         top: 295px;
         margin-left: -25px;
    }
     .topCountry{
         display:none;
    }
     #skillTopLabels{
         margin: 0px 0px 0px -5px;
    }
     #versusContent .userWrap{
         justify-content: unset;
         padding: 20px 0px;
         height: 100%;
    }
	.mapScoreWrap{
         display: flex;
		 align-items: baseline;
    }
     #ranksNames {
         display: none;
    }
     h5.ranksHeader{
         display: none;
    }
}
 @media (max-height: 449px){
     .manualInputModal{
         padding: 20px 20px;
    }
     .g-recaptcha{
         float: left;
    }
}
 @media (min-height: 450px){
     .manualInputModal{
         padding: 20px 40px;
    }
     .g-recaptcha{
    }
}
 @media (max-width: 500px){
     .userInfo{
         justify-content: center;
         padding-left: 23px;
         padding-right: 23px;
    }
     .userInfo .userName{
         justify-content: center;
         font-size: 25px;
    }
     .userRank{
         align-self: center;
         display: flex;
         flex-flow: row wrap;
         justify-content: center;
         min-width: 280px;
    }
     .userRank > * {
         margin-top: 5px;
    }
}
 @media (max-width: 599px){
     .versusInputWrap{
         flex-flow: column;
    }
     .versusInputWrap .versus{
         font-size: 42px;
         margin: 10px auto 10px auto;
    }
}
 @media (min-width: 600px){
     .versusInputWrap .versus{
         font-size: 72px;
         width: 100px;
         margin: 0px auto 0px auto;
    }
}
 @media (max-width: 779px){
     .rankingSkillTitle{
        /* padding-right: 10px;
         */
         border-right: none;
         margin: 0;
         color: black;
         font-size: 35px;
         display: inline-block;
    }
}
 @media (min-width: 780px){
     .rankingSkillTitle{
         padding-right: 10px;
         border-right: 4px black solid;
         margin: 0 6px 0 0;
         color: black;
         font-size: 35px;
         display: inline-block;
    }
     .countrySection{
         display: inline-block;
    }
}
 @media (max-width: 680px){
     .rankingContent{
         display: none;
    }
}
 @media (max-width: 1023px){
     .rankingContent{
         margin-right: 20px;
         margin-left: 0px;
         padding: 0;
    }
}
 @media (max-width: 1023px) {
     .wrap{
         padding: 0 10px 0 10px;
         width: 98%;
         margin: 0px auto -60px auto;
    }
     .content{
         padding-top: 20px;
    }
     #pageHeader{
         margin: 0 auto 0 auto;
         padding: 5px 0px 0px 0px;
         width: 98%;
    }
     #pageHeader:after{
         width: 100%;
    }
     .subHeader{
         padding: 0px 0px 0px 0px;
         width: 98% 
    }
     .subHeader div{
         padding: 5px 0px 5px 10px;
         display: flex;
         flex-flow: row wrap;
    }
     .subHeader div *{
         margin-right: 5px;
    }
     .headerContent{
         margin: 0px 10px 10px 0px;
         justify-content: space-around;
         align-items: baseline;
         flex-flow: row wrap;
    }
     .headerContent .logo{
         width: 50px;
         height: 50px;
         background-repeat: no-repeat;
         background-size: 50px 50px;
         background-position: 50%;
         margin: 0px 0px 0px 20px;
         align-self: center;
    }
     #headerLogo {
         background-image: url('../images/logo_120.png');
    }
     .headerContent h1{
         font-size: 35px;
         margin: 6px 0px 0px 10px;
         padding: 0;
         display: inline-block;
    }
     .headerContent nav{
         margin: 0;
         padding: 0;
         flex-grow: 1;
         max-width: 360px;
    }
     .headerContent nav ul{
         display: flex;
         flex-flow: row wrap;
         justify-content: space-evenly;
         margin: auto;
		 padding: 0;
    }
     .headerContent nav ul li{
         flex-grow: 1;
         justify-content: space-evenly;
    }
     .headerContent nav > ul > li:last-child > a, .headerContent nav > ul > li:last-child > span{
         margin: 0 0 0 10px;
    }
     .headerContent nav > ul > li > a, .headerContent nav > ul > li > span{
         margin: 0 5px;
    }
     .headerContent nav li.dropdown:hover ul, .headerContent nav li.dropdown:focus ul, .headerContent nav li.dropdown:active ul{
         padding: 10px 0;
         transition: .3s;
         border: 3px solid #4AD;
         background-color: #FFFFFF;
    }
     .headerContent nav li.dropdown:hover ul li, .headerContent nav li.dropdown:focus ul li, .headerContent nav li.dropdown:active ul li{
         opacity: 1;
         visibility: visible;
         height: 32px;
         transition: .3s;
    }
     .skillList{
         padding-left: 20px;
    }
     .mapList li, .topList li{
         transition: .3s;
         display: flex;
         align-items: baseline;
         flex-flow: row wrap;
         padding-bottom: 5px;
    }
     .userInfo{
         display: flex;
         flex-flow: row wrap;
    }
     .userName{
         font-size: 25px;
         display: flex;
         min-width: 256px;
    }
     .userRankTitle{
         font-size: 14px;
         font-weight: 600;
         display: inline-block;
         border: 5px solid rgb(255, 255, 255);
         box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.2);
         color: rgb(255, 255, 255);
         background-color: #4C81C5;
         border-radius: 20px;
         padding: 10px;
         margin-right: 5px;
         text-align: center;
         margin-top: 10px 
    }
     .rankingContent {
         margin-left: 0px;
    }
     .userWrap{
         padding: 15px 20px;
         display: flex;
         flex-direction: column;
         justify-content: center;
    }
     .footer{
         height: 100%;
    }
     .wrap:after{
         height: 70px;
    }
     .footerContent{
         display: flex;
         border-top: 2px solid #44aadd;
         width: 98%;
         padding: 10px 10px 10px 10px;
         margin: 0 auto;
         background-color: #fff;
         flex-direction: row;
    }
     #footerInfo{
         flex-grow: 1;
         width: 220px;
    }
     #themeSwitch{
         width: 30px;
         margin: auto;
    }
     .mapDescr{
         width: 79%;
         text-overflow: ellipsis;
         overflow: hidden;
         white-space: nowrap;
         display: flex;
         flex-flow: row wrap;
         flex-grow: 1;
    }
     .topDescr{
         width: 210px;
         flex-grow: 1;
         max-width: 243px;
    }
     .mapScore{
         width: 50px;
         margin-left: 10px;
         font-size: 20px;
    }
     .mapNew{
         font-size: 16px;
    }
     .topNav{
         display: flex;
         margin: 10px 0px 10px;
         justify-content: space-between;
         max-width: 320px;
    }
     .mainForm{
         margin: 0 auto 20px auto;
         width: 90%;
    }
     .versusInputWrap{
         display: flex;
         justify-content: space-between;
    }
     .mainBtn, .versusBtn{
         font-family: inherit;
         border: 0px none;
         outline: 0;
         margin: 0 auto;
         display: block;
         margin-top: 30px;
         padding: 10px;
         font-size: 25px;
         color: #fff;
         background-color: #4AD;
    }
     .countrySection a{
         text-decoration: none;
         margin-right: 5px;
         margin-bottom: 5px;
    }
     .countrySection .topCountrys{
         display: none;
    }
     .countrySection .countyName+.flag-icon{
         vertical-align: baseline;
    }
     .countrySection .countyName{
         font-size: 25px;
         display: inline-block;
         margin: 0;
         padding: 0;
         color: black;
    }
     .countrySection span+.countyName{
         margin-left: 15px;
    }
     .skillTitle{
         color: #000000FF;
         font-size: 35px;
         display: inline-block;
         margin: 0;
    }
     .skillTitleDescr{
         font-size: 16px;
         color: #787878;
         display: inline-block;
         margin-left: 3px;
    }
     .mainInput, .versusInput, .defaultInput{
         font-size: 27px;
         margin: auto;
         max-width: 300px;
    }
     .versus{
         font-weight: 600;
         color: #4AD;
         text-align: center;
    }
     #versusContent .versus{
         font-size: 72px;
         margin: 0px auto 20px auto;
    }
     .versusInput{
    }
     .mainDecr, .columnWrap{
         display: flex;
         justify-content: space-between;
         flex-flow: row wrap;
    }
     .mainDecr{
         flex-direction: row;
         margin-top: 0px;
         margin-bottom: 25px;
         width: 100%;
         font-size: 16px;
         flex-flow: row wrap;
    }
     .columnWrap .leftColumn{
         width: 100%;
         padding-bottom: 20px;
    }
     #versusContent .rightColumn{
         max-width: none;
         width: 98%;
    }
     .columnWrap .rightColumn{
         max-width: 230px;
         width: 98%;
    }
     .mainDecr .leftColumn{
         width: 300px;
         padding-right: 35px;
         flex-grow: 2;
    }
     .mainDecr .rightColumn{
         width: 180px;
         flex-grow: 1;
    }
     .recentlyChecked li a .userName{
         font-size: inherit;
         margin-bottom: 5px;
         margin-left: 12px;
         min-width: 132px;
    }
     .disable{
         height: 35px;
         position: absolute;
         width: 98%;
         background-image: repeating-linear-gradient(-45deg, rgba(108, 108, 108, 0.21), rgba(108, 108, 108, 0.21) 35px, rgba(255, 255, 255, 0.2) 35px, rgba(255, 255, 255, 0.2) 70px);
         margin: -7px 0 0 -10px;
         padding: 10px;
    }
     .comingsoon{
         color: black;
         position: absolute;
         margin: -5px 0px 0px 50%;
         font-size: 22px;
         font-weight: 700;
    }
     .userName .flag-icon{
         margin-left: 10px;
    }
     .flag-icon{
         vertical-align: text-bottom;
         align-self: center;
    }
     .recentlyUpdated{
         margin-top: 40px;
         padding-bottom: 20px;
    }
     .recentlyUpdated .mapDescr{
         width: 70%;
    }
     .recentlyUpdated .mapScore{
         width: 26%;
         max-width: 115px;
    }
     .recentlyUpdated .recent{
         display:flex;
         flex-flow: row wrap;
         justify-content: space-between;
    }
     .modalWindowWrapper{
         max-width: 800px;
         max-height: 480px;
         bottom: 0;
         right: 0;
         margin: auto;
    }
     .manualInputModal{
         background-color: #fff;
         z-index: 11;
         height: 100%;
         width: 100%;
    }
     .manualInputModal #response{
         left:0;
         right:0;
         top: 37%;
         margin: 0 auto;
         width: 85%;
         background-color: white;
         visibility: visible;
         z-index: 1;
         position:fixed;
    }
     .osu-profile-logo {
         margin: 79px 0px 0px -21px;
    }
     .topDescr .flag-icon{
         vertical-align: baseline;
    }
     .mapScoreWrap{
         width: 50px;
         display: flex;
         flex-flow: column;
    }
     #ranksNames {
         display: flex;
         flex-flow: column nowrap;
    }
     #versusContent .rightColumn span.flag-icon{
         order: 1;
    }
     #skillTopLabels{
         margin: -25px 0px 0px -5px;
    }
}

.rec{
	display: flex;
	flex-flow: row;
	margin-bottom: 10px;
}

.slider-range{
	width: 100%;
	margin-left: 20px;
	align-self: center;
	margin-right: 10px;
}

.ui-widget-content{
	background-color: #44aadd !important;
}

.ui-widget-header{
	background-color: #B17 !important;
}

.min, .max {
	width: 50px;
	margin-left: 10px;	
}

.presetBtn, .presetResetBtn{
	font-family: inherit;
	border: 2px solid transparent;
	outline: 0;
	margin: 0px 10px 11px 0px;
	/* padding: 10px; */
	/* font-size: 20px; */
	color: #fff;
	background-color: #4AD;
	padding: 5px 5px;
	font-size: 16px;
}

.presetBtn:hover, .presetResetBtn:hover{
	border: 2px solid #B17;
}

.presetBtn:active, .presetResetBtn:active{
	background-color: #B17;
}

.presetResetBtn{	
	width: 100px;
	align-self: flex-end;
	margin: -46px 5px 12px 0px;
	padding: 6px 0;
}

/* .presetResetBtn:hover{ */
	/* border: 2px solid black; */
/* } */

/* .presetResetBtn:active{ */
	/* background-color: black; */
/* } */

.trainingIntervalInput{
	font-size: 16px;
	font-weight: bold;
     font-family: inherit;
     width: 50px;
     display: block;
     text-align: center;
     outline: 0px none;
     border-bottom: 1px solid #44aadd;
     border-width: 0px 0px 3px;
     border-style: none none solid;
     -moz-border-top-colors: none;
     -moz-border-right-colors: none;
     -moz-border-bottom-colors: none;
     -moz-border-left-colors: none;
     border-image: none;
     color: #B17;
     background-color: transparent;
}

.trainingIntervalInput:disabled{ 
	background-color: lightgray;
}

#trainingWrap{
	display: flex;
	flex-flow: row wrap;
	padding: 0;
	font-size: 16px;
	margin-bottom: 40px;
	justify-content: space-between;
}

#trainingWrap p{
	flex-basis: 100%;
}

#trainingWrap .rec label{
	width: 105px;
	flex-shrink: 0;
}

#trainingWrap .rec .skillLabel:hover{
	text-decoration: underline;
}

#trainingWrap .rec .skillLabel .fa{
	float: right;
}

.ui-corner-all{
	border-radius: 0 !important;
}

.ui-button{
	font-family: inherit;
	background-color: #4AD !important;
	border-color: #4AD !important;
	color: white !important;
}

.ui-state-active{
	background-color: lightgray !important;
	border-color: lightgray !important;
}

#trainingColumnsWrap{
	display: flex;
	flex-flow: row wrap;
}

#recWrap{
	display: flex;
	flex-flow: column;
	width: 100%;
    max-width: 700px;
	margin-right: 35px;
	/* flex: 7; */
	flex-basis: 80%;
	flex-grow: 1;
	margin-bottom: 50px;
}

#presetsWrap{
	display: flex;
	flex-flow: row wrap;
	flex: 1;
    align-content: baseline;
	flex-basis: 22%;
	margin-bottom: 50px;
}

#findMaps{
	height: 70px;
	align-self: flex-end;
	margin: 0;
	margin-bottom: 30px;
}

/* tables */

.tablesorter {
	border-spacing: 0;
	border-collapse: collapse;
	margin:10px 0pt 15px;
	font-size: 16px;
	overflow:auto;	
	border: 2px solid #e6EEEE;
}

@media (max-width: 510px) {
	.tablesorter {
		display: block;
	}
}

table.tablesorter thead tr th, table.tablesorter tfoot tr th {
	background-color: #e6EEEE;
	font-size: 16px;
	padding: 4px;
	
}
table.tablesorter thead tr .header {
	background-image: url(../images/bg.gif);
	background-repeat: no-repeat;
	background-position: center right;
	cursor: pointer;
	padding-right: 15px;
}
table.tablesorter tbody td {
	color: #3D3D3D;
	padding: 4px;
	vertical-align: top;
	border: 2px solid #4AD;
}
table.tablesorter tbody tr.odd td {
	background-color:#F0F0F6;
}
table.tablesorter thead tr .headerSortUp {
	background-image: url(../images/asc.gif);
}
table.tablesorter thead tr .headerSortDown {
	background-image: url(../images/desc.gif);
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
	background-color: #4AD;
	color: white;
	border: 2px solid #4AD;
}

table.tablesorter thead tr .header:nth-child(1){
	min-width: 150px;
}

.wrapper_full > table
{
    width: 100%;
}

#trainingModsWrap{
	/* margin-top: 50px; */
	margin-bottom: 25px;
}

#presetsWrap .columnTitle{
	flex-basis: 100%;
}

.modIgnored {
	background-color: lightgray !important;
	border-color: lightgray !important;
}

.modDisabled {
	background-color: #B17 !important;
	border-color: #B17 !important;
	text-decoration: line-through !important;
}

.modBtn {
	margin-bottom: 5px;
}

#loadPlayer{
	font-family: inherit;
	outline: 0;
	color: #fff;
	background-color: #4AD;
	padding: 10px;
	font-size: 25px;
	margin-top: 0;
	margin-bottom: 50px;
}

#username {
	margin-bottom: 50px;
}

#captchaUsername{
	display: none;
	margin: 0 auto;
	margin-top: -26px;
}

#captchaFindMaps{
	display: none;
	margin-bottom: 28px;
    align-self: flex-end;
}

.anchor{
  display: block;
  height: 50vh; /* 50% viewport height */
  margin-top: -50vh;
  visibility: hidden;
}