#profile_content{min-height: 800px;} #profile_cover{background-size: cover; position: relative;} #profile_cover:before{content: ''; position: absolute; bottom: 0px; left: 0px; width: 100%; height: 150%; background-image: linear-gradient(to bottom, transparent, var(--bg_white));} #profile_cover > section > div{height: 370px; background-color: var(--bg_silver); border-radius: 0px 0px 10px 10px; position: relative; overflow: hidden; background-size: cover; background-position: center; position: relative;} #profile_cover > section > div > div{width: 130px; height: 130px; background-color: var(--bg_silver); box-shadow: 0px 0px 0px 5px var(--bg_white); border-radius: 50%; position: absolute; left: 0px; right: 0px; bottom: 45px;} #profile_info{padding: 15px 15px 25px 15px; border-bottom: 1px solid var(--bg_line); margin-bottom: 25px;} #profile_info .piMain{display: grid; grid-template-columns: 1fr 300px; grid-gap: 15px;} #profile_info .piMain > div{width: 100%;} #profile_info .piSocmed{white-space: nowrap; width: 100%; display: contents;} #profile_info .piSocmed > div{display: inline-block;} #profile_info .piSocmed > div:not(:last-child){margin-right: 15px;} #profile_info .piSocmed .psItems{display: grid; grid-template-columns: 15px 1fr; grid-gap: 5px; align-items: center; margin-top: 10px;} #profile_info .piSocmed .psItems > div{width: 100%;} #profile_info .piSocmed .psItems > div:first-child > div{width: 15px; height: 15px;} #profile_info .piLeft > div:first-child > h1{font-size: 30px;} #profile_info .piLeft > div:nth-child(2){color: var(--text_silver); font-size: 17px;} #profile_info .piLeft > div:nth-child(3){margin-top: 10px;} #profile_info .piLeft > div:nth-child(3) > div:first-child{max-height: 105px; overflow: hidden;} #profile_info .piLeft > div:nth-child(3) > div:nth-child(2){height: 15px; display: none; position: relative; cursor: pointer;} #profile_info .piLeft > div:nth-child(3) > div:nth-child(2) > div:first-child{position: absolute; width: 100%; height: 25px; top: -24px; background-image: linear-gradient(to bottom, transparent, var(--bg_white));} #profile_info .piLeft > div:nth-child(3) > div:nth-child(2) > div:nth-child(2){width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; position: relative; top: 7px;} #profile_info .piLeft > div:nth-child(3) > div:nth-child(2) > div:nth-child(2).down{border-top: 7px solid var(--bg_silver);} #profile_info .piLeft > div:nth-child(3) > div:nth-child(2) > div:nth-child(2).up{border-bottom: 7px solid var(--bg_silver);} #profile_info .piLeft .plPremium{padding: 2px 15px; background: var(--bg_orange); border-radius: 50px; font-size: 13px; margin-left: 10px; color: var(--text_white); position: relative; top: -1px;} #profile_info .piLeft .plFollowers{margin-top: 15px; font-size: 20px; font-weight: bold; white-space: nowrap; width: 100%;} #profile_info .piLeft .plFollowers > div{display: inline-block;} #profile_info .piLeft .plFollowers > div:first-child{margin-right: 25px;} #profile_info .piLeft .plFollowers > div:first-child > a > span:first-child{margin-right: 5px;} #profile_info .piRight{text-align: right;} #profile_info .piRight .pirOptions{display: inline-block; width: 100%;} #profile_info .piRight .pirOptions > div{vertical-align: top;} #profile_info .piRight .pirOptions .piroBtn{width: 35px; height: 35px; cursor: pointer; box-shadow: inset 0px 0px 0px 2px var(--bg_black); border-radius: 5px; display: inline-block;} #profile_info .piRight .pirOptions .piroBtn > div{width: 25px; height: 25px; margin-top: 5px;} .profile_achievement{margin-top: 25px; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-gap: 10px; direction: rtl;} .profile_achievement > div{width: 51px; height: 51px;} .profile_popup_achievement{padding: 15px;} .profile_popup_achievement > div:first-child > div{width: 150px; height: 150px; background-size: 100%;} .profile_popup_achievement > div:nth-child(2){margin-top: 25px; font-size: 17px; font-family: 'bold'; text-align: center;} .profile_popup_achievement > div:nth-child(3){margin-top: 12px; text-align: center;} .profile_popup_achievement > div:nth-child(3) > span{padding: 4px 10px; font-size: 11px; background: var(--bg_silvercalm); border-radius: 5px;} .profile_popup_achievement > div:nth-child(4){margin-top: 15px; text-align: center;} .profile_popup_achievement > div:nth-child(5){margin-top: 25px;} .profile_opt{white-space: nowrap; margin-top: 25px;} .profile_opt > div:not(:last-child){margin-right: 15px;} .profile_opt > div{display: inline-block; font-size: 11px; font-weight: bold; color: var(--text_silver); text-decoration: underline; cursor: pointer;} .profile_count_works{margin-top: 15px;} .profile_count_works > div:first-child{font-weight: bold; margin-bottom: 10px;} .profile_count_works > div:nth-child(2){display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 15px;} .profile_count_works > div:nth-child(2) > div{width: 100%; text-align: center; background: var(--bg_silvercalm); border-radius: 5px; padding: 13px 0px;} .profile_count_works > div:nth-child(2) > div > div:first-child{font-weight: bold; margin-bottom: 3px; color: var(--text_blue);} .profile_pattern .ppSort{margin-bottom: 15px; white-space: nowrap;} .profile_pattern .ppSort > div{display: inline-block; width: 100%;} .profile_pattern .ppSort select{width: 150px; float: right;} .profile_pattern .ppBody{width: 100%; box-sizing: border-box; padding: 10px 15px; border: 1px solid var(--bg_line); border-radius: 10px;} .profile_pattern .ppBody .pbContent > div{display: grid; grid-template-columns: 30px 1fr;} .profile_pattern .ppBody .pbContent > div > div{width: 100%; position: relative;} .profile_pattern .ppBody .pbInfo{display: grid; grid-template-columns: min-content 1fr min-content; white-space: nowrap; font-size: 13px; margin-top: 10px;} .profile_pattern .ppBody .pbInfo > div{width: 100%;} .profile_pattern .ppBody .pbInfo .piStatus{display: grid; grid-gap: 10px; align-items: center; grid-template-columns: min-content 1fr min-content; width: 190px;} .profile_pattern .ppBody .pbInfo .piStatus > div{width: 100%;} .profile_pattern .ppBody .pbInfo .piStatus .psItems{white-space: nowrap; font-size: 0px;} .profile_pattern .ppBody .pbInfo .piStatus .psItems > div{display: inline-block; width: 12px; height: 12px; border-radius: 2px;} .profile_pattern .ppBody .pbInfo .piStatus .psItems > div:not(:last-child){margin-right: 5px;} .ppDay > div{position: absolute; width: 100%; font-size: 10px;} .ppDay > div:nth-child(1){top: 1px;} .ppDay > div:nth-child(2){top: 35%; transform: translateY(-50%);} .ppDay > div:nth-child(3){top: 65%; transform: translateY(-50%);} .ppDay > div:nth-child(4){bottom: 1px;} .ppMonth{display: table; font-size: 10px; width: 100%;} .ppMonth > div{display: table-cell; text-align: center; padding-bottom: 5px;} .profilePatternGrind{display: flex; flex-wrap: wrap;} .profilePatternGrind .ppgColumn{display: flex; flex-direction: column;} .profilePatternGrind .ppgBox{width: 13px; height: 13px; transition: var(--transition); border-radius: 3px; margin: 1.5px; display: flex; font-size: 7px; align-items: center; justify-content: center;} .profilePatternGrind .ppgBox:hover{transform: scale(1.3); box-shadow: 0px 0px 0px 1px var(--bg_blue);} .pc0{background: #E8F6FF;} .pc1{background: #B3DEFF;} .pc2{background: #85C5FF;} .pc3{background: #569EFF;} .pc4{background: var(--bg_blue);}